jQuery实现折线图的方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
js中split和replace的用法实例
Feb 28 #Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 #Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 #Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 #Javascript
js获取当前日期前七天的方法
Feb 28 #Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 #Javascript
使用命令对象代替switch语句的写法示例
Feb 28 #Javascript
You might like
PHP n个不重复的随机数生成代码
2009/06/23 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
javascript实现简易的计算器
2020/01/17 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
快速了解python leveldb
2018/01/18 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python FFT合成波形的实例
2019/12/04 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
吨的认识教学反思
2014/04/27 职场文书
二审答辩状范文
2015/05/22 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
联欢会开场白
2015/06/01 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
保护地球的宣传语
2015/07/13 职场文书
决心书格式范文
2015/09/23 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python
用Python生成会跳舞的美女
2022/01/18 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js