Highcharts条形图与酒吧根据价值着色 [英] Highcharts bar chart with bar colored based on value

问题描述

我正在寻找一种方法来创建条形图，其中条形图根据它们的值（长度）将颜色从浅到深更改为黑色，如下例所示：

< a href =https://i.stack.imgur.com/IBSi7.jpg =nofollow noreferrer>

解决方案

颜色可以按每个点设置，因此您可以计算点的颜色并在图表选项中设置为 data 。

  $（function （）{
 var data = [1，2，3，4，5，6，7，8，9]; 
 Highcharts.each（数据，函数（point，i）{
 data [i] = [point，'#f'+ point +'0']; 
}）; 
 $（'＃container'）。highcharts（{
 series：[ {
 type：'bar'，
 data：data，
 keys：['y'，'color'] 
}] 
}）; 
}）; 
  

JSFiddle： http://jsfiddle.net/w8c8fxju/

I am looking for a way to create a bar chart where bars change color from light to dark depending on their value (length) as in following example:

解决方案

Color can be set per point, so you could calculate what color a point should have and set it through data in chart's options.

$(function() {
  var data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  Highcharts.each(data, function(point, i) {
    data[i] = [point, '#f' + point + '0'];
  });
  $('#container').highcharts({
    series: [{
      type: 'bar',
      data: data,
      keys: ['y', 'color']
    }]
  });
});

JSFiddle: http://jsfiddle.net/w8c8fxju/

这篇关于Highcharts条形图与酒吧根据价值着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！