使用hcharts创建堆叠面积图/How to use hcharts to make a stacked area chart
Summary:
Javascript has a lot of open source chart Libraries,Hcharts.js is one of them,today i will show you how to create a stacked area chart by Hcharts.
Javascript 有很多开源图表库，Hcharts.js就是其中之一，今天教程将教大家如何使用Hcharts.js去绘制一张堆叠面积图。
- 兼容浏览器：IE, Chrome,Firefox等等
您能从本教程学到什么?
- 代码整体结构
- 怎么调用hcharts.js
- 怎么设置图表画布大小
- 怎么配置chart参数
- 怎么设置图表主副标题
- 怎么设置X\Y轴
- 怎么设置提示框
- 怎么设置通用配置
- 怎么设置数据列
需要的准备条件
- 你需要一个代码编辑器，比如atom，EmEditor等等,当然因为是文本编辑，可以直接通过浏览器打开，typora这类文本编辑器也可以进行代码编辑。
- 你需要下载hcharts.js（如果不下载到本地，也可以在线调用，参考要点2.）
本教程难度
相对来说比较简单，只需要对固定代码格式有些简单了解，就可以绘制堆叠面积图。
- 认识简单代码
- 认识简单英文
教程内容
下面请先看一个简单例子：
教程要点1：代码整体结构
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
//hcharts.js code area!
</script>
</body>
</html>
上述是整个html结构，完整代码另存为.html文件，用浏览器打开即可。本教程是使用javascript库生成图表，所以本例子关键代码为 html结构中body区域中 < script>和< /script>之间的部分，下面将详细讲解关键代码。
教程要点2：怎么调用hcharts.js
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
如果本地没有hcharts.js库，可以使用其在线js资源，同时需要加载jquery.min.js。直接在head区域引用就可以了。
教程要点3：怎么设置图表画布大小
<div id="container" style="min-width:400px;height:400px"></div>
在body区域，编辑chartjs代码之前，需要先定义下图表的大小。上面代码定义，最小宽度为400px，高为400px。
教程要点4：怎么配置chart参数
chart: {
type: 'area'
},
需要设置的参数只有一个，type，图表类型。默认值为 "area"。这里是堆叠面积图，所以设置为area。
教程要点5：怎么设置图表主副标题
title: {
text: 'stacked area chart demo'
},
title标题 ，在text后输入标题文本，支持html标签。
subtitle: {
text: 'This is a demo <br/>by @jubi '
},
subtitle副标题，在text后面输入标题文本，支持加粗，倾斜，换行，超链接等html标签。实例如下：
教程要点6：设置X\Y轴
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7'],
tickmarkPlacement: 'on',
title: {
text: 'x-title'
}
},
categories x轴刻度名
tickmarkPlacement 刻度线对其方式，有between和on可选，默认是between，实例如下：
title 标题，显示在x轴下方
教程要点7：怎么设置提示框
tooltip: {
split: true,
valueSuffix: ' EA'
},
split 显示设置，是否同时显示。示例如下：
- split: true
- split:false
valueSuffix 数值单位，实例如下：
教程要点8：怎么设置通用配置
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
stacking 堆叠样式，参数有percent 和normal ，实例如下：
- tacking: 'normal'
- tacking: 'percent'
linecolor 线颜色
linewidth 线宽
marker: {
lineWidth: 1,
lineColor: '#666666'
}
数据点标识 样式
教程要哦点9：怎么设置数据列
series: [{
name: 'A',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'B',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'C',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'D',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'E',
data: [2, 2, 2, 6, 13, 30, 46]
}]
name 数据名称
data 数据 ，格式：data:[data1,data2,data3……]
完整实例如下：
完整代码如下：
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'stacked area chart demo'
},
subtitle: {
text: 'This is a demo <br/>by @jubi'
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7'],
tickmarkPlacement: 'on',
title: {
text: 'x-title'
}
},
yAxis: {
title: {
text: 'y-title'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' EA'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'A',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'B',
data: [106, 507, 111, 133, 221, 767, 1766]
}, {
name: 'C',
data: [163, 503, 276, 408, 547, 729, 628]
}, {
name: 'D',
data: [18, 531, 554, 156, 339, 818, 1201]
},{
name: 'E',
data: [118, 131, 154, 1156, 1339, 1118, 2201]
},{
name: 'F',
data: [28, 311, 514, 156, 319, 8118, 12011]
},{
name: 'G',
data: [38, 131, 154, 1156, 1339, 2818, 3201]
}, {
name: 'H',
data: [21, 222, 332, 622, 2213,2220, 2246]
}]
});
});
</script>
</body>
</html>
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it does not follow the Utopian Rules.
Copied from https://www.highcharts.com/demo/area-stacked .
You can contact us on Discord.
[utopian-moderator]