如何重置Highcharts中系列的样式

How can I reset the styles given to series in Highcharts?

本文关键字：样式 系列 何重置 Highcharts      更新时间：2023-09-26

我正在使用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]
});

你可以在这把小提琴上看到这一点。

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

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

如何存档新系列的样式与替换的系列相似？（在我看来，新系列应该有浅蓝色、深蓝色和第三种颜色。）

测试用例

我创建了一些测试用例来澄清我所面临的问题。上图是它应该看起来的样子，下图是它实际看起来的样子。我希望他们是一样的！

  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）

使用颜色选项：

$('#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'
    });

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

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

尝试使用addClass（）方法。假设您的容器是id为Y的某个元素X。将样式信息放入头中，作为

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

那么每次向任何元素添加数据时，都会对该元素调用addClass（"Y"）。

相关文章：