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 生成图表的一些配置。

第一步：创建 HTML 页面

创建一个 HTML 页面，引入 jQuery 和 Highcharts 库：

文件名：HighchartsTest.htm

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<title>Highcharts 教程 | 芝麻教程</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() {
});
</script>
</body>
</html>

实例中 id 为 container 的 div 用于包含 Highcharts 绘制的图表。

第二步: 创建配置文件

Highcharts 库使用 json 格式来配置。

View Raw Code?
1
$('#container').highcharts(json);
这里 json 表示使用 json 数据格式和 json 格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

View Raw Code?
1
2
3
var title = {
text: '月平均气温'
};

副标题

为图表配置副标题：

View Raw Code?
1
2
3
var subtitle = {
text: 'Source: web3.xin'
};
X 轴

配置要在 X 轴显示的项。

View Raw Code?
1
2
3
4
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
};

Y 轴

配置要在 Y 轴显示的项。

View Raw Code?
1
2
3
4
5
6
7
8
9
10
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
提示信息

配置提示信息：

View Raw Code?
1
2
3
var tooltip = {
valueSuffix: '\xB0C'
}

展示方式

配置图表向右对齐：

View Raw Code?
1
2
3
4
5
6
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
数据

配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。

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
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];

第三步: 创建 json 数据

组合是由配置信息:

View Raw Code?
1
2
3
4
5
6
7
8
9
10
11
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
Step 4: Draw the chart
$('#container').highcharts(json);
实例

以下为完整的实例(HighchartsTest.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
<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: 100%; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var title = {
text: '月平均气温'
};
var subtitle = {
text: 'Source: web3.xin'
};
var xAxis = {
categories: ['一月', '二月', '三月', '四月', '五月', '六月'
,'七月', '八月', '九月', '十月', '十一月', '十二月']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#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