使用hcharts创建折线图/How to use hcharts to make a fold line 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 fold line chart by Hcharts.
Javascript 有很多开源图表库,Hcharts.js就是其中之一,今天教程将教大家如何使用Hcharts.js去绘制一张折线图。
- 兼容浏览器:IE, Chrome,Firefox等等
您能从本教程学到什么?
- 怎么调用hcharts.js
- 怎么设置图表容器大小
- 怎么设置主标题和副标题
- 怎么设置XY轴
- 怎么设置图例
- 怎么设置数据列
需要的准备条件
- 你需要一个代码编辑器,比如atom,EmEditor等等,当然因为是文本编辑,可以直接通过浏览器打开,typora这类文本编辑器也可以进行代码编辑。
- 你需要下载hcharts.js
本教程难度
相对来说比较简单,只需要对固定代码格式有些简单了解,就可以绘制扇形统计图。
- 认识简单代码
- 认识简单英文
教程内容
下面请先看一个简单例子:
要点1:怎么调用hcharts.js
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
如果本地没有hcharts.js库,可以使用其在线js资源,同时需要加载jquery.min.js。直接在head区域引用就可以了。
要点2:怎么设置图表容器大小
<div id="container" style="max-width:800px;height:400px"></div>
在body区域,变现chartjs之前,需要先定义下图表的大小。上面代码定义,最大宽度为800px,高为400px。
要点3:怎么设置主标题和副标题
title: {
text: '5月-12月,ABCDE 5人收入情况'
},
subtitle: {
text: '数据来源:@jubi <br/><b>demo</b>'
},
title 设置主标题;subtitle 设置副标题。
支持使用html标签,如换行,加粗。
要点4:怎么设置XY轴
xAxis: {
title: {
text: '月份'
},
categories: ['5月', '6月', '7月','8月', '9月', '10月','11月','12月']
},
title: 显示在X轴下面的标题。text后面使用单引号将文字括起来。
x轴上面每个数据点名称,使用categories,格式为categories:['text1','text2'……]
需要与数据列提交的数据数量一致。
yAxis: {
title: {
text: '收入 $'
}
},
title: 显示在Y轴左侧的标题。text后面使用单引号将文字括起来。
要点5:怎么设置图例
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
legend 图例
layout 输出样式,有垂直(vertical)和水平(horizontal),演示如下:
align:对齐方式,居左 left,居右right ,居中center。
verticalAlign :垂直对齐,有top(上),middle(中),下(bottom)
要点6:怎么设置数据列
series: [{
name: 'A',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'B',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'C',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'D',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'E',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
数据格式:
{
name:'',
data:[data1,data2,data3,……]
}
name 数据名称
data 具体数据。
下面是多个数据演示:
完整代码如下:
var chart = Highcharts.chart('container', {
title: {
text: '5月-12月,A-I 8人收入情况'
},
subtitle: {
text: '数据来源:@jubi <br/><b>demo</b>'
},
xAxis: {
title: {
text: '月份/这是一个DEMO/THis is a demo!!!'
},
categories: ['5月', '6月', '7月','8月', '9月', '10月','11月','12月']
},
yAxis: {
title: {
text: '收入 $'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'A',
data: [439, 523, 577, 658, 931, 1931, 1133, 1175]
}, {
name: 'B',
data: [216, 244, 742, 251, 320, 302, 321, 434]
}, {
name: 'C',
data: [114, 177, 165, 171, 285, 277, 327, 393]
}, {
name: 'D',
data: [null, null, 88, 129, 1162, 252, 300, 327]
}, {
name: 'E',
data: [null, null, 78, 1669, 152, 222, 400, 327]
}, {
name: 'F',
data: [null, null, 79, 121, 112, 2262, 300, 227]
}, {
name: 'G',
data: [null, null, 78, 129, 1562, 252, 300, 327]
}, {
name: 'H',
data: [null, null, 78, 129, 1652, 222, 340, 327]
}, {
name: 'I',
data: [128, 58, 05, 148, 89, 116, 174, 111]
}],
});
系列教程列表
- 使用hcharts创建3D饼图/How to use hcharts to make a 3D Pie chart
- 使用hcharts创建扇形统计图/How to use hcharts to make a fan-shaped chart
- 使用hcharts创建工作进度(甘特)图/How to use hcharts to make a gantt chart
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