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 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
利用 JavaScript 构建命令行应用
Nov 17 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python实现AES加密解密
2019/03/28 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python是怎样处理json模块的
2020/07/16 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
大学校园毕业自我鉴定
2014/01/15 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
少先队中队工作总结
2015/08/14 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis