我正在使用 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, 106.4, 135.6, 95.6, 54.4, 148.5, 144.0, 176.0, 29.9, 71.5, 216.4, 194.1]
});
chart.addSeries({
data: [106.4, 129.2, 135.6, 148.5, 144.0, 176.0, 29.9, 71.5, 194.1, 95.6, 54.4, 216.4]
});
这个你可以在this fiddle中看到.
但我的问题是新系列的颜色与第一个系列完全不同。
我不能简单地替换数据,因为系列的数量可能会发生变化,所以我必须删除所有系列并添加新系列。
我如何才能将新系列的风格与被替换的系列保持一致? (在我的 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, 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, 106.4, 135.6, 95.6, 54.4, 148.5, 144.0, 176.0, 29.9, 71.5, 216.4, 194.1]
});
chart.addSeries({
data: [106.4, 129.2, 135.6, 148.5, 144.0, 176.0, 29.9, 71.5, 194.1, 95.6, 54.4, 216.4]
});
实例:http://jsfiddle.net/juuQs/18/
(在版本 4.0.3 之前,您必须使用 chart.counters.color = 0 和 chart.counters.symbol = 0)
关于javascript - 如何重置 Highcharts 中系列的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17802509/