angular - 带有新选项的 Highcharts Angular 更新图表 - 包括链接系列

Question

请查看我使用官方highcharts-angular包装器编辑的演示。

最初，图表有一个带有type:arearange和的蓝色系列dataGrouping，以及一个红色的重叠系列。请注意，工具提示指的是红色系列的点。演示中的更多信息。

第一个按钮将添加另一对这样的系列。代码用于addSeries这样做。它有效。

第二个按钮应该做同样的事情，但通过更改图表选项而不是 addSeries。这没用。新系列出现，但所有红色系列和工具提示都消失了。愿望是使这种方法有效！

我研究了（很好的）highcharts-angular 演示和说明，但我无法让它在我的情况下工作。

标签： angularhighcharts

Answer 1

如果您想更新chartOptions，请不要使用任何 API 方法，例如update,addSeries或redraw.
相反，请关注在 state- 中声明的选项chartOptions。这基本上意味着您必须转换addAllDummySeries方法才能使用该方法。

请看下面的简单示例。我们对图表没有任何敬意，只是我们正在更改上面声明的选项，而不是由 Highcharts 生成的选项。通过改变状态，我们告诉 Angular 进行重绘。
演示： https ://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-hktwwr

在我看来，使用oneToOne设置为 true 的标志也不是一个好主意。请在下面的演示中查看差异。
演示： https ://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-w5pnwd