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:'Rotated Axis Text',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
min:'August 30, 2008',
tickInterval:'1 month',
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: '1st Qtr'
},
{
label: '2nd Qtr'
}],
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: '1st Qtr'
},
{
label: '2nd Qtr'
}],
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: '1st Qtr'
},
{
label: '2nd Qtr'
}],
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: '1st Qtr'
},
{
label: '2nd Qtr'
}],
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]);