JQuery Highcharts 动态生成图表的方法


Posted in Javascript onNovember 15, 2013
$(function () { 
$(document).ready(function() { 
Highcharts.setOptions({ 
global: { 
useUTC: false 
} 
}); var chart; 
$('#container').highcharts({ 
chart: { 
type: 'spline', 
animation: Highcharts.svg, // don't animate in old IE 
marginRight: 10, 
events: { 
load: function() { 
// set up the updating of the chart each second 
var series = this.series[0]; 
setInterval(function() { 
var x = (new Date()).getTime(), // current time 
y = Math.random(); 
series.addPoint([x, y], true, true); 
}, 1000); 
} 
} 
}, 
title: { 
text: 'Live random data' 
}, 
xAxis: { 
type: 'datetime', 
tickPixelInterval: 150 
}, 
yAxis: { 
title: { 
text: 'Value' 
}, 
plotLines: [{ 
value: 0, 
width: 1, 
color: '#808080' 
}] 
}, 
tooltip: { 
formatter: function() { 
return '<b>'+ this.series.name +'</b><br/>'+ 
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
Highcharts.numberFormat(this.y, 2); 
} 
}, 
legend: { 
enabled: false 
}, 
exporting: { 
enabled: false 
}, 
series: [{ 
name: 'Random data', 
data: (function() { 
// generate an array of random data 
var data = [], 
time = (new Date()).getTime(), 
i; 
for (i = -19; i <= 0; i++) { 
data.push({ 
x: time + i * 1000, 
y: Math.random() 
}); 
} 
return data; 
})() 
}] 
}); 
}); 
});
Javascript 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 #Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 #Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 #Javascript
js螺旋动画效果的具体实例
Nov 15 #Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 #Javascript
JS读取XML文件示例代码
Nov 15 #Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 #Javascript
You might like
php多任务程序实例解析
2014/07/19 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHPMailer发送邮件
2016/12/28 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
初学Python实用技巧两则
2014/08/29 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python内存管理机制原理详解
2019/08/12 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
大四自我鉴定
2014/02/08 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
会员卡清退活动总结
2014/08/27 职场文书
党性心得体会
2014/09/03 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python