<!--请先确保你有jquery.js 和 jquery.flot.min.js-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #flot-placeholder{350px;height:300px;} </style> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://www.pureexample.com/js/flot/excanvas.min.js"></script><![endif]--> <script type="text/javascript" src="flot/jquery.js"></script> <script type="text/javascript" src="flot/jquery.flot.min.js"></script> <script type="text/javascript"> var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]]; var dataset = [{label: "line1",data: data}]; var options = {//设定选项让图表看起来更完整 series: { lines: { show: true }, points: { radius: 3, show: true } } }; $(document).ready(function () { $.plot($("#flot-placeholder"), dataset, options);//呼叫plot函式后把图表绘制出来
/*
$.plot(placeholder, data, options)
1. placeholder : 是一个DOM元素, Flot会把图表插到这个元素之中, 这个元素必须要有指定宽度和高度.
2. data : 数据数组组, 如上面所提过的数据.
3. options : 在选项里可以设定Flot提供的属性, 或是改变Flot的外观、决定绘制何种图形等.
*/
}); </script> </head> <body> <div id="flot-placeholder"></div>//指定一个定位点(Placeholder) </body> </html>
