使用highCharts实现甘特图

什么是甘特图，甘特图内在思想简单，即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。管理者由此可便利地弄清一项任务（项目）还剩下哪些工作要做，并可评估工作进度。

项目需要实现一个任务耗时甘特图，借助前端绘图插件highcharts实现了需求，最后显示效果如下图所示，下面来讲解写实现过程。

1、引入hightcharts插件

这边要求引入的插件版本为6.x，甘特图的实现需要用到highcharts高版本中的xrange图表；同时还需要引入这个额外的插件Highcharts X-range series plugin，源码可以打开连接自取。

任务甘特图

2、图表参数配置

关键的一步就是图表option的配置，xrange类型的配置参数略有不同。

// exmaple
series: [{
    name: 'Project 1',
    borderRadius: 5,
    pointWidth: 10,
    data: [{
        x: Date.UTC(2014, 11, 1),
        x2: Date.UTC(2014, 11, 2),
        y: 0
    }, {
        x: Date.UTC(2014, 11, 2),
        x2: Date.UTC(2014, 11, 5),
        y: 1
    }]
}]

正如甘特图中显示的那样，每个数据都是分段的，代表一个区间，所以每个数据也需要有两个x轴的值来确定区间的起始和结束位置。y轴方向的数据则是用来表示区间所在的层级，所以上面代码中y:0代表这个区间在自底向上的第一栏，同时y这个值是必须设定的，不然highcharts将无法进行渲染。

3、y轴label显示问题

y轴中显示的任务名称过长

当任务名称过长时，但显示空间有限，就会出现如上图所示的问题，影响图表的正常显示。

css中样式覆盖（失败）

/* highCharts样式覆盖 */
.highcharts-yaxis-labels span{
    display:inline-block;
    width: 200px;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis !important;
}

加入覆盖样式后，发现图标样式的渲染，全是highcharts.js中写入的，css中覆盖样式优先级低于js嵌入的样式；但是其实css样式覆盖还是可行的，前提是在Styled mode下；简单来讲，就是highcharts来提供另一种版本，这个版本下，图标的一些显示样式是不在js中写入的，你可以按照规范制定自己的样式文件然后导入，具体可以看官方文档。

js写入样式覆盖（bingo）

highCharts.chart('task-gantt-chart',this.chartOpt)
let domArray = document.querySelectorAll('.highcharts-yaxis-labels span');
Array.prototype.slice.call(domArray).map(item => {
  Object.assign(item.style, {
    display: "inline-block",
    left: "10px",
    width: "200px",
    overflow: "hidden",
    "text-align": "left",
    "white-space": "nowrap",
    "text-overflow": "ellipsis"
  })
})

既然highcharts是js修改样式，我们只能以同样的方式修改咯。在初始化图标后，我们手动修改样式，达到预期效果。

最后实现的任务甘特图

参考

Example in jshare
HighCharts官方文档