在 highcharts 样式模式下按父节点着色树图答案

【问题标题】：Coloring treemap by parent node in highcharts styled mode在 highcharts 样式模式下按父节点着色树图
【发布时间】：2017-01-25 09:49:07
【问题描述】：

我正在尝试在 highcharts 样式模式下创建一个树形图，并按其父节点为节点着色，例如 this example。

在样式模式下，我能够实现这一点的唯一方法是为每个子节点单独分配一个（css）类名：

{
  name: 'Anne',
  parent: 'A',
  value: 5,
  className: 'highcharts-color-1'
}

看我的例子：https://jsfiddle.net/kimpalita/1tLue9s0/

我想知道是否有人能够提出一种更优雅/更简化的方法来执行此操作，而不必在每个数据点中重复 className 属性。

提前谢谢你！

【问题讨论】：

标签： javascript css highcharts treemap

【解决方案1】：

我不认为父节点及其子节点有一个 css 类来区分它们与其他节点。但是您仍然可以添加代码以将父类名称添加到其子项中，这样您就可以省略为每个点指定类名。

 chart: {
    events: {
      load: function() {
        this.series[0].data.forEach(p => {
          var parent = p.parent;
          var className = parent && this.get(parent).className;
          if (className !== undefined) {
            p.graphic.addClass(className)
          }
        })
      }
    }
  },

示例：https://jsfiddle.net/k0gw0dop/

【讨论】：