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

Question

我正在尝试在 highcharts 样式模式下创建一个树状图，并按照 this example 中的父节点为节点着色。

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

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

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

我想知道是否有人能够建议一种更 elegant/simplified 的方法来做到这一点，而不必在每个数据点中重复 className 属性。

提前致谢！

Answer 1

我认为父节点及其子节点没有 css class 来区别于其他节点。但是您仍然可以添加代码以向其子节点添加父 class 名称，这样您就可以省略为每个点指定 class 名称。

 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/

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

Coloring treemap by parent node in highcharts styled mode

javascript

css

highcharts

treemap