Highcharts森伯斯特在级别变化时改变颜色

时间:2018-12-10 12:35:07

标签: angular highcharts

是否可以在级别更改时动态更改森伯斯特图表中图层的颜色?

例如,这是我们的图表:https://drive.google.com/file/d/1-KURkV1WJhCGrf9__zpBavNnI9gGPvPk/view?usp=sharing

当您点击亚洲之类的大陆时,我们会得到类似https://drive.google.com/file/d/1Hj_CvQ1iUsmHafFGTysfE_vllUOE405D/view?usp=sharing的信息,

在点击南亚图表时,将会像https://drive.google.com/file/d/1qWDAPl8OXPwGLn6YW8kI-4k8tKQJ0ipq/view?usp=sharing一样更改

我试图动态更新级别

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 个答案:

答案 0 :(得分:0)

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/