Question

我有一个显示多个图表的页面。我根据以下代码设置了用于所有图表的主题：

Highcharts.theme = {
    colors: ["#E37B25", "F5BF36", "#7C1C1D", "#458744", "#3E7FA3", "#0C9BD7", "#265667"],
    ...
}

Highcharts.setOptions(Highcharts.theme);

然后，我为每个图表提供了一系列特定选项，并在设定的时间间隔内创建图表。

var chart;
chart = new Highcharts.Chart(chartOptions);

问题在于，每次创建图表时，它都具有数组中的第一种颜色，而不是通过它们旋转。我认为setOptions()会为每个图表管理这个，但显然它没有。如何做到这一点所以每次使用new Highcharts.Chart(chartOptions)创建一个新图表时，它会选择数组中的下一个颜色？

Answer 1

正如@wegeld所评论的那样，数组中的colors作为列表选项提供，由图表的系列元素使用，而不是图表以连续方式使用

但如果这是要求，您可以创建colorIterator并执行以下操作。我在这里为您创建了一个codepen示例：https://codepen.io/mikhilraj/pen/KrjzxN/

var colorIterator = 0;

function getColor() {
    var color = Highcharts.getOptions().colors[colorIterator%Highcharts.getOptions().colors.length];
    colorIterator++;
    return color;
};

在创建图表时添加以下选项。

series: [{
    name: 'John',
    data: [0, 1, 4, 4, 5, 2, 3, 7],
    fillColor:  getColor()
}]

使用Highcharts.setOptions不会更改颜色

1 个答案: