如何在Highcharts嵌套树形图（Treemap）中显示容器节点？

嘿，我来帮你搞定这个多层嵌套树形图的容器显示问题！其实只要调整几个关键配置，就能让你的大容器和嵌套子容器都清晰显示出来，还能支持钻查看子内容，具体做法如下：

核心配置要点 #

• 让容器自动计算大小：Highcharts的treemap默认会自动把父容器下所有子节点的value加总，作为父容器的大小，所以不用手动给容器加value也能显示成一个独立块。
• 显示容器名称：通过数据标签配置，让每个容器的名称清晰显示，和子节点做区分。
• 支持钻取查看子内容：开启钻取功能，点击容器就能展开查看它的嵌套子元素。

修改后的完整代码示例 #

Highcharts.chart('container', {
  series: [{
    type: "treemap",
    animation: false,
    allowDrillToNode: true, // 开启点击容器钻取子节点的功能
    layoutAlgorithm: 'squarified', // 让容器块的布局更规整美观
    dataLabels: {
      enabled: true,
      formatter: function() {
        return this.point.name; // 显示每个容器/节点的名称
      },
      style: {
        fontSize: '12px',
        fontWeight: 'bold' // 容器名称加粗，和子节点形成视觉区分
      }
    },
    data: [
      // 第一个大容器
      { id: 'B', name: 'B' },
      { name: 'Anne', parent: 'B', value: 4 },
      { name: 'Peter', parent: 'B', value: 1 },
      // 嵌套在B下的子容器
      { name: 'aaa container', parent: 'B', id: 'aaa' },
      { name: 'Sub Item 1', parent: 'aaa', value: 2 },
      { name: 'Sub Item 2', parent: 'aaa', value: 3 }
      // 可根据需求继续添加更多子节点
    ]
  }]
});

额外说明 #

如果你想手动控制容器的大小，直接给容器节点加上value属性就行，比如：

{ id: 'B', name: 'B', value: 15 }

这样容器块的大小就由你设置的value决定，子节点会嵌套在这个块里面显示。

内容的提问来源于stack exchange，提问作者WoJ