欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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.

HighCharts 为每个column指定不同的颜色


运行结果:

HighCharts 为每个column指定不同的颜色


相关标签: highcharts