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

我有一个列表，其中有一些类别，每一个单一的数据点（例如像这样 ）。 是否有可能改变每个类别栏的颜色？ 即所以每个酒吧会有自己独特的色彩，而不是所有的蓝色？

Answer 1

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

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

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

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

Answer 6

像antonversal所提到的那样，在创build图表对象时读取颜色和使用颜色选项。

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

Answer 7

只要添加这个…或者你可以根据你的需求改变颜色。

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

Answer 8

添加属性：

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

Answer 9

只是把图表

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

Answer 10

 {plotOptions: {bar: {colorByPoint: true}}}