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 相关文章推荐
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
javascript实现计算器功能详解流程
Nov 01 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 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 callback函数使用方法和注意事项
2015/01/23 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
谈谈JS中的!!
2017/12/07 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python元组的概念知识点
2019/11/19 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
python中的对数log函数表示及用法
2020/12/09 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
HR喜欢的自荐信格式
2013/10/08 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
森林病虫害防治方案
2014/06/02 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
初中差生评语
2014/12/29 职场文书
2016特色励志班级口号
2015/12/24 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫