Question

我正在使用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中看到。

但我的问题是新系列的颜色与第一批产品完全不同。

我不能简单地替换数据，因为系列的数量可能会改变，所以我必须删除所有系列并添加新系列。

如何归档新系列的风格与被替换的系列相似？（在我的小提琴中，新系列应该有浅蓝色，深蓝色和一些第三种颜色。）

测试用例

我已经创建了一些测试用例来澄清我面临的问题。顶部图表是它应该如何看，底部图表是它的实际外观。我希望它们是一样的！

解决方案需要适用于所有这些情况！

Answer 1

我在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）

Answer 2

使用颜色选项：

$('#container').highcharts({
    colors: ['#2f7ed8', 
        '#0d233a', 
        '#8bbc21'],
    series: …

实例：http://jsfiddle.net/juuQs/3/

或者为每个系列使用静态颜色，如下所示：

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],
        color: '#2f7ed8'
    });

Answer 3

您可以使用我的自定义解决方案，在每次点击活动中重置颜色。

http://jsfiddle.net/sbochan/gJvde/1/

 function setColors(chart){
    var series = chart.series,
             colors = chart.options.colors,
             len = series.length-1;

                if(flag) {
                    $.each(series,function(i,serie){
                        if(i==len) {
                            flag != flag;
                            serie.update({
                                color: colors[i]
                            },true,true);
                        }
                        else {
                            serie.update({
                                color: colors[i]
                            },false);
                        }
                    });
                }
}

Answer 4

尝试使用 addClass（）方法。假设你的容器是一个具有id Y的元素X. 将样式信息放在 head 中，

<style>
      X.Y { /* any style info */};
</style>

然后每次向任何元素添加数据时，都会在该元素上调用addClass（“Y”）。

如何重置Highcharts中为系列提供的样式？

测试用例

4 个答案: