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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
js里面的变量范围分享
Jul 18 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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 数学运算验证码实现代码
2009/10/11 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
行政专员求职信范文
2014/05/03 职场文书
保护环境演讲稿
2014/05/10 职场文书
领导班子四风表现材料
2014/08/23 职场文书
个人委托书如何写
2014/09/25 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
JavaScript实例 ODO List分析
2022/01/22 Javascript
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS