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


Answers:


111

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

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上的示例

在此处输入图片说明


5
正确答案应该来自@antonversal!自动{plotOptions: {column: {colorByPoint: true}}}魔术!
卡夏诺2015年

66

您还可以设置选项:

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

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


10
这应该是正确的答案。手动设置系列中每个条形的颜色是不切实际的。
哈里格2013年


14

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

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

该示例是一个饼图,但是您可以将所有颜色填充到系列中,以达到您的内心满足感=)


1
嘿,我尝试使用上面的代码,但我的整个图形更改为第一个colo#058DC7,而没有任何颜色变化。有什么方法可以将颜色变化设置为自动?
jamen 2011年

1
您至少可以在演示中使用柱形图。
Farzher 2012年

它行不通,因为所有数据点都在一个系列中,并且这些颜色用于系列​​着色...
philw '16

8

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

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

4

就像反汇编中提到的那样,创建图表对象时读取颜色并使用colors选项是可行的。

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

2

刚放图表

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

1

只需添加它...,或者您可以根据需要更改颜色。

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

    });


0

这对我有用。为系列设置所有颜色选项很繁琐,尤其是在动态的情况下

plotOptions: {
  column: {
   colorByPoint: true
  }
}

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.