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

11 回答

• 1

  只是把图表

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

  回复于 2024-05-05T05:03:42+08:00
• 0

  这对我有用 . 为一系列设置所有颜色选项很繁琐，特别是如果它是动态的

  plotOptions: {
    column: {
     colorByPoint: true
    }
  }
  

  回复于 2024-05-05T05:03:42+08:00
• 95

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

  回复于 2024-05-05T05:03:42+08:00
• 0

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

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

  回复于 2024-05-05T05:03:42+08:00
• -2

  就像antonversal所提到的那样，在创建图表对象时读取颜色和使用颜色选项是有效的 .

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

  回复于 2024-05-05T05:03:42+08:00
• 4

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

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

  回复于 2024-05-05T05:03:42+08:00
• 0

  添加属性：

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

  回复于 2024-05-05T05:03:42+08:00
• 22

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

  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

  

  回复于 2024-05-05T05:03:42+08:00
• 12

  您还可以设置选项：

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

  欲了解更多信息，请阅读docs

  回复于 2024-05-05T05:03:42+08:00
• 6

  添加您想要的颜色 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

  回复于 2024-05-05T05:03:42+08:00
• 57

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

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

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

  回复于 2024-05-05T05:03:42+08:00