使用hcharts创建工作进度(甘特)图/How to use hcharts to make a gantt 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 gantt chart by Hcharts.
Javascript 有很多开源图表库，Hcharts.js就是其中之一，今天教程将教大家如何使用Hcharts.js去绘制一张甘特图。

• 兼容浏览器：IE, Chrome,Firefox等等

您能从本教程学到什么?

• 怎么设置图表区选项
• 怎么设置甘特图的标题
• 怎么设置X Y轴
• 怎么设置数据列选项
• 怎么设置数据点选项

需要的准备条件

• 你需要一个代码编辑器，比如atom，EmEditor等等,当然因为是文本编辑，可以直接通过浏览器打开，typora这类文本编辑器也可以进行代码编辑。
• 你需要下载hcharts.js

本教程难度

相对来说比较简单，只需要对固定代码格式有些简单了解，就可以绘制甘特图。

• 认识简单代码
• 认识简单英文

教程内容

下面请先看一个简单例子：

要点1：怎么设置图表区选项

chart: {
        type: 'xrange'
    },

type ：图表类型，这里需要设置为 xrange

要点2：怎么设置甘特图的标题

title: {
        text: '简易甘特图@jubi <br/>This is a demo'
    },

title:标题

text：此处输入标题文本。可以在文本中使用简单的html标签，如加粗，转行等等。

要点3：怎么设置XY轴

   xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            week: '%Y/%m/%d'
        }
    },

xAxis ：X轴数据设置

type：数据类型，此处设置而为时间，datetime，因为甘特图是根据时间进度展示的。

dateTimeLabelFormats：时间格式，星期，具体展示格式为%Y/%m/%d 年月日。

   yAxis: {
        title: {
            text: 'text'
        },
        categories: ['阶段一', '阶段二', '阶段三'],
        reversed: true
    },

yAxis：Y轴数据设置

title：Y轴标题

categories：每个事件的名称

reversed: 事件排序，true就是从上而下显示，false就是从下往上显示。如下图：

reversed: true显示如下：

reversed: false显示如下：

要点4：怎么设置数据列选项

series: [{
        name: '项目1',
        borderColor: 'red',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
        dataLabels: {
            enabled: true
        }
    }]

name： 显示的是 整个项目的名称，位于X轴下方。

borderColor：设置进度条边框颜色，可以直接使用blue white这些颜色。

pointWidth: 进度条宽度，可以根据需要进行设置。

data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25

x 为开始时间， x2 为结束时间， y为 定义到哪个y轴目录。 reversed参数是true的时候，y轴目录从上往下，由0开始。

partialFill: 0.25 是显示百分比，代表完成了25%

要点5：怎么设置数据点选项

 tooltip: {
        dateTimeLabelFormats: {
            day: '%Y/%m/%d'
        }
    },

点击具体进度的时候，显示进度详细：

下面我将用多个事件和多个进度进行演示：

演示代码如下：

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: '简易甘特图@jubi <br/><b>This is</b> a demo'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            week: '%Y/%m/%d'
        }
    },
    yAxis: {
        title: {
            text: 'text'
        },
        categories: ['阶段一', '阶段二', '阶段三','阶段四', '阶段五', '阶段六'],
        reversed: true
    },
    tooltip: {
        dateTimeLabelFormats: {
            day: '%Y/%m/%d'
        }
    },
    series: [{
        name: '项目1',
        borderColor: 'yellow',
        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.25
        }, {
            x: Date.UTC(2014, 11, 2),
            x2: Date.UTC(2014, 11, 5),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 8),
            x2: Date.UTC(2014, 11, 9),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 9),
            x2: Date.UTC(2014, 11, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 10),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }, {
            x: Date.UTC(2014, 11, 24),
            x2: Date.UTC(2014, 11, 29),
            y: 3
        }, {
            x: Date.UTC(2014, 11, 30),
            x2: Date.UTC(2014, 12, 5),
            y: 4
        }, {
            x: Date.UTC(2014, 11, 6),
            x2: Date.UTC(2014, 12, 12),
            y: 5,
            partialFill: 0.67
        }],
        dataLabels: {
            enabled: true
        }
    }]
});

本次教程到此结束，谢谢阅读！

系列教程列表：

• 使用hcharts创建3D饼图/How to use hcharts to make a 3D Pie chart
• 使用hcharts创建扇形统计图/How to use hcharts to make a fan-shaped chart

---

Posted on Utopian.io - Rewarding Open Source Contributors

---