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 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
VUE实现密码验证与提示功能
Oct 18 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文件缓存方法总结
2016/03/16 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
详解Python字典小结
2018/10/20 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python requests模块session代码实例
2020/04/14 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
利用python进行文件操作
2020/12/04 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
先进集体获奖感言
2014/02/13 职场文书
社区工作者感言
2014/03/02 职场文书
旅游市场营销方案
2014/03/09 职场文书
《花木兰》教学反思
2014/04/09 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
个人党性锻炼总结
2015/03/05 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Java设计模式之享元模式示例详解
2022/03/03 Java/Android