我有一个具有多个类别的柱状图,每个类别都有一个数据点(例如,像这样的数据点)。是否可以更改每个类别的条形颜色?也就是说,每个条都有自己独特的颜色,而不是全部是蓝色?
我有一个具有多个类别的柱状图,每个类别都有一个数据点(例如,像这样的数据点)。是否可以更改每个类别的条形颜色?也就是说,每个条都有自己独特的颜色,而不是全部是蓝色?
Answers:
如果将数据数组更改为配置对象而不是数字,则还可以分别为每个点/条设置颜色。
data: [
{y: 34.4, color: 'red'}, // this point is red
21.8, // default blue
{y: 20.1, color: '#aaff99'}, // this will be greenish
20] // default blue
添加您想要的颜色colors
,然后设置colorByPoint
为true
。
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
],
plotOptions: {
column: {
colorByPoint: true
}
}
参考:
是的,这是jsfiddle中的一个示例:http : //jsfiddle.net/bfQeJ/
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
该示例是一个饼图,但是您可以将所有颜色填充到系列中,以达到您的内心满足感=)
您可以在高级图表图形中添加颜色数组,以更改图形的颜色。您可以重新排列这些颜色,也可以指定自己的颜色。
$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
就像反汇编中提到的那样,创建图表对象时读取颜色并使用colors选项是可行的。
var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});
{plotOptions: {column: {colorByPoint: true}}}
魔术!