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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
PHP函数学习之PHP函数点评
2012/07/05 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
用原生js做单页应用
2017/01/17 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
新手简单了解vue
2019/05/29 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python去除文件中重复的行实例
2018/06/29 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
超实用的 30 段 Python 案例
2019/10/10 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
大学生党员个人对照检查材料范文
2014/09/25 职场文书
老兵退伍标语
2014/10/07 职场文书
任命书标准格式
2015/03/02 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python