欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jQuery实现折线图的方法

时间:2021-09-22 07:10:51|栏目:jquery|点击:

本文实例讲述了jQuery实现折线图的方法。分享给大家供大家参考。具体如下:

效果图如下所示:

js引用:

复制代码 代码如下:
<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>

定时刷新:

复制代码 代码如下:
//曲线图 
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 '<b>' + this.x + '</b><br/>' + 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,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,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("读取数据出错!"); 
                 } 
             });   
             $.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("读取数据出错!"); 
                 } 
             });  
         } 
         $(document).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中只需要:

复制代码 代码如下:
<div id="divChart"> </div>

希望本文所述对大家的jQuery程序设计有所帮助。

上一篇:jquery插件开发之选项卡制作详解

栏    目:jquery

下一篇:jquery网页回到顶部效果(图标渐隐,自写)

本文标题:jQuery实现折线图的方法

本文地址:http://www.codeinn.net/misctech/176734.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有