如何为单个图表中的所有系列设置相同的颜色?我的图表中有大量系列,单独设置每个系列的颜色可能很不方便。
假设我希望我的图表的所有系列都被red
着色,我该如何去做而不需要每次都明确series.color
设置red
?
如何为单个图表中的所有系列设置相同的颜色?我的图表中有大量系列,单独设置每个系列的颜色可能很不方便。
假设我希望我的图表的所有系列都被red
着色,我该如何去做而不需要每次都明确series.color
设置red
?
您可以按照 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';
}
您可以定义一个十六进制颜色数组,然后在图表声明中使用该数组。图表对象中的所有系列都将从这个颜色数组中提取。
如果您有多个图表声明,则可以使用相同的数组。
这是 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]
}]
});
});
});
希望这可以帮助!