根据该值更改条形图的颜色

  • 本文关键字:条形图 颜色 highcharts
  • 更新时间 :
  • 英文 :


我想问在这个jsfiddle中有一个条形图,它的颜色根据值而变化,但是如果条形图已经用光标/指针高亮显示,那么颜色再次改变为初始颜色,您如何根据值保持颜色?

指向jsfiddle的链接:http://jsfiddle.net/upz5q2fd/7/

$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
color: 'yellow',
data: [107, 31, 635, 203, 2]
}]
},function(chart){

var max = 200;

$.each(chart.series[0].data,function(i,data){

if(data.y > max)
data.graphic.attr({
fill:'red'
});

});

});
});

不是通过属性来改变颜色,而是在数据的点级别上定义颜色,例如:

var data = [107, 31, 635, 203, 2];
var processedData = data.map(function(dataEl, index){
return {x: index, y : dataEl, color: dataEl > 200 ? 'red' : 'yellow'}
});
$('#container').highcharts({
...,
series: [{
...,
data: processedData
}]
});

现场演示:http://jsfiddle.net/BlackLabel/L7wgcmd1/

API参考:https://api.highcharts.com/highcharts/series.bar.data.color

最新更新