具有新选项的Highcharts Angular更新图表-包括链接的系列 [英] Highcharts Angular update chart with new options - including linked series

问题描述

请参阅 highcharts-angular 包装器.

Please see my edited demo that uses the official highcharts-angular wrapper.

图表最初具有带type:arearange和dataGrouping的蓝色序列，以及红色的过度绘制序列.请注意，工具提示指的是红色系列的要点.演示中的更多信息.

Initially the chart has a blue series with type:arearange and dataGrouping, as well as a red overplotted series. Note the tooltips refer to the points of the red series. More info in the demo.

第一个按钮将添加另一个这样的系列.该代码使用addSeries来执行此操作. 有效 .

The first button will add another such pair of series. The code uses addSeries to do so. It works.

第二个按钮应该执行相同的操作，但要更改图表选项而不是addSeries.这没用.出现了新系列，但是所有红色系列和工具提示都消失了. 渴望使这种方法有效！

The second button should do the same, but by changing the chart options instead of addSeries. It does not work. The new series appears, but all the red series and tooltips disappear. The desire is to make this method work!

我研究了(好的) highcharts-angular演示和说明 ，但我无法使其正常工作.

I have studied the (nice) highcharts-angular demos and instructions, but I cannot make it work in my case.

推荐答案

如果要更新chartOptions，请不要使用任何update，addSeries或redraw之类的API方法. br> 相反，应将重点放在状态chartOptions中声明的选项上. 这基本上意味着您必须转换addAllDummySeries方法才能使用该方法.

If you would like to update the chartOptions, please don't use any API methods like update, addSeries or redraw.
Instead, focus on the options which are declared in the state- chartOptions. This basically means that you have to convert the addAllDummySeries method in order to use that approach.

请在下面看一个简单的例子.我们不使用任何图表，仅更改上面声明的选项，而不是Highcharts生成的选项.通过更改状态，我们告诉Angular重绘.
演示: https://stackblitz .com/edit/highcharts-angular-optimal-way-to-update-hktwwr

Please look a the simple example below. We are not using any reverence to the chart, only we are changing the options declared above, not that one generated by Highcharts. By changing the state we are telling Angular to make a redraw.
Demo: https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-hktwwr

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

Also in my opinion using the oneToOne flag set to true is not a good idea. Please see the difference in the demo below.
Demo: https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-w5pnwd

这篇关于具有新选项的Highcharts Angular更新图表-包括链接的系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！