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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
JavaScript获取路径设计源码
May 22 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
countUp.js实现数字滚动效果
Oct 18 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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实现分页的一个示例
2006/10/09 PHP
Yii配置文件用法详解
2014/12/04 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
护理个人求职信范文
2014/01/08 职场文书
出国留学担保书
2014/05/20 职场文书
教师个人读书活动总结
2014/07/08 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年教师节感言
2015/08/03 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
Python实现照片卡通化
2021/12/06 Python