Javascript 如何重置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]
});

这一点你可以从中看到

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

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

我如何存档新系列的样式与替换系列的样式相同？（在我的小提琴中，新系列应该有浅蓝色、深蓝色和一些第三色。）

测试用例 我创建了一些测试用例来澄清我所面临的问题。顶部的图表是它的外观，底部的图表是它的实际外观。我希望他们是一样的

---

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

使用颜色选项：

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

实例：

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

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

尝试使用addClass（）方法。 假设您的容器是id为Y的某个元素X。 将样式信息放入标题中，如下所示：

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

X.Y{/*任何样式信息*/}；

---

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

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

---

我在GitHub（）上的一个pull请求中找到了解决方案

删除系列后，只需重置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]
});

实例：

---

（在版本4.0.3之前，您必须使用chart.counters.color=0和chart.counters.symbol=0）

如果我只添加了两个系列，则这不起作用。查看当您只有2个系列时，仅设置两个值！那么，如果我一开始就有一个系列，然后删除这个系列，再添加两个呢？在这种情况下，我的颜色被切换！托比，我明白你的意思。您可以将颜色选项放在addSeries（）中。数据[…]，颜色：“#此处为颜色”highcharts的样式与css无关！看我提供的小提琴！这似乎有效，谢谢！是否有类似的方法来固定系列的点形状？是否还有点形状计数器？我认为此解决方案比当前标记为正确的问题更清晰。在上一版本中，字段已更改：chart.colorCounter=0；chart.symbolCounter=0；（我想提交编辑，但因“不正确”而被拒绝）

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