Question

如何在单个图表中为所有系列设置相同的颜色？我的图表中有大量的系列，为每个系列单独设置颜色可能不方便。

假设我希望我的图表的所有系列都有red色，如何在不需要每次都明确设置series.color到red的情况下执行此操作？< / p>

Answer 1

你可以通过Jeremy提到的方式，通过设置每个图表的颜色选项来实现。或者您可以按如下方式覆盖默认颜色数组

Highcharts.setOptions({
    colors:['red','green','blue']
});

这种方法的好处是你只需要在创建任何图表之前调用一次。此后的所有图表都将使用这些颜色，而无需在每个图表上设置此选项。大多数网站都有一个common.js或类似的javascript文件，通常在任何其他自定义脚本之前加载，您只需要将此代码添加到该文件中，然后忘记其后的颜色

<强>更新
由于您希望同一图表中的所有系列都是单一颜色，因此您可以完全覆盖颜色数组并使其只有一种颜色

Highcharts.getOptions().colors = ['red'];

此方法将导航器（Highstock底部的蓝色迷你图形）保留为默认的蓝色，这必须以与选项不同的方式覆盖。

P.S。上面的方法不是覆盖默认选项的推荐方法，正确的方法是setOptions()，但这会导致与现有默认值合并，因此数组大小将超过1。 < / p>

或者，您可以按如下方式覆盖getColor方法，以便始终返回您选择的颜色。在调用图表的构造函数

之前，您需要再次执行此操作

Highcharts.Series.prototype.getColor=function(){
    this.color= '#f00';
}

Setting default colors @ jsFiddle

Answer 2

您可以定义十六进制颜色数组，然后在图表声明中使用该数组。图表对象中的所有系列都将从这一系列颜色中拉出来。

如果您有多个图表声明，则可以使用相同的数组。

这是Highcharts示例中的一个，添加了一组自定义颜色（run with jsfiddle）：

$(function () {
    var myColors = [
        '#ff0000',
        '#ff6600',
        '#ffcc00'
    ];
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            colors: myColors,
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +'';
                }
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
                series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, 2, 3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5]
            }]
        });
    });

});

希望这有帮助！

对同一图表中的所有系列使用单色

2 个答案: