推薦一個挺好用的jquery外掛,jquery.jqplot.js(畫圖),此處簡略得說一下折線圖的畫法
阿新 • • 發佈:2019-01-19
<!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"> <meta charset='utf-8'> <head> <title>折線圖</title> <!-- 引入css檔案 --> <link rel='stylesheet' type='text/css' href='css/jquery.jqplot.css'> <!-- 引入juqery和jquplot外掛,注意順序,一定要先引入jquery --> <script src='js/jquery.min.js'></script> <script src='js/jquery.jqplot.js'></script> </head> <body> <div id='chart1' style='height:500px;width:600px;margin:0 auto;'></div> <script > $(document).ready(function(){ change(); var t=setInterval(function(){ change(); },2000); // 隔兩秒重新整理一下資料 function change(){ $('#chart1').html(' '); // 定義一個隨機陣列 var rand=[]; // 定義陣列長度 var n=20; // 定義資料陣列 var record=[]; for(var i=0;i<n;i++){ // 生成0到100之間的隨機數 rand[i]=Math.random() * 100; }; for(var i=0;i<n;i++){ // 將隨機數存入陣列中,橫座標從零開始依次排列,縱座標為rand中的隨機數 record[i]=new Array(); record[i][0]=i; record[i][1]=rand[i]; } $.jqplot('chart1', [record], { title:'一週溫度折線圖', series:[{color:'#5FAB78'}] }); // title內為折線圖示題,color為顏色,我此處用的是二進位制的寫法,可用photoshop查詢相關顏色,然後修改為自己想要的顏色 } }); </script> </body>s </html>
因專案需要,需要寫一個折線圖。在網上找了下,發現了這個jqplot,發現挺好用的給大家推薦一下。用法挺簡單,不多說,直接給程式碼了