用alert测试了一下没有经过document赋值改变背景颜色的元素是空输出。赋值过的输出为rgb(x,c,x)格式。但是用以上判断格式也不能真确判断出来
你好！
为不同数据的柱状图赋值对应的颜色，只需要设置series->data中每个元素的color属性即可。
//定义一个颜色数组var COLORS = ['#4dc9f6','#f67019','#f53794','#537bc4','#acc236','#166a8f','#00a950','#58595b','#8549ba']
//根据数值返回对应的颜色值
var getColorByData = function(v) {
return v < 80 ? COLORS[0]
: v < 83 ? COLORS[1]
: v < 86 ? COLORS[2]
: v < 87 ? COLORS[3]
: v < 88 ? COLORS[4]
: v < 89 ? COLORS[5]
: COLORS[6]
}
//对图表数据进行color属性赋值,用于显示
var genData = function(data) {
if(data && data.length>0) {
for(var i=0i<data.lengthi++){
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)
}
],
})
代码比较简单，看下注释很好理解。
希望对你有帮助！
