Highcharts Angular-朝阳实施

问题描述

我正在尝试在一个有两个不同数据源的位置执行森伯斯特图。 在下面的codeandbox中，我有一个示例试图说明我要达到的目标。

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

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

任何帮助将不胜感激。如果需要更多信息，请告诉我。预先感谢！

解决方法

高性能图表会修改原始数据数组，例如，从函数返回数据以为每次更新创建数据的深层副本。

为防止向下钻取问题，请在更改数据之前使用内部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