如何更改 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 柱形图中更改类别轴上的日期格式

JSON中的Highcharts堆积柱形图没有绘制正确的值

Highcharts 带线条的堆叠柱形条

如何使用范围和导航器功能在 Highcharts 中创建柱形范围图?

在 x 轴和图例中显示 HighCharts 系列名称