Highcharts中更新series的5种方法

用Highcharts画图时，经常需要更新所画的图表，最常见的就是改变数据以更新图表。在Highcarts中，数据对应的参数是series。这儿就以图1的柱状图为例，列举如何更新series的5种方法，以供参考。源代码可从https://jsfiddle.net/slowlyswimming/6ad5pp3t/16/访问。

1. series.update 

Highcarts图表中，可以有多个series。当我们想更新其中某一个series时，可以直接调用其update方法。效果如图所示。  

 

 

 2. chart.update 

如果想一次性更新多个series，那么就可以直接使用chart.update。除了series，其他参数也可以同时进行更新。要注意的是，chart.update只允许更新原来的series，不允许新增series。比如在这个例子里，只能更新原来的一个或两个series，哪怕多加series，也不会起作用。效果如图所示。

 

3.chart.addSeries 

 如果想要新增series，就得使用chart.addSeries了。一次只能加一个series。注意这个方法有性能问题，当series的长度很长， 且一次性加好多series的时候，图表的反应会很慢。效果如图所示。

 

 

4. series.remove & chart.addSeries 

当我想完全替换原来的series，而不仅仅是在上面做更新和新增的时候，可以采用series.remove和chart.addSeries结合的方法。也就是说，要先去掉所有原来的series，再逐个加入新的。同样，这个方法有性能问题。效果如图所示。 

 

 

5. series.remove/chart.addSeries & chart.update 

第4种方法由于使用了chart.addSeries，导致性能上可能会出现问题。这儿就用一种替换的方法来实现同样的效果。关键就是要比较原来series的数目和新的series的数目，当两个数目不同时，通过series.remove或者chart.addSeries使其相等，再统一调用一次chart.update实现图表的更新。源代码如下。当新的series数目大于原来的时候，效果如图所示。