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

, но это не сработало, как ожидалось.

Заранее спасибо

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/