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 相关文章推荐
JS验证身份证有效性示例
Oct 11 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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新手上路(八)
2006/10/09 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
自我评价的正确写法
2013/09/19 职场文书
综合办公室主任职责
2013/12/16 职场文书
给老师的道歉信
2014/01/11 职场文书
教师节演讲稿
2014/05/06 职场文书
团支部推优材料
2014/05/21 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python