如何在高图列表中更改每个类别的颜色？

我有一个列表，其中有一些类别，每一个单一的数据点(例如 就像这个)。是否可以更改每个类别的条形图的颜色？也就是说每个条都有自己独特的颜色而不是全部都是蓝色？

129332 次浏览
小开

是的，这里有一个 jsfiddle 中的例子: http://jsfiddle.net/bfQeJ/

Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});

这个例子是一个饼图，但是您可以根据自己的喜好使用所有颜色来填充这个系列

小开
最佳答案

如果将数据数组更改为配置对象而不是数字，还可以为每个点/条单独设置颜色。

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

Jsfiddle 上的例子

enter image description here

小开

还可以设置选项:

  {plotOptions: {column: {colorByPoint: true}}}

更多信息请阅读 医生

小开

正如反向所提到的，在创建图表对象时读取颜色并使用颜色选项可以工作。

var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});
小开

添加您想要 colors的颜色，然后将 colorByPoint设置为 true。

colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
],


plotOptions: {
column: {
colorByPoint: true
}
}

小样

参考文献:

小开

可以在高图表图形中添加颜色数组来更改图形的颜色。您可以重新排列这些颜色，也可以指定自己的颜色。

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
小开 
{plotOptions: {bar: {colorByPoint: true}}}
小开

只要加上这个... 或者你可以根据你的要求改变颜色。

Highcharts.setOptions({
colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
plotOptions: {
column: {
colorByPoint: true
}
}


});
小开

添加属性:

 colors: ['Red', 'Bule', 'Yellow']
小开

把图表放上去

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
type: 'column'
}, .... Continue chart
小开

这对我来说很有用。为一个系列设置所有的颜色选项是很乏味的，特别是如果它是动态的

plotOptions: {
column: {
colorByPoint: true
}
}

提交答案