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

loading...


1

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

例如,这是我们的图表:

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

点击南亚图表将会改变

我试图动态更新级别

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

但它没有按预期工作 .

提前致谢

loading...

1回答

  • 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/

评论

暂时没有评论!