Angular Highcharts-Sunburst实现

我正在尝试实现一个太阳暴流图，我有两个不同的数据源。 在下面的代码沙盒中，我有一个我想要实现的例子

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

---

任何形式的帮助都将不胜感激。如果你需要更多信息，一定要告诉我。提前谢谢

Highcharts for performance修改原始数据数组，例如，从函数返回数据，为每次更新创建数据的深度副本

要防止向下钻取问题，请在更改数据之前，使用内部

向上钻取方法返回到最高级别

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();
}


实时演示：
Highcharts for performance修改原始数据数组，例如，从函数返回数据，为每次更新创建数据的深度副本

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

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();
}


现场演示：
Codesandbox不工作。我无法切换数据源。你能检查一下并让我知道吗？嗨@Anand，是的，你是对的-while循环中的条件是错误的。请检查此项：很抱歉给您带来不便。数据源正在正确更改。。但钻取和重新加载不会在第一次单击时发生。我猜水平没有被重置。无论如何，谢谢你。我通过每次重新创建图表解决了这个问题。没错，您需要多次调用
doDrillUp（）
方法，具体取决于深入程度。Codesandbox不起作用。我无法切换数据源。你能检查一下并让我知道吗？嗨@Anand，是的，你是对的-while循环中的条件是错误的。请检查此项：很抱歉给您带来不便。数据源正在正确更改。。但钻取和重新加载不会在第一次单击时发生。我猜水平没有被重置。无论如何，谢谢你。我通过每次重新创建图表解决了这个问题。没错，您需要多次调用
doDrillUp（）
方法，具体取决于深入程度。