JQuery Highcharts 动态生成图表的方法
$(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;
})()
}]
});
});
});
相关推荐
-
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src=&q
-
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制的基本折线图效果.分享给大家供大家参考,具体如下: 1. 实例源码: <!DOCTYPE html> <html> <head> <title>HighCharts基本折线图</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
-
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts实现的2D回归直线散点效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts之2D回归直线的散点</title> <script type="text/javascript" src="js
-
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts实现2D柱状图.折线图的组合多轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合多轴图</title> <script type="text/javascript"
-
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D圆环图</title> <script type="text/javascript" src="js/jquery-
-
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D柱状图.折线图的组合双轴图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图的组合双轴图</title> <script type="text/javascript"
-
jQuery Chart图表制作组件Highcharts用法详解
本文实例讲述了jQuery Chart图表制作组件Highcharts用法.分享给大家供大家参考,具体如下: Highcharts是一个制作图表的纯Javascript类库,主要特性如下: ① 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: ② 对个人用户完全免费: ③ 纯JS,无BS: ④ 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: ⑤ 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highchar
-
浅析jquery的js图表组件highcharts
Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对于非商用用户免费(包括个人网站.非盈利性组织.学生团体等). 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for
-
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D半圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D半圆环图</title> <script type="text/javascript" src="js/jquer
-
jQuery.Highcharts.js绘制柱状图饼状图曲线图
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart; $(document).ready(function() { chart = new Highcharts.Chart({ c
-
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts实现的2D对数饼图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D对数轴饼图</title> <script type="text/javascript" src="js/jqu
-
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D金字塔图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D金字塔分布图</title> <script type="text/javascript" src="js/jqu
-
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
本文实例讲述了jQuery插件HighCharts绘制2D柱状图.折线图和饼图的组合图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图.折线图和饼图的组合图</title> <script type="text/javascript"
随机推荐
- javascript 节点遍历函数
- 微信小程序实战之自定义toast(6)
- yii框架搜索分页modle写法
- PHP简单实现文本计数器的方法
- [asp]怎么添加验证码的解决方法
- Linux下控制(统计)文件的生成的C代码实现
- Unity UGUI教程之实现滑页效果
- 用ajax动态加载需要的js文件
- AJAX 异步传输数据的问题
- C++实现N个骰子的点数算法
- 整体刷新和局部刷新frameset窗口问题深入探讨
- Sql Server里删除数据表中重复记录的例子
- jQuery 入门讲解1
- 项目实践之javascript技巧
- node.js中的Socket.IO使用实例
- IIS打开提示MMC无法创建管理单元的解决方法
- .tel域名正式开放注册 把握先机赢商机
- JS引用传递与值传递的区别与用法分析
- 几分钟搞懂c#之FileStream对象读写大文件(推荐)
- JS中的一些常用的函数式编程术语