jQWidgets jqxHeatMap width 属性(1)

📌 相关文章

📜 jQWidgets jqxHeatMap width 属性(1)

📅 最后修改于: 2023-12-03 15:32:18.138000 🧑 作者: Mango

jQWidgets jqxHeatMap的width属性介绍

概述

jQWidgets jqxHeatMap是一个基于jQuery的热图控件，可用于可视化显示数据集的热度分布。width属性是用来设置控件的宽度的。

语法

设置方式：

$('#jqxHeatMap').jqxHeatMap({ width: '300px' });

获取方式：

var width = $('#jqxHeatMap').jqxHeatMap('width');

示例

以下示例演示了如何设置和获取jqxHeatMap的width属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxHeatMap width属性示例</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="https://jqwidgets.com/public/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/scripts/jqxcore.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/scripts/jqxheatmap.js"></script>
    <script>
        $(document).ready(function () {
            $('#jqxHeatMap').jqxHeatMap({
                width: '300px',
                height: '200px',
                legendScaleCallback: function (value) {
                    return value.toFixed(0);
                },
                colorScale: {
                    colors: ['#00BFFF', '#228B22', '#FFD700', '#FF8C00', '#FF4500'],
                    minValue: 0,
                    maxValue: 100,
                    colorScaleType: 'custom'
                },
                source: [
                    [10, 18, 20, 32, 51, 72, 82, 67],
                    [13, 20, 28, 36, 59, 73, 98, 84],
                    [20, 27, 32, 47, 67, 92, 95, 81],
                    [25, 32, 45, 69, 97, 138, 125, 82],
                    [20, 27, 32, 47, 67, 92, 95, 81],
                    [13, 20, 28, 36, 59, 73, 98, 84],
                    [10, 18, 20, 32, 51, 72, 82, 67]
                ]
            });

            $('#setWidth').click(function () {
                $('#jqxHeatMap').jqxHeatMap('width', '500px');
            });

            $('#getWidth').click(function () {
                alert($('#jqxHeatMap').jqxHeatMap('width'));
            });
        });
    </script>
</head>
<body>
    <div id="jqxHeatMap"></div>
    <button id="setWidth">设置宽度为500px</button>
    <button id="getWidth">获取宽度</button>
</body>
</html>

属性值

width属性可以设置一个像素值或一个百分比值。如果设置为百分比，那么该属性的值是相对于父容器的宽度。

注意事项

如果不设置width属性，那么控件的默认宽度是100%。
width属性的值必须是字符串类型，且必须包含单位(px或%)。
如果百分比值被设置为width属性的值，那么要确保该控件的父容器已经设置了宽度值。

参考文献

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxheatmap/jquery-heatmap-api.htm#width

结论

本文介绍了jQWidgets jqxHeatMap的width属性相关的内容。开发人员可以按照介绍使用width属性，实现控件的宽度设置、获取等操作。