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

---