首頁 web前端 js教程 jQuery實作折線圖的方法_jquery

jQuery實作折線圖的方法_jquery

May 16, 2016 pm 04:11 PM
jquery 折線圖 方法

本文實例講述了jQuery實作折線圖的方法。分享給大家供大家參考。具體如下:

效果圖如下:

js引用:

複製程式碼 程式碼如下:
 
 

   

定時刷新:

複製程式碼 程式碼如下:
//曲線圖 
ar chart; 
 $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
         chart: { 
             renderTo: 'divChart',          //放置圖表的容器 
             plotBackgroundColor: null, 
             plotBorderWidth: null, 
             defaultSeriesType: 'line' 
         }, 
         title: { 
             text: '24小時負載曲線' 
         }, 
         subtitle: { 
             text: '' 
         }, 
         xAxis: {//X軸資料 
categories: ['00','01', '02','03', '04','05', '06','07', '08','09', '10','11' , '12','13', '14','15', '16','17', '18','19', '20','21', '22','23'],
 
             labels: { 
                 rotation: -45, //字型傾斜 
                 align: 'right', 
                 style: { font: 'normal 12px 宋體' } 
             } 
         }, 
         yAxis: {//Y軸顯示文字 
             title: { 
                 text: 'MW' 
             } 
         }, 
         tooltip: { 
             enabled: true, 
             formatter: function() { 
                 return '' this.x '
' this.series.name ': ' Highcharts.numberFormat(this.y, 1); 
             } 
         }, 
         plotOptions: { 
             line: { 
                dataLabels: { 
                     enabled: true 
                 }, 
                 enableMouseTracking: true//是否顯示title 
             } 
         }, 
         series: [{ 
             name: '1號機組', 
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 
         },{ 
             name: '2號機組', 
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ] 
         }] 
         }); 
         函數 getForm(){  
             $.ajax({ 
                 type: "POST",     // 使用post方式      
                 url: "WebServiceFH.asmx/GetLoadEveryHourByOne",        
                 contentType:“application/json”,
                 資料:{},
                 資料型態:「json」,
                 成功:函數(資料){   
var data = [資料[“載入0”],資料[“載入1”],資料[“載入2”],資料[“載入3”],資料[“載入4”],資料[“載入5” ],資料[“載入6” "],資料["Load7"],資料["Load8"],資料["Load9"],資料["Load10"],資料["Load11"],資料["Load12 "],資料["Load13" ],資料["載入14"],資料["載入15"],資料["載入16"],資料["載入17"],資料["載入18"],資料["載入19"],資料["載入20"] ,資料["載入21"],資料["載入22"],資料["載入23"]];  
                     圖表.系列[0].setData(資料);  
                 }, 
                 錯誤:函數(錯誤){  
                     alert("讀取資料錯誤!"); 
                 } 
             });   
             $.ajax({ 
                 type: "POST",     // 使用post方式      
                 url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",        
                 contentType:“application/json”,  
                 資料型態:「json」,
                 成功:函數(資料){   
var data = [資料[“載入0”],資料[“載入1”],資料[“載入2”],資料[“載入3”],資料[“載入4”],資料[“載入5” ],資料[“載入6” "],資料["Load7"],資料["Load8"],資料["Load9"],資料["Load10"],資料["Load11"],資料["Load12 "],資料["Load13" ],資料["載入14"],資料["載入15"],資料["載入16"],資料["載入17"],資料["載入18"],資料["載入19"],資料["載入20"] ,資料["載入21"],資料["載入22"],資料["載入23"]];  
                     圖表.系列[1].setData(資料);    
                 }, 
                 錯誤:函數(錯誤){  
                     alert("讀取資料錯誤!"); 
                 } 
             });  
         } 
         $(文檔).ready(function() {   
             //每隔3秒自動呼叫方法,且實現圖表的即時更新  
             getForm(); 
             window.setInterval(getForm,600000);    
         }); 
});

此處注意:

複製程式碼 程式碼如下:
var data = [data["Load0"],data["Load1"], data["Load2"],data["Load3"],data["Load4"],data["Load5"],data["Load6"],data["Load7"],data["Load8"],data ["Load9"],data["Load10"],data["Load11"],data["Load12"],data["Load13"],data["Load14"],data["Load15"],data[ "Load16"],data["Load17"],data["Load18"],data["Load19"],data["Load20"],data["Load21"],data["Load22"],data[" Load23"]];
chart.series[0].setData(data);

body中只需要:

複製程式碼 程式碼如下:

希望本文所述對大家的jQuery程式設計有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 Mar 28, 2024 pm 12:50 PM

怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程

怎麼刪除微信好友?刪除微信好友的方法 怎麼刪除微信好友?刪除微信好友的方法 Mar 04, 2024 am 11:10 AM

怎麼刪除微信好友?刪除微信好友的方法

七彩虹主機板怎麼進入bios?教你兩種方法 七彩虹主機板怎麼進入bios?教你兩種方法 Mar 13, 2024 pm 06:01 PM

七彩虹主機板怎麼進入bios?教你兩種方法

微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) 微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) May 01, 2024 pm 12:01 PM

微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人)

Win11管理員權限取得方法總計 Win11管理員權限取得方法總計 Mar 09, 2024 am 08:45 AM

Win11管理員權限取得方法總計

快速掌握:華為手機開啟兩個微信帳號方法大揭密! 快速掌握:華為手機開啟兩個微信帳號方法大揭密! Mar 23, 2024 am 10:42 AM

快速掌握:華為手機開啟兩個微信帳號方法大揭密!

手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) 手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) May 04, 2024 pm 06:01 PM

手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋)

Oracle版本查詢方法詳解 Oracle版本查詢方法詳解 Mar 07, 2024 pm 09:21 PM

Oracle版本查詢方法詳解

See all articles