Highcharts

Highcharts 教程 Highcharts 环境配置 Highcharts 配置语法 Highcharts 配置说明 Highcharts 曲线图 基本曲线图 带数据标签曲线图表 异步加载数据曲线图 时间序列，可缩放的图表 X 轴翻转曲线图 带标记曲线图 标示区曲线图 不规则时间间隔图表 对数图表 Highcharts 区域图 基本区域图 使用负数区域图 堆叠区域图 百分比堆叠区域图 丢失值区域图 反转x轴与y轴 曲线区域图 区间区域图 使用区间和线的区域图 Highcharts 条形图 基本条形图 堆叠条形图 反向条形图 Highcharts 柱形图 基本柱形图 使用负值的反向柱形图 堆叠柱形图 使用百分比的堆叠柱形图 标签旋转柱形图 固定布局柱形图 使用 HTML 表格数据的柱形图 区间柱形图 Highcharts 饼图 基本饼图 显示图例饼图 圆环图 半圈圆环图 向下钻取饼图 渐变饼图 Highcharts 散点图 Highcharts 气泡图 动态图 Highcharts 组合图 柱形图，线条图，饼图组合 双Y轴, 柱形图，线条图组合 多Y轴组合 散点图上添加回归线 Highcharts 3D图 3D柱形图 带空值(null)和0的3D柱形图 堆叠3D柱形图 3D饼图 3D圆环图 Highcharts 测量图 圆形进度条式测量图 Highcharts 时钟 音量表（VU Meter） Highcharts 树状图(Treemap)
  1. Highcharts
  2. 动态图

动态图

本章节我们将为大家介绍 Highcharts 的动态图。

我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。

每秒更新曲线图

chart.events

chart.event 属性中添加 load 方法（图表加载事件）。在 1000 毫秒内随机产生数据点并生成图表。

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
12
13
chart: {
events: {
load: function () {
// 图表每秒更新一次
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // 当期时间
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
}

实例

文件名：highcharts_dynamic_spline.htm

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 芝麻教程(web3.xin)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script></head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'spline',
animation: Highcharts.svg, // don't animate in IE < IE 10.
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);
}
}
};
var title = {
text: 'Live random data'
};
var xAxis = {
type: 'datetime',
tickPixelInterval: 150
};
var yAxis = {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var 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);
}
};
var plotOptions = {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
};
var legend = {
enabled: false
};
var exporting = {
enabled: false
};
var 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 += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.exporting = exporting;
json.series = series;
json.plotOptions = plotOptions;
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts(json);
});
</script>
</body>
</html>

通过点击添加数据

chart.events

在 chart.event 属性中添加 click 方法（整个图表的绘图区上所发生的点击事件）。该方法在图表绘图区上发生点击时会添加新的数据点。

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
12
chart: {
events: {
click: function (e) {
// 获取点击坐标和数据项
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// 添加点击的坐标
series.addPoint([x, y]);
}
}
}

实例

文件名：highcharts_dynamic_click.htm

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
<head>
<title>Highcharts 教程 | 芝麻教程(web3.xin)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/try/demo_source/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
};
var title = {
text: 'User supplied data'
};
var subtitle = {
text: 'Click the plot area to add a point. Click a point to remove it.'
};
var xAxis = {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
};
var yAxis = {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var legend = {
enabled: false
};
var exporting = {
enabled: false
};
var plotOptions = {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
};
var series= [{
data: [[20, 20], [80, 80]]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.exporting = exporting;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>

站内导航
HTML5 | CSS3 | JavaScrip | HTML DOM | JSON | PHP7 | XML | XML DOM | XSLT | DTD | XML Schema | 开发手册 | php手册 | 破解软件 | 技术分享 | Blog
联系我们

邮箱 626512443@qq.com
电话 18611320371(微信)
QQ群 235681453

友情链接
百郎科技 | Linux命令大全 | xin站大全 | 厦门SEO | 探趣吧 | 北京医院跑腿

Copyright © 2015-2024

备案号：京ICP备15003423号-3