首页 文章

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

提问于
浏览 次
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
              }
            }]
          })

但它没有按预期工作 .

提前致谢

angular highcharts

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/

    回复于

相关问题