jquery用jqplot插件画图例子

$.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]);

相关推荐