function drawChart( msg){
document.getElementById( "data").style.display = "inline" ;
$( "#chart1").empty();
var line1 = new Array();//查询的实际数据
var line2 = new Array();//同一时间段上个星期的数据
var data1 = new Array();//line1中的数据 用来查找最大值
var data2 = new Array();//line2中的数据 用来查找最大值
$.each(msg.businessDataList, function (key, val) {
var count=msg.businessDataList[key].count;
var subTypeName=msg.businessDataList[key].subTypeName;
line1.push([subTypeName,count]);
data1.push(count);
});
$.each(msg.businessDataListOld, function (key, val) {
var count=msg.businessDataListOld[key].count;
var subTypeName=msg.businessDataListOld[key].subTypeName;
line2.push([subTypeName,count]);
data2.push(count);
});
var tricks1=getTickIntervalTmp(data1);
var tricks2=getTickIntervalTmp(data2);
if(tricks1>tricks2)
tricks=tricks1;
else tricks=tricks2;
var data=new Array();
var colors=new Array();
var label=new Array();
if(line1.length!=0){
line1.push([ "",0]);
data.push(line1);
colors.push( "#4bb2c5");
label.push({label: '当前查询'});
}
if(line2.length!=0){
line2.push([ "",0]);
data.push(line2);
colors.push( "#EAA228");
label.push({label: '上周同期'});
}
plot1 = $.jqplot( 'chart1', data, {
legend: {show: true, location: 'ne' }, //提示工具栏--show:是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南)
series: label, //提示工具栏
seriesColors:colors,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 20 // 设置柱状图中每个柱状条的宽度
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
},
yaxis: { //准确控制y轴最大值及最小值,间隔个数
tickInterval: tricks, //网格线间隔大小
min: 0,
numberTicks:6, //网格线条数
}
},
//高亮
highlighter: {
show: true,
tooltipAxes: 'y',
tooltipLocation : 'ne',
useAxesFormatters: false,
tooltipFormatString: '<font size="3" color="red">数量:%.0f次</font> '
}
});
}
jqplot画柱状图
最新推荐文章于 2017-08-02 17:47:02 发布