jQWidgets jqxTreeMap colorRanges 属性介绍

简介

jQWidgets 是一个商业级的 jQuery 组件库，用于创建现代化的 Web 应用程序。jqxTreeMap 是 jQWidgets 库提供的一个组件，用于可视化树形数据结构的分层结构。

colorRanges 属性定义了树状图中用于显示数据值的颜色范围。使用颜色范围可以帮助用户更清楚地理解树形图中的数据分布。

语法

colorRanges: Array

colorRanges 属性是一个数组，其中每个元素定义了一个颜色范围。每个颜色范围包含以下属性：

{
    minValue: Number, // 最小值
    maxValue: Number, // 最大值
    color: String, // 颜色
    minOpacity: Number, // 最小不透明度
    maxOpacity: Number // 最大不透明度
}

示例

colorRanges: [
    { minValue: 0, maxValue: 10, color: '#B2DF8A', minOpacity: 0.2, maxOpacity: 1 },
    { minValue: 10, maxValue: 20, color: '#A3B8D8', minOpacity: 0.2, maxOpacity: 1 },
    { minValue: 20, maxValue: 30, color: '#FFCC00', minOpacity: 0.2, maxOpacity: 1 },
    { minValue: 30, maxValue: 40, color: '#EE6666', minOpacity: 0.2, maxOpacity: 1 }
]

上面的示例定义了四个颜色范围，当数据值在 0 到 10 之间时使用绿色，当值在 10 到 20 之间时使用蓝色，当值在 20 到 30 之间时使用黄色，当值在 30 到 40 之间时使用红色。每个范围的最小透明度为 0.2，最大透明度为 1。

注意事项

• colorRanges 数组中定义的范围值必须是连续的，不能有空缺。
• minValue 和 maxValue 的值应该与数据值的范围相对应。
• 颜色值可以是十六进制值、rgb 值或者预定义的颜色名称。
• 不透明度值必须在 0 到 1 之间，表示颜色的透明程度。

参考文献

• jQWidgets Documentation - jqxTreeMap colorRanges Property