HighCharts 为每个column指定不同的颜色
程序员文章站
2022-06-09 23:29:21
...
要求: 根据passrate, >=95%的显示绿色, >=90%的显示黄色, <90%的显示红色.
先构造渲染函数:
function redrawPassRateTd(pvData,pvTd){
var lvChart=$("<div style='height:150px'></div>");
pvTd.append(lvChart);
lvChart.highcharts({
chart: {
type: 'column',
width:"200",
},
title: {
text:""
},
credits:{enabled:false},
exporting:{enabled:false},
xAxis: {
type: 'category',
labels: {
rotation: 270,
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
max:100,
visible:false,
title: {
text: ""
}
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
//borderWidth: 2,
dataLabels : {
enabled : true,
inside:true,
rotation: 270,
formatter: function() {
return /*this.series.name+"<br/>"+*/this.y + '%';
},
style : {
'fontSize' : '13px',
'color':'white'
}
}
}
},
series: pvData
});
}
组织数据并调用:
Object.keys(rec).forEach(function(mn){
if (mn=="SERIES") return;
//lvTdData.push(mn+":"+rec[mn]);
/*var lvItem={};
lvItem[mn]={color:'#ffff',y:rec[mn]==null?null: Math.round(rec[mn]*1000)/10};
lvTdData.push(lvItem);*/
//lvTdData.push([mn,rec[mn]==null?null: Math.round(rec[mn]*1000)/10]);
var lvVal=rec[mn]==null?null: Math.round(rec[mn]*1000)/10;
lvTdData.push({
name:mn,
y: lvVal,
color: lvVal >= 95 ?'#06AD50':(lvVal>=90?'#EFB145':'#DD4F26') // 根据值判断给定颜色
})
});
var lvTd=$("<td></td>");
redrawPassRateTd([{name:"FPY+",data:lvTdData}],lvTd);
lvTr.append(lvTd);
在redrawPassRateTd函数入口打断点,查看pvData的数据结构是下面这样的,只有一个名为"FPY+"的serie, 其下有7个item,每个item均有name/y和color.
运行结果:
下一篇: EventBus 原理简析