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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
JavaScript实现简单贪吃蛇效果
Mar 09 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中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JS判断数组那点事
2017/10/10 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python安装教程
2018/02/28 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
浅谈django 重载str 方法
2020/05/19 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
机械专业应届生求职信
2013/12/12 职场文书
企业统计员岗位职责
2013/12/13 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
平安建设汇报材料
2014/12/29 职场文书
施工现场安全管理制度
2015/08/05 职场文书