Highcharts Angular - Sunburst 实施

Question

我正在尝试实现旭日图，其中我有两个不同的数据源。我在下面的代码和框中有一个我试图实现的例子。

https://codesandbox.io/s/pedantic-visvesvaraya-1vsoh?fontsize=14&hidenavigation=1&theme=dark

我不确定这是否是实现它的正确方法。如果我错了，请纠正我。数据源第一次更改，但第二次不起作用。另外，我注意到当我使用一个数据源向下钻取然后将数据源更改为另一个数据源（不按后退按钮）时，它会出错并表现得很奇怪。

如有任何帮助，我们将不胜感激。如果您需要更多信息，请告诉我。提前致谢！

Answer 1

Highcharts for performance 修改原始数据数组，因此例如 return 来自函数的数据为每次更新创建数据的深层副本。

为防止向下钻取问题，请使用内部 drillUp 方法在更改数据之前返回到最高级别。

getDataSource1 = () => [ ... ];
getDataSource2 = () => [ ... ];

...

doDrillUp(){
    const chart = this.chart;
    if (chart) {
        const series = chart.series[0] as any;
        const mainRootNode = series.tree.children[0].id;

        while (series.rootNode !== mainRootNode) {
            series.drillUp();
        }
    }
}

changeData1() {
    this.doDrillUp();
    this.sunburstData = this.getDataSource1();
    this.loadChart(); 
}

changeData2() {
    this.doDrillUp();
    this.sunburstData = this.getDataSource2();
    this.loadChart();
}

现场演示： https://codesandbox.io/s/clever-fog-1x84b?file=/src/app/sunburst/sunburst.component.ts

Highcharts Angular - Sunburst 实施

Highcharts Angular - Sunburst implementation

highcharts

drilldown

sunburst-diagram

angular