使用hcharts创建3D堆叠柱形图/How to use hcharts to make a 3D stacked bar 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 3D stacked bar chart by Hcharts.
Javascript 有很多开源图表库，Hcharts.js就是其中之一，今天教程将教大家如何使用Hcharts.js去绘制一张3D堆叠柱形图。
- 兼容浏览器：IE, Chrome,Firefox等等
您能从本教程学到什么?
- 代码整体结构
- 怎么调用hcharts.js
- 怎么设置图表画布大小以及图表chart配置
- 怎么设置图表主副标题
- 怎么设置XY轴
- 怎么设置提示框
- 怎么设置通用设置
- 怎么设置数据列
需要的准备条件
- 你需要一个代码编辑器，比如atom，EmEditor等等,当然因为是文本编辑，可以直接通过浏览器打开，typora这类文本编辑器也可以进行代码编辑。
- 你需要下载hcharts.js（如果不下载到本地，也可以在线调用，参考要点2.）
本教程难度
相对来说比较简单，只需要对固定代码格式有些简单了解，就可以绘制3D堆叠柱形图。
- 认识简单代码
- 认识简单英文
教程内容
下面请先看一个简单例子：
要点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="height: 400px"></div>
<script>
$(function () {
$('#container').highcharts({
//key code
})
//hcharts.js code area!
</script>
</body>
</html>
html结构，我们创建图表的代码是js语句，所以关键代码是放在< 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="height: 400px"></div>
在body区域，编辑chartjs代码之前，需要先定义下图表的大小。上面代码定义，高为400px
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
marginTop: 80,
marginRight: 40
},
type：图表 类型，默认是line，这里是堆叠柱形图，所以设置为column。
options3d: 3D设置
enabled 是否开启3D， 设置为false，实例如下：
alpha: 30,
beta: 10,
前后左右翻转角度。
marginTop 上距
marginRight 左距
要点4：怎么设置图表主副标题
title: {
text: '3d chart demo'
},
subtitle :{
text:'This a demo <br/>@jubi'
}
titel：标题，text后输入标题文本，支持html标签。
subtitle：副标题，text后输入标题文本，支持html标签。实例如下：
要点5：怎么设置XY轴
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'DEMO'
}
},
xAxis X轴：
categories x轴上面显示的数据名称。
yAxis Y轴：
allowDecimals 允许小数点
min 最小刻度
title y轴标题 显示在y轴左侧
要点6：怎么设置提示框
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
headerformat 提示框抬头
pointformat 数据点显示样式
要点7：怎么设置通用设置
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
stacking 堆叠样式 参数有normal 和percent。 实例以设置为percent：
depth 图表z方向深度，值越小 3D效果越差
要点8：怎么设置数据列
series: [{
name: 'xiaozhang',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'xiaowang',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'xiaopeng',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'xiaopan',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
name: 数据名称
data 具体数据 和x轴categories 对应
stack 堆叠区分。本例子数据 是male 和female2个分类。
完整实例如下：
完整代码如下：
<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="height: 400px"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
marginTop: 50,
marginRight: 10
},
title: {
text: '3d chart demo'
},
subtitle : {
text:'This a demo <br/>@jubi'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E','F','G','H']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'DEMO'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'xiaozhang',
data: [5, 3, 4, 7, 2,3,4,5],
stack: 'male'
}, {
name: 'xiaowang',
data: [3, 4, 4, 2, 5,5,6,4],
stack: 'male'
}, {
name: 'xiaopeng',
data: [2, 5, 6, 2, 1,2,3,5],
stack: 'female'
}, {
name: 'xiaopan',
data: [3, 0, 4, 4, 3,9,8,7],
stack: 'female'
}]
});
});
</script>
</body>
</html>
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @jubi I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x