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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
论JavaScript模块化编程
Mar 07 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
原生JS实现不断变化的标签
May 22 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
angular中的cookie读写方法
Aug 02 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
Vue实现浏览器打印功能的代码
Apr 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内存不够用的快速解决方法
2013/10/26 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
Javascript之this关键字深入解析
2013/11/12 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Python编程之属性和方法实例详解
2015/05/19 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
优秀经理获奖感言
2014/03/04 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
安全演讲稿大全
2014/05/09 职场文书
农村党员对照检查材料
2014/09/24 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
JavaCV实现照片马赛克效果
2022/01/22 Java/Android