一、需求: 纵轴:系统1,系统2,系统3……
横轴:符合项数占适用项的比例(用进度条表示),定义80%以上满足绿色,50%以上黄色,50%以下红色.二、使用报表工具:jqplot
三、附上代码供大家交流
//组装颜色数组
function GetSeriesColor(){
var series='${series}'.split(",");
colorArr = new Array(series.length);
for (i = 0; i < series.length; i++){
if (series[i] < 50){
colorArr[i] = 'red';
}
else if(series[i] > 80 ){
colorArr[i] = 'green';
} else{
colorArr[i] = 'yellow';
}
}
return colorArr;
}
生成图表:
$(function() {
//组装水平柱状图数据
var sineRenderer = function() {
var series = '${series}'.split(",");
var xPointData=series.map(function(series){
return +series;
});
var yPointData = '${categories}'.split(",");
var data = [[]];
for (var i=0; i<xPointData.length; i++) {
data[0].push([xPointData[i], yPointData[i]]);
}
return data;
};
var colors=GetSeriesColor();
// 水平柱状图
var plot = $.jqplot('chart1', [], {
title: '按系统统计符合情况',
seriesColors: colors,
dataRenderer: sineRenderer,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// 显示单个柱状图的数据
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -15
},
//阴影角度
shadowAngle: 135,
// 设置柱状图的各项属性,例如:barDirection: 'horizontal'水平方向
rendererOptions: {
barDirection: 'horizontal',
barWidth:20,
barMargin: 5
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
以上是项目实现……