我如何重置Highcharts系列的风格？ [英] How can I reset the styles given to series in Highcharts?

问题描述

我使用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] 
}）; 
  

您可以在>这个小提琴。

但我的问题是，新系列与第一个系列颜色完全不同。

我无法简单地替换数据，因为系列数量可能会发生变化，所以我必须删除所有系列并添加新系列。

我怎样才能存档新系列的风格如同被替换的风格？ （在我的小提琴中，新系列的颜色应该是lightblue，darkblue和第三种颜色。）

测试用例

我创建了一些测试用例来阐明我面临的问题。最上面的图表是它应该看起来的样子，底部图表是它的外观。我希望他们一样！

1. 删除两个系列并添加两个系列


2. 删除两个系列并添加三个系列


3. 删除三个系列并添加两个系列

一个解决方案需要处理所有这些情况！

解决方案

我在GitHub的pull请求中找到了解决方案（ 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）

I am using Highcharts to render some graphs to my website. Sometimes, I need to remove all series from the chart and add some new series to the chart, because I requested some new data through ajax.

I am currently doing it this way:

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 you can see in this fiddle.

But my problem is that the new series get completely different colors from the first ones.

I can not simply replace the data, because the number of series is likely to change, so I have to remove all series and add the new ones.

How can I archive that the new series are styled like the replaced ones? (In my fiddle, the new series should have the colors lightblue, darkblue and some third color.)

Test cases

I have created some test cases to clarify the problem I am facing. The top chart is how it should look and the bottom chart is how it actually looks. I want them to be the same!

1. Remove two series and add two series
2. Remove two series and add three series
3. Remove three series and add two series

A solution would need to work with all these cases!

解决方案

I found the solution in a pull request on GitHub (https://github.com/highslide-software/highcharts.com/pull/203).

You just need to reset Highcharts color counter after deleting the series. There is also a counter for the symbols.

UPDATE: From version 4.0.3 and above the name of the counters has changed:

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]
});

Live example: http://jsfiddle.net/juuQs/18/

(Prior to version 4.0.3 you must use chart.counters.color = 0 and chart.counters.symbol = 0)

这篇关于我如何重置Highcharts系列的风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！