jQuery實作折線圖的方法_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程式設計有所幫助。