JavaScript：使用jQuery插件jqplot绘图
很简单的引用几个js文件，然后就可以画出很漂亮的图形了。http://www.jqplot.com/
<! DOCTYPE HTML PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html >
< head >
< meta http - equiv = " Content-type " content = " text/html; charset=utf-8 " >
< title > Title </ title >
< link rel = " stylesheet " type = " text/css " href = " ../jquery.jqplot.css " />
< link rel = " stylesheet " type = " text/css " href = " examples.css " />
<!-- [ if IE] >< script language = " javascript " type = " text/javascript " src = " ../excanvas.js " ></ script ><! [endif] -->
<!-- BEGIN: load jquery -->
< script language = " javascript " type = " text/javascript " src = " ../jquery-1.4.2.min.js " ></ script >
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
< script language = " javascript " type = " text/javascript " src = " ../jquery.jqplot.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.logAxisRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.canvasTextRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.canvasAxisLabelRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.canvasAxisTickRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.dateAxisRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.categoryAxisRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.barRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.pieRenderer.js " ></ script >
< script language = " javascript " type = " text/javascript " src = " ../plugins/jqplot.pointLabels.js " ></ script >
< style type = " text/css " >
.jqplot - point - label {white - space: nowrap;}
/*
.jqplot-yaxis-label {font-size: 14pt;}
.jqplot-yaxis-tick {font-size: 7pt;}
*/
.jqplot { margin: 20px;}
</ style >
< script type = " text/javascript " >
$( function () {
line2 = [
[' 1 / 1 / 2008 ', 42 ],
[' 2 / 14 / 2008 ', 56 ],
[' 3 / 7 / 2008 ', 39 ],
[' 4 / 22 / 2008 ', 86 ],
[' 5 / 2 / 2008 ', 86 ],
[' 6 / 12 / 2008 ', 45 ],
[' 7 / 18 / 2008 ', 1 ],
[' 8 / 22 / 2008 ', 49 ],
[' 9 / 22 / 2008 ', 57 ],
[' 10 / 10 / 2008 ', 86 ],
];
plot2 = $.jqplot('chart2', [line2], {
axes: {
xaxis: {
autoscale: true ,
renderer: $.jqplot.DateAxisRenderer,
label: 'Incliment Occurrance',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
// labelPosition: 'middle',
angle: 15
}
},
yaxis: {
label: 'Incliment Factor',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
// pie
s1 = [['a', 2 ], ['b', 1 ], ['c', 3 ], ['d', 3 ]];
plot1 = $.jqplot('chart1', [s1], {
captureRightClick: true ,
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
shadow: true ,
rendererOptions:{
startAngle: 0 ,
sliceMargin: 2 ,
highlightMouseDown: true
}
},
legend: {
show: true ,
// location: 'e',
// placement: 'outside'
}
});
});
</ script >
</ head >
< body >
< div id = " chart1 " style = " margin-top:20px; margin-left:20px; width:300px; height:300px; " ></ div >
< div class = " jqplot " id = " chart2 " ></ div >
</ body >
</ html >