flot绘制折线图
<!--請先確保你有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{width: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>
<!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{width: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>
?
轉載于:https://www.cnblogs.com/zhaoxiaojie/p/3685129.html
總結
- 上一篇： 斜率优化(CDQ分治，Splay平衡树)
- 下一篇： uva 10245 The Closes