4

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

假设我希望我的图表的所有系列都被red着色，我该如何去做而不需要每次都明确series.color设置red？

4

2 回答 2

5

您可以按照 Jeremy 提到的方式进行操作，方法是为每个图表设置颜色选项。或者您可以覆盖默认颜色数组，如下所示

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

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

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

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

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

PS上述方式不是覆盖默认选项的推荐方式，正确的方式是这样做setOptions()，但这会导致与现有默认值的合并，因此数组大小将大于1。

或者，您可以按如下方式覆盖 getColor 方法，以始终返回您选择的颜色。同样，您需要在调用图表的构造函数之前执行此操作

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

设置默认颜色@jsFiddle

于 2013-02-24T07:01:41.720 回答
1

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

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

这是 Highcharts 示例之一，添加了一组自定义颜色（使用 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]
            }]
        });
    });

});

希望这可以帮助！

于 2013-02-24T05:05:32.073 回答