angular - Highcharts Sunburst 在水平变化时改变颜色

Question

是否可以在水平变化时动态改变旭日形图中图层的颜色？

例如，这是我们的图表：

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

点击南亚图表将更改为

我试图动态更新级别

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
              }
            }]
          })

但它没有按预期工作。

提前致谢

标签： angularhighcharts

Answer 1

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/