jquery用jqplot插件画图例子
xiuping0 2013-01-29
$.jqplot.config.enablePlugins=true;
l1=[2,3,1,4,3];
l2=[1,4,3,2,5];
line1=[['2008-09-30',4],['2008-10-30',6.5],['2008-11-30',5.7],['2008-12-30',9],['2009-01-30',8.2]];
line2=[['2008-09-30',3],['2008-10-30',5.5],['2008-11-30',5.7],['2008-12-30',10],['2009-01-30',9.2]];
plot2=$.jqplot('chart2',[line1,line2],{
title:'RotatedAxisText',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
min:'August30,2008',
tickInterval:'1month',
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:'%b%#d,%Y',fontSize:'10pt',fontFamily:'Tahoma',angle:-40,fontWeight:'normal',fontStretch:1}
}
},
series:[{lineWidth:4,markerOptions:{style:'square'}}]
});
line1=[[4,1],[4,2],[3,3],[16,4]];
line2=[[3,1],[7,2],[4,3],[3.125,4]];
plot3=$.jqplot('chart3',[line1,line2],{
//stackSeries:true,
legend:{
show:true,
location:'se'
},
title:'条形图',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barDirection:'horizontal',
barPadding:6,
barMargin:10
}
},
series:[{
label:'1stQtr'
},
{
label:'2ndQtr'
}],
axes:{
yaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
ticks:['Q1','Q2','Q3','Q4']
},
xaxis:{min:0,max:20,numberTicks:5}
}
});
line1=[[4,1],[4,2],[3,3],[16,4]];
line2=[[3,1],[7,2],[4,3],[3.125,4]];
plot3=$.jqplot('chart3d',[line1,line2],{
stackSeries:true,
legend:{
show:true,
location:'se'
},
title:'条形图',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barDirection:'horizontal',
barPadding:6,
barMargin:40
}
},
series:[{
label:'1stQtr'
},
{
label:'2ndQtr'
}],
axes:{
yaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
ticks:['Q1','Q2','Q3','Q4']
},
xaxis:{min:0,max:20,numberTicks:5}
}
});
line1=[4,2,9,16];
line2=[3,7,6.25,3.125];
plot3b=$.jqplot('chart3b',[line1,line2],{
stackSeries:true,
legend:{
show:true,
location:'nw'
},
title:'柱状图1',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barPadding:6,
barMargin:40
}
},
series:[{
label:'1stQtr'
},
{
label:'2ndQtr'
}],
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
ticks:['Q1','Q2','Q3','Q4']
},
yaxis:{min:0,max:20,numberTicks:5}
}
});
line1=[4,2,9,16];
line2=[3,7,6.25,3.125];
plot3c=$.jqplot('chart3c',[line1,line2],{
legend:{
show:true,
location:'nw'
},
title:'柱状图2',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barPadding:6,
barMargin:20
}
},
series:[{
label:'1stQtr'
},
{
label:'2ndQtr'
}],
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
ticks:['Q1','Q2','Q3','Q4']
},
yaxis:{min:0,max:20,numberTicks:5}
}
});
//
line1=[['item1',3],['item2',7],['item3',2.5],['item4',6],['item5',5],['item6',4]];
line2=[3,7,2.5,6,5,4];
plot4=$.jqplot('chart4',[line1],{
title:'饼图1',
seriesDefaults:{renderer:$.jqplot.PieRenderer},
legend:{show:true}
});
line1=[['item1',3],['item2',7],['item3',2.5],['item4',6],['item5',5],['item6',4]];
line2=[3,7,2.5,6,5,4];
plot4=$.jqplot('chart4b',[line1],{
title:'饼图2',
seriesDefaults:{renderer:$.jqplot.PieRenderer,rendererOptions:{sliceMargin:4}},
legend:{show:true}
});
l1=[2.2,3,.6,4.8,3];
l2=[1,4,3,2,5.7];
l3=[1,5,6,7,5.7];
plot5=$.jqplot('chart5',[l1,l2,l3]);
