jQuery實(shí)現(xiàn)折線圖的方法

更新時(shí)間：2015年02月28日 15:47:53 作者：開心就是最好

這篇文章主要介紹了jQuery實(shí)現(xiàn)折線圖的方法,涉及jQuery及相關(guān)插件的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)折線圖的方法。分享給大家供大家參考。具體如下：

效果圖如下所示：

js引用：

復(fù)制代碼代碼如下:

<script src="Js/Index/jquery-1.5.2.min.js" type="text/javascript"></script>  

<script src="js/Index/raphael.2.1.0.min.js" type="text/javascript"></script>  

<script src="js/Index/justgage.1.0.1.js" type="text/javascript"></script> 

<script src="Js/Index/highcharts.js" type="text/javascript"></script>    

<script src="Js/Index/exporting.js" type="text/javascript"></script>

定時(shí)刷新：

復(fù)制代碼代碼如下:

//曲線圖  

ar chart;  

 $(document).ready(function() {  

     chart = new Highcharts.Chart({  

         chart: {  

             renderTo: 'divChart',          //放置圖表的容器  

             plotBackgroundColor: null,  

             plotBorderWidth: null,  

             defaultSeriesType: 'line'  

         },  

         title: {  

             text: '24小時(shí)負(fù)荷曲線'  

         },  

         subtitle: {  

             text: ''  

         },  

         xAxis: {//X軸數(shù)據(jù)  

             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 '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);  

             }  

         },  

         plotOptions: {  

             line: {  

                 dataLabels: {  

                     enabled: true  

                 },  

                 enableMouseTracking: true//是否顯示title  

             }  

         },  

         series: [{  

             name: '1號(hào)機(jī)組',  

             data: [0,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號(hào)機(jī)組',  

             data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]  

         }]  

         });  

         function getForm(){   

             $.ajax({  

                 type: "POST",     //要用post方式       

                 url: "WebServiceFH.asmx/GetLoadEveryHourByOne",         

                 contentType: "application/json",  

                 data: {},  

                 dataType: "json",  

                 success: function (data) {    

                     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);   

                 },  

                 error: function (err) {   

                     alert("讀取數(shù)據(jù)出錯(cuò)！");  

                 }  

             });    

             $.ajax({  

                 type: "POST",     //要用post方式       

                 url: "WebServiceFH.asmx/GetLoadEveryHourByTwo",         

                 contentType: "application/json",   

                 dataType: "json",  

                 success: function (data) {    

                     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[1].setData(data);     

                 },  

                 error: function (err) {   

                     alert("讀取數(shù)據(jù)出錯(cuò)！");  

                 }  

             });   

         }  

         $(document).ready(function() {    

             //每隔3秒自動(dòng)調(diào)用方法，實(shí)現(xiàn)圖表的實(shí)時(shí)更新   

             getForm();  

             window.setInterval(getForm,600000);     

         });  

});

此處注意：

復(fù)制代碼代碼如下:

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中只需要：

復(fù)制代碼代碼如下:

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: