前言
Excel功能强大，应用广泛。随着web应用的兴起和完善，用户的要求也越来越高。很多Excel的功能都搬到了sass里面。恨不得给他们做个Excel出来。。。程序员太难了。。。
去年我遇到了一个甘特图的需求，做了很多工作，也写了两篇博客。一篇是用 GSTC 这个包做的甘特图，另一篇是自己手写了一个简易的甘特图。两个的效果都不理想，特别是GSTC，问题很多，好多道友看了博客遇到了问题，惭愧，没能帮大家解决这个问题。之前太忙了，这个甘特图就再没搞，知道今天发现了新的包，几乎是完全符合我们的需求。
首先，我们用的是 highcharts；其次，大团队后期维护有保障，文档也齐全。
我用 Vue 写的，但是highcharts不区分，所以无论 vue react 还是原生多页面都没问题。
接下来先看一下我们的需求，也是最基本的，需要实现的功能，然后会有效果图的gif，最后就是源代码，我放在了Git上，觉得好用，麻烦给了star。
需求
1、横轴左侧是表格数据，可以展示基本信息
2、横轴右侧是时间轴，可以切换不同精度的时间展示
3、横向数据块有多个，最好可以叠加
4、数据块可以拖拽、点击等，修改任务的时间和其他信息
效果图
这个highcharts，不仅实现了左边表格，右边图标，而且数据是联动的；右边横轴是时间轴，可以自定义格式；数据允许叠加，不冲突；数据有点击等各种事件，可以选中编辑单个数据块；数据可以拖拽，比如上下换列拖拽、水平拖拽，还可以单边拖拽，而且事件都有回调函数。这些功能基本可以满足我们的需求。比如对时间段、时间长度、数据信息的修改和展示。
源码地址、代码解析
先贴一下我代码的Git地址，点击 GitHub源代码 下载源代码。建议直接下源码，跑项目，另外，这个项目是vue3的，不过对于这种包，写法差别不大。
我贴一下代码，对功能实现做一个讲解，当然注释写的也是很详细的。
首先，highcharts-gantt.js 是专门用来实现甘特图的文件，draggable-points.js 是实现点数据绑定的文件。因为vue直接引入有找不到变量的问题，我将draggable-points的两个module直接添加到了highcharts-gantt里面，然后重新压缩，没有混淆，所以最终的包只有160K+，小了很多，大家可以直接用。压缩之后的源代码放心使用就行，我只是合并了2个文件的功能函数，但是也要格外提醒，不是官方的源文件了，感兴趣的同学可以去看官方源代码， .src 的文件是未压缩混淆的，注释也很详细。
功能有点简单，好像代码没什么好说的。关键的地方我都做了注释，还有不明白的可以留言或者评论。
最后，还存在一个问题，我没仔细研究源码，这个示例还存在一个问题，就是拖拽事件没有中断，而且直接修改了图表的数据展示。比如，纵向拖动换行时，左侧表格的数据会变化。暂时我还没有找到满意解决的方法。目前，我在拖拽结束的回调 drop 回调中，对数据做了处理，然后将我们希望的数据回写，重新渲染图表，同样你也可以做不能拖拽或者时间冲突等各种校验，达到上面我所说的需求。但是还有一点瑕疵，就是拖拽过程中的数据变化，左侧表格的数据我不希望他变化，暂时没能解决掉。如果您有好的案例、好的使用、好的建议，都希望可以提出来，共同进步。