如何更改 highcharts 柱形图中每个类别的颜色?
Posted
技术标签:
【中文标题】如何更改 highcharts 柱形图中每个类别的颜色?【英文标题】:How do you change the colour of each category within a highcharts column chart? 【发布时间】:2011-11-16 21:01:12 【问题描述】:我有一个包含多个类别的柱形图,每个类别都有一个数据点(例如like this one)。是否可以更改每个类别的条形颜色?也就是说,每个条形图都有自己独特的颜色,而不是全部为蓝色?
【问题讨论】:
【参考方案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
Example on jsfiddle
【讨论】:
正确答案应该来自@antonversal!自动plotOptions: column: colorByPoint: true
魔术!【参考方案2】:
你也可以设置选项:
plotOptions: column: colorByPoint: true
更多信息请阅读docs
【讨论】:
这应该是正确的答案。手动设置系列中每个条的颜色是不切实际的。【参考方案3】:将您想要的颜色添加到colors
,然后将colorByPoint
设置为true
。
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
],
plotOptions:
column:
colorByPoint: true
demo
参考:
http://api.highcharts.com/highstock#colors http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint【讨论】:
【参考方案4】:是的,这是 jsfiddle 中的一个示例:http://jsfiddle.net/bfQeJ/
Highcharts.setOptions(
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
);
这个例子是一个饼图,但是你可以用所有的颜色来填充这个系列,让你心满意足=)
【讨论】:
嘿,我尝试使用上面的代码,但我的整个图表更改为第一个 colo #058DC7 而没有任何颜色变化。有没有办法将颜色变化设置为自动? 您至少可以在演示中使用柱形图。 它不会工作,因为所有数据点都在一个系列中,而这些颜色用于系列着色......【参考方案5】:您可以在高位图表中添加颜色数组以更改图表的颜色。您可以重新排列这些颜色,也可以指定自己的颜色。
$('#container').highcharts(
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart:
type: 'column'
,
title:
text: 'Stacked column chart'
,
【讨论】:
【参考方案6】:正如 antonversal 所提到的,在创建图表对象时读取颜色并使用颜色选项是可行的。
var chart3 = new Highcharts.Chart(colors: ['#458006', '#B0D18C']);
【讨论】:
【参考方案7】:只放图表
$('#container').highcharts(
colors: ['#31BFA2'], // change color here
chart:
type: 'column'
, .... Continue chart
【讨论】:
【参考方案8】:只需添加这个...或者您可以根据需要更改颜色。
Highcharts.setOptions(
colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
plotOptions:
column:
colorByPoint: true
);
【讨论】:
【参考方案9】:添加属性:
colors: ['Red', 'Bule', 'Yellow']
【讨论】:
【参考方案10】:这对我有用。为一个系列设置所有颜色选项很乏味,特别是如果它是动态的
plotOptions:
column:
colorByPoint: true
【讨论】:
【参考方案11】:plotOptions: bar: colorByPoint: true
【讨论】:
以上是关于如何更改 highcharts 柱形图中每个类别的颜色?的主要内容,如果未能解决你的问题,请参考以下文章
R Package Highcharter:如何深入查看多个系列堆叠柱形图?
在我的 PowerPivot 柱形图中更改类别轴上的日期格式