为highcharts中的每一列设置不同的颜色

Posted 2023-02-16

【中文标题】为highcharts中的每一列设置不同的颜色

【英文标题】：set different colors for each column in highcharts

【发布时间】：2011-12-05 22:46:34

【问题描述】：

我需要为 Highcharts 图表中的每一列动态设置不同的颜色。我的 Highcharts 图表是：

options = 
         chart: 
             renderTo: 'chart',
             type: 'column',
             width: 450
         ,
         title: 
             text: 'A glance overview at your contest’s status'
         ,
         xAxis: 
             categories: ['Approved Photos', 'Pending Approval Photos', 
                          'Votes', 'Entrants'],
             labels: 
                 //rotation: -45,
                 style: 
                     font: 'normal 9px Verdana, sans-serif, arial'
                 
             
         ,
         yAxis: 
             allowDecimals: false,
             min: 0,
             title: 
                 text: 'Amount'
             
         ,
         legend: 
             enabled: false
         ,
         series: []
     ;
     series = 
         name: "Amount",
         data: [],
         dataLabels: 
             enabled: true,
             color: '#000000',
             align: 'right',
             x: -10,
             y: 20,
             formatter: function () 
                 return this.y;
             ,
             style: 
                 font: 'normal 13px Verdana, sans-serif'
             
     
 ;

数据是这样设置的：

for (var i in Data) 
  if (parseInt(Data[i]) != 0) 
    series.data.push(parseInt(Data[i]));
   else 
    series.data.push(null);
  

options.series.push(series);
chart = new Highcharts.Chart(options);

如何为这个循环中的每个数据点动态设置不同的颜色？

【参考方案1】：

这是最新版本的 Highcharts（当前为 3.0）的另一个解决方案。

将colorByPoint 选项设置为true 并定义您想要的color sequence。

options = 
    chart: ...,
    plotOptions: 
        column: 
            colorByPoint: true
        
    ,
    colors: [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ]

这是一个基于 Highcharts Column with rotated labels demo 的example

【讨论】：

请注意，此解决方案适用于条形图和柱形图。只需将 plotOptions 数组中的 'column' 更改为 'bar'

正是我需要的，并且比公认的答案更容易实现。谢谢！

有什么方法可以为多个系列做这样的事情吗？不是全球的？我有一个折线图和列，但我希望我的线条颜色不同于我为列系列设置的颜色。在柱形图中，某些列也需要有不同的颜色。

【参考方案2】：

当您将值添加到 series.data 时，您还可以使用点选项设置颜色，例如

series.data.push( y: parseInt(Data[i]), color: '#FF0000' );

有关积分选项的更多详细信息，请参阅https://api.highcharts.com/class-reference/Highcharts.Point#color

【讨论】：

嗨！又是我...我如何按数据设置列宽。例如：如果数据是 23，我想设置列宽 100px，如果数据是 123，它将是 110px。我需要这个选项来将数据放在列的中间。

抱歉，我不确定你在 highcharts 中是如何做到这一点的。

你可以通过plotOptions->series->linewidth来设置宽度。但是，这将固定图表中所有条形的宽度。可能您可以使用最大值设置它。 highcharts.com/ref/#plotOptions-series--lineWidth

该文档链接已损坏

感谢您的回答！

【参考方案3】：

尝试以下任一方法：

方法一：

Highcharts.setOptions( colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] );

方法二：

var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];

 $('#bar_chart').highcharts(
        chart: 
            type: 'column'              
        ,
        title: 
            text: ''
        ,
        subtitle: 
            text: ''
        ,
        xAxis: 
            type: 'category'
        ,
        yAxis: 
            title: 
                text: ''
            
        ,
        legend: 
            enabled: false
        ,
        plotOptions: 
            series: 
                borderWidth: 0,
                dataLabels: 
                    enabled: false                       
                
            
        ,         

        series: [
            name: '',
            colorByPoint: true,
            data: [
                name: 'Blue',
                y: 5.78,
                color: colors[0]

            , 
                name: 'Green',
                y: 5.19,
                color: colors[1]

            , 
                name: 'Pink',
                y: 32.11,
                color: colors[2]

            , 
                name: 'Yellow',
                y: 10.04,
                color: colors[3]

            , 
                name: 'Purple',
                y: 19.33,
                color: colors[4]

            ]
        ]
    );

【讨论】：

有没有办法将颜色设置为不同颜色的数组？例如，我要从数据中返回我想要的颜色，所以我想使用它而不是手动设置它，并且某些列具有某些颜色。

【参考方案4】：

我有来自 API 响应和 2 系列的颜色。第二个系列的动态色彩。

以下是在系列映射时设置动态颜色的示例。

const response = [
    'id': 1,
    'name': 'Mango',
    'color': '#83d8b6',
    'stock': 12.0,
    'demand': 28,
  ,
  
    id ': 2,
    'name': 'Banana',
    'color': '#d7e900',
    'stock': 12.0,
    'demand': 28,
  
];
let chartData: 
  categories: [],
  series: []
;
chartData.categories = response.map(x => x.name);
chartData.series.push(
  name: 'Series 1',
  type: 'column',
  data: response.map(x => x.demand)
);
chartData.series.push(
  name: 'Series 2',
  type: 'column',
  data: response.map(x => (
    y: x.stock,
    color: x.color // set color here dynamically
  ))
);
console.log('chartData: ', chartData);

您还可以阅读有关Highcharts series Point and Marker的更多信息