如何更改highcharts柱形图中每个类别的颜色？

Question

我有一个柱形图,它有许多类别,每个类别都有一个数据点(例如像这一个).是否可以更改每个类别的栏的颜色？即所以每个酒吧都有自己独特的颜色,而不是所有的蓝色？

Answer 1

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

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的例子

Answer 2

你也可以设置选项:

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

有关更多信息,请阅读文档

Answer 3

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

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

plotOptions: {
    column: {
        colorByPoint: true
    }
}

演示

参考:

• http://api.highcharts.com/highstock#colors
• http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint

Answer 4

是的,这是jsfiddle的一个例子:http://jsfiddle.net/bfQeJ/

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

这个例子是一个饼图,但你可以用你心中的所有颜色填充系列内容=)

Answer 5

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

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