jQWidgets jqxTreeMap colorMode 属性介绍

jqxTreeMap 是一个基于 jQuery 的树状矩形图插件，可以用于数据可视化以及展示层次结构。其中 colorMode 属性可以对树状矩形图的颜色进行设置。

colorMode 属性

描述

colorMode 属性用于设置树状矩形图的颜色模式。共有两种模式可供选择：range 和 parent.

取值

• range：根据数据范围自动分配颜色。
• parent：使用一组固定的颜色，与每个子节点沿用其父节点的颜色。

默认值

range

代码示例

$("#jqxTreeMap").jqxTreeMap({
    colorMode: 'range', // 可选值：range 或 parent。
    source: sampleData
});

range 模式

range 模式可以根据数据范围自动分配颜色，通常用于显示数据中的某个指标，比如温度，收益等等。

示例

下面的代码展示如何使用 range 模式设置 jqxTreeMap 的颜色：

$("#jqxTreeMap").jqxTreeMap({
    colorMode: 'range', // 模式为 range
    source: sampleData // 数据源
});

效果

以下是使用 range 模式时的效果：

在这个例子中，每个矩形对应一个文件夹，文件夹大小代表其在磁盘上的大小，不同大小的文件夹使用不同的颜色展示。

parent 模式

parent 模式则使用一组固定的颜色，每个子节点沿用其父节点的颜色。通常用于显示数据的分类，比如颜色分类，地区分类等等。

示例

以下是使用 parent 模式时的代码：

$("#jqxTreeMap").jqxTreeMap({
    colorMode: 'parent', // 模式为 parent
    source: sampleData // 数据源
});

效果

以下是使用 parent 模式展示数据时的效果：

在这个例子中，每个矩形对应一个洲，不同洲的使用不同颜色表示。每个洲下面的子节点代表该洲下的国家，沿用其父节点的颜色。