Highcharts 矩形树图 Treemap 布局算法及层级交互实现

裁剪 (Strip)

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

查看一个条带的示例 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) {
  const 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}],
    ...
  }],
  ...
});

完整示例请在这里查看

小点的树状图聚类

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

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

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

完整示例请在这里查看

配置选项

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

在线示例

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