使用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

---