jQWidgets jqxHeatMap setPaletteType() 方法(1)

📌 相关文章

📜 jQWidgets jqxHeatMap setPaletteType() 方法(1)

📅 最后修改于: 2023-12-03 14:43:24.291000 🧑 作者: Mango

jQWidgets jqxHeatMap setPaletteType() 方法

介绍

setPaletteType() 方法是 jQWidgets 中 jqxHeatMap 组件提供的一种方法。该方法可以用于设置 jqxHeatMap 组件的调色板类型，即用于绘制热图的颜色调色板。调色板类型包括预定义的多种类型，如基本、灰度、冷色调等，也可以自定义调色板。使用不同的调色板类型可以使得热图可视化的效果更加丰富。

//设置预定义调色板类型
$('#heatmap').jqxHeatMap({paletteType: 'basic'});

//设置自定义调色板
var colors = ['#FFFFFF', '#000000'];
$('#heatmap').jqxHeatMap({ paletteColors: colors });

语法

$('#heatmap').jqxHeatMap( 'setPaletteType', type );

参数

type：类型为 string，用于设置调色板类型，包括以下预定义类型：
- 'basic'：基本类型。
- 'scheme01'：鲜艳模式。
- 'scheme02'：绿蓝模式。
- 'scheme03'：紫色模式。
- 'scheme04'：粉红模式。
- 'warm'：暖色调。
- 'cool'：冷色调。
- 'gray'：灰度模式。

同时，也可以传入一个自定义调色板数组，例如：

var colors = ['#FFFFFF', '#000000'];
$('#heatmap').jqxHeatMap({ paletteColors: colors });

示范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqxHeatMap</title>
 
    <!-- include the JQWidgets framework -->
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            // create a HeatMap widget
            $("#heatmap").jqxHeatMap({
                width: 350,
                height: 350,
                source: getSource(),
                legendScaleCallback: function(value) {
                    return value.toFixed(1);
                },
                legendPosition: { left: 15, top: 220 },
                title: { text: "Heat Map Demo" }
            });
        
            // set the palette type to 'basic'
            $("#heatmap").jqxHeatMap('setPaletteType', 'basic');
        
            // get data for the HeatMap
            function getSource() {
                var data = [], rows = [];
                for (var i = 0; i < 20; i++) {
                    // generate random data
                    var rowData = [];
                    for (var j = 0; j < 20; j++) {
                        rowData.push(Math.floor(Math.random() * 100));
                    }
                    data.push(rowData);
                }
                return data;
            }
        });
    </script>
</head>
<body>
    <div id="heatmap"></div>
</body>
</html>

在上例中，我们创建了一个jqxHeatMap组件，并将调色板类型设置为basic。由于没有手动定义调色板，组件将使用预定义的颜色来绘制热图。

总结

setPaletteType() 方法是 jQWidgets 中 jqxHeatMap 组件的一种方法，用于设置热图的调色板类型。除了预定义调色板类型外，也可以传入自定义调色板数组。根据实际场景中可视化的需求，可以选择合适的调色板类型来绘制更为丰富、直观的热图效果。