7

我正在使用 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. 删除三个系列并添加两个系列

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

4

4 回答 4

16

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

于 2013-08-28T14:42:00.287 回答
1

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

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);
                        }
                    });
                }
}
于 2013-07-23T09:19:16.197 回答
1

使用颜色选项：

$('#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'
    });
于 2013-07-23T06:09:56.787 回答
0

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

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

然后每次您向该元素上的任何元素调用 addClass("Y") 时添加数据。

于 2013-07-23T06:20:51.320 回答