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开发中因空格引发的错误
Nov 08 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
js仿360开机效果
Dec 26 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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面向对象编程快速入门
2006/10/09 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
php计算十二星座的函数代码
2012/08/21 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python hmac模块使用实例解析
2019/12/24 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Pycharm调试程序技巧小结
2020/08/08 Python
python中count函数知识点浅析
2020/12/17 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
会计自我鉴定范文
2013/10/06 职场文书
人力资源经理自我评价
2014/01/04 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
小学数学教学反思范文
2016/02/16 职场文书
《活见鬼》教学反思
2016/02/24 职场文书