我正在使用Highcharts为我的网站渲染一些图表.有时,我需要从图表中删除所有系列并向图表添加一些新系列,因为我通过ajax请求了一些新数据.
我目前正在这样做:
var chart = $('#container').highcharts(); while(chart.series.length) { chart.series[0].remove(); } chart.addSeries({ data: [144.0,176.0,29.9,71.5,106.4,129.2,135.6,148.5,216.4,194.1,95.6,54.4] }); chart.addSeries({ data: [129.2,54.4,144.0,194.1] }); chart.addSeries({ data: [106.4,216.4] });
这可以在this fiddle中看到.
但我的问题是,新系列与第一批系列的颜色完全不同.
我不能简单地替换数据,因为系列的数量可能会改变,所以我必须删除所有系列并添加新系列.
如何归档新系列的样式与替换的系列相似? (在我的小提琴中,新系列应该有浅蓝色,深蓝色和一些第三种颜色.)
测试用例
我创建了一些测试用例来澄清我面临的问题.顶部图表是它应该如何看,底部图表是它的实际外观.我希望他们是一样的!
> Remove two series and add two series
> Remove two series and add three series
> Remove three series and add two series
解决方案需要适用于所有这些情况!
解决方法
我在GitHub(
https://github.com/highslide-software/highcharts.com/pull/203)的拉取请求中找到了解决方案.
您只需在删除系列后重置Highcharts颜色计数器.
还有一个符号计数器.
更新:从4.0.3及更高版本开始,计数器的名称已更改:
var chart = $('#container').highcharts(); while(chart.series.length) { chart.series[0].remove(); } chart.colorCounter = 0; chart.symbolCounter = 0; chart.addSeries({ data: [144.0,216.4] });
实例:http://jsfiddle.net/juuQs/18/
(在4.0.3版之前,您必须使用chart.counters.color = 0和chart.counters.symbol = 0)