Highcharts Sunburst在等级变化时改变颜色

是否可以在级别变化中动态更改旭日形图中的图层颜色?

例如,这是我们的图表:

点击像亚洲这样的大陆,我们会得到这样的东西,

点击南亚图表将会改变

我试图动态更新级别

this.update({
            levels: [{
              level: 1,
              levelIsConstant: false,
              dataLabels: {
                filter: {
                  property: 'outerArcLength',
                  operator: '>',
                  value: 64
                }
              }
            }, {
              level: 2,
              colorByPoint: true
            }, {
              level: 3,
              colorByPoint: true
            }, {
              level: 4,
              colorVariation: {
                key: 'brightness',
                to: 0.5
              }
            }]
          })
        } else {
          this.update({
            levels: [{
              level: 1,
              levelIsConstant: false,
              dataLabels: {
                filter: {
                  property: 'outerArcLength',
                  operator: '>',
                  value: 64
                }
              }
            }, {
              level: 2,
              colorVariation: {
                key: 'brightness',
                to: -0.5
              }
            }, {
              level: 3,
              colorByPoint: true
            }, {
              level: 4,
              colorVariation: {
                key: 'brightness',
                to: 0.5
              }
            }]
          })

但它没有按预期工作 .

提前致谢

回答(1)

2 years ago

Highcharts中默认不支持此类功能,并且需要多个自定义 . 我准备并举例说明了如何实现所需的结果,但它在钻取到最高水平时受到限制 .

H.seriesTypes.sunburst.prototype.drillUp = function() {
    this.drillToNode('0.0');

    this.update({
        levels: levelsOptions
    });
}


H.wrap(H.seriesTypes.sunburst.prototype, 'onClickDrillToNode', function(proceed, e) {
    var point = e.point,
        length = point.node.children.length;

    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    if (length) {
        this.update({
            levels: [{
                level: point.node.level,
                colorByPoint: true
            }, {
                level: point.node.level + 1,
                colorByPoint: true
            }]
        }, true);


        this.showDrillUpButton('The world');
    }
});

现场演示:https://jsfiddle.net/BlackLabel/evdjaqhc/