Question

我需要动态地为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);

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

Answer 1

以下是使用最新版Highcharts（目前为3.0）的另一种解决方案。

将colorByPoint选项设置为true并定义所需的color sequence。

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

以下是基于Highcharts example

的Column with rotated labels demo

Answer 2

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

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

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

Answer 3

尝试以下任一方法：

方法1：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-timeline">
  <ul>
    <li><span id="button1" class=" timeline-circle-active">1</span><a href="#" class="timeline-text-active">Button1</a></li>
    <li><span id="button2">2</span><a href="#">Button2</a></li>
    <li><span id="button3">3</span><a href="#">Button3</a></li>
    <li><span id="button4">4</span><a href="#">Button4</a></li>
  </ul>
</div>
<!--info-timeline-->

<button type="submit" class="button-clicked" data-target="button1">Button1</button>
<button type="submit" class="button-clicked" data-target="button2">Button2</button>
<button type="submit" class="button-clicked" data-target="button3">Button3</button>
<button type="submit" class="button-clicked" data-target="button4">Button4</button>

方法2：

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

Answer 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

的更多信息

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

4 个答案: