妳好!
為不同數據的柱狀圖賦值對應的顏色,只需要設置series->data中每個元素的color屬性即可。
//定義壹個顏色數組var?COLORS?=?['#4dc9f6','#f67019','#f53794','#537bc4','#acc236','#166a8f','#00a950','#58595b','#8549ba'];
//根據數值返回對應的顏色值
var?getColorByData?=?function(v)?{
return?v?<?80COLORS[0]
:?v?<?83COLORS[1] :?v?<?86COLORS[2] :?v?<?87COLORS[3] :?v?<?88COLORS[4] :?v?<?89COLORS[5] :?COLORS[6];}
//對圖表數據進行color屬性賦值,用於顯示
var?genData?=?function(data)?{
if(data?&&?data.length>0)?{
for(var?i=0;i<data.length;i++){
data[i].color?=?getColorByData(data[i].y);
}
}
return?data;
}
//圖表數據
var?_data?=?[
{name:?"下車體1#",
y:?88,
}, {name:?"下車體2#",
y:?89,
}, {name:?"下車體3#",
y:?82,
}, {name:?"下車體4#",
y:?85,
},];
Highcharts.chart('gongzhuangjiancha',?{
chart:?{type:?'column'
},? title:?{text:?''
}, xAxis:?{type:?'category'
}, yAxis:?{max:?100,
min:50,
title:?{
text:?null
}
}, legend:?{enabled:?false
}, plotOptions:?{series:?{
borderWidth:?0,
dataLabels:?{enabled:?true,
format:?'{point.y:.1f}%'
?}
}
}, tooltip:?{headerFormat:?'<span?style="font-size:11px"></span><br>',
pointFormat:?'<span?style="color:{green}">{point.name}</span>:?<b>符合率為{point.y:.2f}%</b><br/>'
}, series:?[ {?name:?"Browsers",
?colorByPoint:false?,
data:?genData(_data)}
],});
代碼比較簡單,看下註釋很好理解。
希望對妳有幫助!