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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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 cookie错误
2009/08/09 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
windows下python连接oracle数据库
2017/06/07 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python 产生token及token验证的方法
2018/12/26 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
中国梦的演讲稿
2014/01/08 职场文书
继承公证书
2014/04/09 职场文书
自主招生自荐信范文
2015/03/04 职场文书
python之基数排序的实现
2021/07/26 Python