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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
js实现无缝滚动图
2017/02/22 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
python 算法 排序实现快速排序
2012/06/05 Python
使用Python读取大文件的方法
2018/02/11 Python
Python引用计数操作示例
2018/08/23 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
土木工程应届生求职信
2013/10/31 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
英文演讲稿
2014/05/15 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
PL350与SW11的比较
2021/04/22 无线电
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
MySQL七大JOIN的具体使用
2022/02/28 MySQL
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技