有一种很有意思的数据结构问题：当一个系统有几十甚至几百个类别时，普通柱状图很快就会失去意义。屏幕空间不够，人类视觉也很难比较这么多条柱子。

这时候数据可视化界想出了一种非常聪明的办法——把数据“铺满屏幕”。

于是出现了 Treemap（矩形树图）。

在 Highcharts 中，Treemap 是一种专门用于展示层级数据 + 数值占比的图表类型。它把屏幕空间切分成不同大小的矩形，每个矩形代表一个数据节点，面积大小对应数值权重。

一句话理解：矩形树图 = 用矩形面积表达数据权重的层级图。

它是一种空间利用率极高的数据可视化方式。

Highcharts Treemap 矩形树图使用指南

Highcharts Treemap 矩形树图使用需求

该树状图需要文件modules/treemap.js。 若要与 colorAxis一起使用，还必须包含 modules/heatmap.js。

首先引入模块：

<script src="https://code.highcharts.com/modules/treemap.js"></script> 

然后配置图表：

Highcharts.chart('container', {

    series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',

        data: [{
            id: 'A',
            name: '电子产品'
        },{
            id: 'B',
            parent: 'A',
            name: '手机',
            value: 6
        },{
            id: 'C',
            parent: 'A',
            name: '电脑',
            value: 4
        },{
            id: 'D',
            parent: 'A',
            name: '平板',
            value: 2
        },{
            name: '家电',
            value: 5
        },{
            name: '家具',
            value: 3
        }]
    }]
});

数据结构

核心数据结构：

id
parent
value

Highcharts数据的结构是一个 树tree,每个点代表一个节点。每个 节点都可以有自己的子节点。

树会自动在顶部创建一个节点，代表根节点。如果某个点没有定义父节点，或者父节点的ID不存在，父节点将会自动设置为根节点。

以下是Highcharts中树的构建示例：

data: [{
    name: 'I have children',
    id: 'id-1'
}, {
    name: 'I am a child',
    parent: 'id-1',
    value: 2
}, {
    name: 'I am a smaller child',
    parent: 'id-1',
    value: 1
}]

算法

Highcharts 会自动计算：

• 矩形面积比例

• 矩形布局

• 层级嵌套

• 标签显示

开发者只需要提供数据。

算法决定点的位置和大小。你使用的算法将会在很大程度上影响图表的外观。Highcharts 树状图提供了四种预设算法。

切片与切割

简单且快速的算法，非常适合组织点。使用“切片与骰子”算法的缺点是节点的长宽比可能变得非常糟糕，从而变得难以比较。这种情况在数据集较大时经常发生。

查看一个切片与切割的示例 example 。

条纹

这也是一种简单的算法，非常类似于切片与骰子（Slice And Dice）。不同之处在于，它不会在每个节点之间交替方向，而是沿着同一方向绘制所有节点，形成一组列。

查看一个条纹的示例example 。

方形化

一种旨在为每个点提供较低长宽比的算法。它会逐个将点添加到一条带中，直到找到最佳的长宽比，然后改变方向，用新的带重复相同的过程。这个过程按照相同的模式持续进行，直到所有点都放置在图表中。

查看一个方形化的示例 example .

裁剪

不要误以为这是条纹算法，它在行为上有一些明显的不同。 条纹算法的目标与平方化算法相同，都是为了获得较低的长宽比。这个过程非常相似，但不是交替改变方向，而是将条纹作为列并排绘制。

查看一个条带的示例 example 。

添加你自己的算法

你是否想使用另一种算法，或者更高级的版本？在Highcharts的树状图中添加新算法是相当简单的任务。具体流程如下：

首先创建包含该算法的函数。该函数有两个参数。第一个参数是一个包含父对象详细信息的对象，第二个参数是一个对象数组，每个对象包含一个子项的详细信息。

父对象传递的变量如下：

• Number x // 数字 x // 父元素的x位置
• Number y // 数字 y // 父元素的y位置
• Number width // 数字 宽度 // 父元素的宽度
• Number height // 数字 高度 // 父元素的高度
• String direction // 字符串方向 // 起始方向，可以是垂直或水平，子元素应沿此方向绘制
• Number val // 数字值 // 所有子元素值的总和

传递的每个子元素具有以下变量：

• Number val // 数字 数值 // 点的值
• Number level // 数字层级 // 节点在树中的层级

一个起始点可以是以下内容

function myFunction(parent, children) {
    childrenAreas = [];
    children.forEach(function(child) {
        // Do some calculations

        // These return values are required for each child
        childrenAreas.push({
            x: someXValue,
            y: someYValue,
            width: someWidth,
            height: someHeight
        });
    });
    return childrenAreas;
};

当算法函数完成后，我们需要通过扩展treemap原型来添加该函数

Highcharts.seriesTypes.treemap.prototype.myCustomAlgorithm = myFunction;

之后在声明图表选项时，应指定series.layoutAlgorithm为你的新自定义算法

const chart = new Highcharts.Chart({
    ...
    series: [{
       layoutAlgorithm: "myCustomAlgorithm",
       ...
    }],
    ...
});

使用层级

levels 选项允许在特定层级设置选项。这在每当数据树中的某一层级上的所有点都需要突出显示并与系列中的其他点不同的时候非常有用。

以下是一个示例，第一层将使用“切片与切块”算法，其余层将使用“方形化”算法。此外，所有第二层的点都将被着色为蓝色，而其他点将为红色。

const chart = new Highcharts.Chart({
    ...
    series: [{
       layoutAlgorithm: 'squarified',
       color: 'red',
       levels: [{
           level: 1,
           layoutAlgorithm: 'sliceAndDice'
       }, {
           level: 2,
           color: 'blue'
       }],
       ...
    }],
    ...
});

层级是恒定的：

levelIsConstant 选项与层级和 allowTraversingTree 选项一起使用。默认情况下，它设置为 true。当设置为 false 时，钻取时可见的第一层被视为第一层。否则，层级将与树结构中的层级相同。

一个示例 example，其中levelIsConstant被设置为假。

遍历层级

当 allowTraversingTree 选项为 true 时，点击某个点将把该点设为渲染的根节点。为了帮助导航各层，渲染了面包屑，显示一个返回上一级的按钮或返回到根节点的完整路径。

了解更多关于面包屑导航的信息 这里。here.

分组标题和数据标签

数据标签可以像应用于其他系列一样应用于树图，默认的数据层级位置在节点的中心。可以为每个层级指定数据标签。

一种特殊的数据标签形式是分组标题。要启用分组标题功能，请将
dataLabels.headers
选项设置为 true。最常用的应用标题的方法是在特定层级上启用它们。默认情况下，标题会占据分组节点内的空间，导致剩余空间减少，从而影响叶子节点的显示。这可能会导致叶子节点之间的相对大小失衡。为了避免这种情况，有一个实验性选项
nodeSizeBy,
可以将其设置为空leaf.

与 ColorAxis 一起使用

如果要与colorAxis一起使用，则必须同时包含modules/heatmap.js。

在将模块包含到你的项目中后，可以在图表选项中定义一个colorAxis对象。有关其选项的详细信息，请阅读 API .

const chart = new Highcharts.Chart({
    ...
    colorAxis: {
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },
    ...
});

每个点都需要自己的 colorValue.

const chart = new Highcharts.Chart({
    ...
    colorAxis: {
        ...
    },
    series: [{
        ...
        data: [{
            name: "Point 1",
            value: 1,
            colorValue: 5 // This value decides which color on the scale that the point gets.
        }],
        ...
    }],
    ...
});

完整示例请在这里查看

小点的树状图聚类

树状图聚类通过将数据点组织成更大的块，简化了大量数据的可视化，增强了可读性和性能。这种方法特别适合用紧凑、易于理解的格式展示海量信息。

要配置树状图聚类，可以使用cluster选项。在此选项中，您可以指定pixelWidth和pixelHeight，它们设置在区域被分组之前的最小像素大小。这些阈值确保较小的部分被合并成更大、更明显的区域，以提高可读性。name参数允许您为分组的节点定义自定义标签，这些标签会显示在工具提示、数据标签和其他图表元素中。有关其选项的详细信息，请查阅e API .

const chart = new Highcharts.Chart({
    ...
    series: [{
        ...
        type: "treemap",
        cluster: {
            enabled: true,
            pixelHeight: 20,
            pixelWidth: 10
        }
        ...
    }],
    ...
});

完整示例请在这里查看

Options

有关Highcharts树图选项的概述，请参阅 API.

模式演示链接

• 使用 colorAxis 的树状图
• 显示全球死亡率及其原因的树图
• 使用特定层级选项的树状图

总结

1. Treemap 矩形结构树图几乎是BI 分析平台的标准图表之一，在很多行业系统中非常常见。

• 金融行业-股票市场板块分析

• 电商平台-商品销售结构

• 互联网产品-用户来源结构

• 数据中心-服务器存储占用

• 人工智能数据库-结构化知识存量

2. 矩形树图能够在有限空间内展示大量数据类别，并清晰呈现结构关系。在 Highcharts 中，通过简单的 treemap 类型和 id / parent / value 数据结构，就可以快速构建一个专业级层级分析图。

当数据具有：大量分类、层级结构、权重占比，往往是最有效的表达方式之一。

它本质上是在回答一个问题：“哪些东西占据了最多空间？”