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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
详解vue-property-decorator使用手册
Jul 29 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 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
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JSON取值前判断
2014/12/23 Javascript
javascript折半查找详解
2015/01/26 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python 等差数列末项计算方式
2020/05/03 Python
python线性插值解析
2020/07/05 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
python pillow库的基础使用教程
2021/01/13 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
写给妈妈的道歉信
2014/01/11 职场文书
数学系个人求职信范文
2014/01/30 职场文书
小学语文国培感言
2014/03/04 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
新员工入职感想
2015/08/07 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题