使用hcharts创建气泡图/How to use hcharts to make a bubble 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 bubble chart by Hcharts.
Javascript 有很多开源图表库,Hcharts.js就是其中之一,今天教程将教大家如何使用Hcharts.js去绘制一张气泡图。
- 兼容浏览器:IE, Chrome,Firefox等等
您能从本教程学到什么?
- 怎么调用hcharts.js
- 怎么设置图表容器大小
- 怎么配置chart
- 怎么设置图表主标题和副标题
- 怎么设置数据列
需要的准备条件
- 你需要一个代码编辑器,比如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:怎么配置chart
chart: {
type: 'bubble',
zoomType: 'xy'
},
type: 描述了图表类型。默认值为 "line"。这里是气泡图,所以设置为bubble。
zoomType :属性可配置图表放大 ,通过拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:'x','y','xy'。
要点4:怎么设置图表标题
title: {
text: 'Highcharts 气泡图<br/>This is a demo , by @jubi'
},
title: 设置标题, text 后面输入文本标题,支持使用html标签
subtitle: {
text: '数据来源:@jubi <br/><b>This is a demo</b>'
},
subtitle:设置副标题 ,text 后面输入文本标题,支持使用html标签
要点5:怎么设置数据列
series: [{
name:'数据列 1',
data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
}]
name:各个数据的名称,图例显示,以及数据点显示名称,均是同一个;
data:气泡具体数据,每个气泡包含三个值,x,y,z;其中 x,y用于定位,z 用于计算气泡大小
series: [{
name:'数据列 1',
data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
}, {
name:'数据列 2',
data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
}, {
name:'数据列 3',
data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
}]
多个数据格式:
series: [{
name:'name',
data:[[x,y,z],……]
},{
name:'name',
data:[[x,y,z],……]
}]
下面我将用多个数据进行演示:
完整代码如下:
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: '气泡图样例'
},
subtitle: {
text: '数据来源:@jubi <br/><b>This is a demo</b>'
},
series: [{
name:'数据列 1',
// 每个气泡包含三个值,x,y,z;其中 x,y用于定位,z 用于计算气泡大小
data: [[7, 3, 9], [4, 4, 10], [8, 6, 8], [4, 7, 6], [6, 7, 3], [4, 9, 2], [7, 3, 8], [1, 9, 4], [8, 3, 3], [5, 6, 1]]
}, {
name:'数据列 2',
data: [[2, 1, 7], [2, 5, 9], [1, 4, 8], [6, 5, 3], [5, 3, 5], [9, 6, 4], [1, 3, 1], [9, 3, 5], [5, 6, 4], [4, 2, 1]]
}, {
name:'数据列 3',
data: [[5, 5, 7], [2, 5, 9], [1, 5, 8], [8, 5, 3], [5, 3, 8], [9, 3, 4], [9, 3, 1], [9, 3, 6], [5, 7, 8], [4, 5, 1]]
}, {
name:'数据列 4',
data: [[2, 1, 7], [2, 5, 9], [1, 3, 8], [6, 5, 3], [5, 3, 8], [9, 6, 4], [1, 3, 7], [7, 3, 6], [1, 7, 4], [4, 2, 8]]
}, {
name:'数据列 5',
data: [[5, 0, 7], [2, 5, 5], [1, 4, 8], [8, 2, 9], [5, 3, 5], [9, 6, 4], [9, 3, 1], [7, 3, 6], [1, 6, 4], [4, 2, 1]]
}, {
name:'数据列 6',
data: [[7, 4, 1], [0, 2, 4], [6, 7, 9], [3, 0, 0], [5, 8, 6], [1, 7, 8], [3, 6, 3], [7, 8, 75], [4, 12, 10], [3, 7, 2]]
}]
});
});
本教程到此结束,感谢您的阅读!
系列教程列表:
- 使用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
- 使用hcharts创建折线图/How to use hcharts to make a fold line chart
Posted on Utopian.io - Rewarding Open Source Contributors
Wow
this is a good post friends, keep friends sharing.
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
OK i will do it in my next posts. Thank you for your note. Thank you very much.
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