Question

我想通过使用属性'colorByPoint'true来显示不同级别的树图。

Highcharts.chart('container', {

 chart: {
marginTop: 50,
events: {
  load: function() {
    this.bread = {
      '': makeNode('', this.series[0].name, this.series[0])
    }
  }
}

}，系列：[{ 输入：'treemap'， layoutAlgorithm：'squarified'， allowDrillToNode：true， animationLimit：1000， dataLabels：{ 启用：false }，

    levelIsConstant: false,
    levels: [{
        level: 1,
        dataLabels: {
            enabled: true,
            align:'left',
            verticalAlign:'Top'
        },
        borderWidth: 1
    },
    {
        level: 2,
        colorByPoint: true, 
        dataLabels: {
            enabled: true,

        },
        borderWidth: 1
    }


    ],
    data: points
}],
 credits:false,
 plotOptions: {
    series: {

      dataLabels: {


        color: '#fff',
        textOutline:0,
        style: {
          fontWeight: 'bold'
        }
      },
      point: {
    events: {
      click: function(e) {
        const hasChildren = !!this.node.childrenTotal

        if (hasChildren) {
          const bread = this.series.chart.bread
          bread[this.id] = makeNode(this.id, this.name, this.series, bread[this.node.parent])
        }
      }
    }
  }
    }
    },
title: {
    text: ''
}

}）;

这是我的小提琴。 https://jsfiddle.net/irfanbsse/8djawts9/

但我不希望在第一级显示第二级颜色。第二级显示第二级等等。我怎么能这样做？感谢

Answer 1

这是一个演示，演示如何更改$ ghc --make helloworld上的子节点的颜色：

point.click.event

现场演示： https://jsfiddle.net/BlackLabel/sgkah0fq/

接下来要实现的是在点击导航中的上一级（带有click: function() { var points = this.series.points; this.node.children.forEach(function(child, i) { var point = points.find(function(point_) { return child.id === point_.id }); point.update({ color: color[i % (color.length - 1)] }); });形状的标签）时还原原始颜色。

Highchart树图颜色

1 个答案: