jQWidgets jqxHeatMap paletteSettings 属性

简介

jqxHeatMap 是 jQWidgets 的 jQuery 插件，用于绘制热力图。其中 paletteSettings 属性是用于设置热力图颜色映射的配置项。

属性

paletteSettings 属性包含以下子属性：

• colorGradient: 定义渐变色数组，用于热力图颜色插值。

• colorMap: 定义关键值对应的热力图颜色

• nullColor: 定义热力图中的空值（即没有数据的单元格）所显示的颜色。

• useRangeColors: 设置该值为 true 表示在 colorGradient 定义的区间外的所有值都显示为 nullColor，否则会显示为 colorGradient 中最接近该值的颜色。

示例

$('#heatmap').jqxHeatMap({
    source: sourceData,
    legendPosition: 'bottom',
    colorScaleRange: { from: 0, to: 100 }, // 定义数据范围为 0-100
    paletteSettings: {
        colorMap: [
            { value: 0, color: '#52BE80' },
            { value: 50, color: '#F7DC6F' },
            { value: 80, color: '#DC7633' },
            { value: 100, color: '#C0392B' }
        ],
        nullColor: 'transparent' // 表示没有数据的单元格显示为透明色
    }
});

上述代码中，定义了一个 jqxHeatMap 控件，并使用了一个数据源 sourceData。colorScaleRange 定义了数据的范围为 0-100。paletteSettings 中的 colorMap 定义了关键值 0、50、80、100 对应的颜色为绿色、黄色、棕色、红色。nullColor 定义了没有数据的单元格显示为透明色。

参考链接

1. jQWidgets - jQuery HeatMap Widget - https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxheatmap/jquery-heatmap-getting-started.htm
2. jQWidgets - jqxHeatMap API - https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxheatmap/jquery-heatmap-api.htm