vue甘特图插件，如何用vue制作甘特图？

本文重点介绍关于vue甘特图插件，如何用vue制作甘特图？

vue甘特图插件（应用于项目进度、流程进度等）

插件名称：hightCharts-gantt
插件官网：https://www.highcharts.com.cn/demo/gantt
插件文档：https://www.highcharts.com.cn/docs

vue做甘特图，先大致介绍下核心功能： 

（1）横轴、纵轴拖拽； 

（2）自定义监听点击事件（双击、右键等）

（3）任务之间显示父子层级关系；

（4）左侧列表信息，右侧时间轴表示任务；

（5）每个任务可以订制样式，并且可以动态修改样式；

（6）自定义时间粒度显示（小时、天、星期、月、年）；

（7）支持大批量数据渲染；

（8） 支持同行多节点渲染；

（9）支持选中，以及批量选中；

（10）优秀的扩展性，支持第三方插件。等等还有其他的一些功能。这里先看一下效果图：

接下来会介绍用什么实现的，怎么使用，怎么添加拖拽、点击等各种功能，我以vue为例进行开发。

1、使用GSTC做甘特图开发

　　Git项目地址：https://github.com/neuronetio/gantt-schedule-timeline-calendar#weekendhighlight-plugin

　　官方vue实例：https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar

　　npm指令： npm i gantt-schedule-timeline-calendar

　　官方做了 3 大主流框架的封装，具体看Git链接。不清楚的查看官方示例，接下来主要说核心功能如何配置，这方面官方描述的不是很清楚，但是Git的 issues 好多问题都关闭了，基本大部分问题都可以查到。

1、基础展示，左侧多列表格展示

 这个主要配置config中的 list 属性，

　　rows 代表左侧表格的行属性，key值是每行的id，多个key就有多行，通常都以数字做key值， 内部 具体属性是列信息。比如 order label line 等都是列信息，这个会一一对应到指定列。

　　　　parentID 是父节点配置，一般配置了父节点，就会在 甘特图 中展示出父子层级来。

　　　　expanded 是展开属性，默认false，父子层级是合上的，折叠隐藏子节点。如果想默认展示需要每个节点都加上这个属性。

　　columns 代表左侧表格的列属性，key唯一就是列关键字。

　　　　data 属性，是列，可以有多个属性，每个代表一列

　　　　　　id 当前列的id

　　　　　　data 列标识，和rows中每行的数据的字段唯一对应，比如  order、line 等

　　　　　　isHTML 是否要展示HTML，默认false。  这个直接关系到content、html字段用哪个

　　　　　　width 当前列宽度

　　　　　　expander 是否显示层级，默认false不展示，设置为true，会展示出父子层级来，一般我们仅设置一列，当然设置多列也行。

　　　　　　header 配置表头内容的

　　　　　　　　content 表头想显示的内容

　　　　　　　　html 写HTML，用来订制表头样式的，内容就是HTML，行内css

　　　　percent 是左侧表格总宽度占甘特图的百分比，0就直接隐藏表格

　　　　minWidth：是左侧表格的最小宽度

2、右侧任务排列显示（包括订制样式）

这个主要配置config中的 chart 属性，

 　　time 配置时间轴

　　　　from 左侧开始时间，填写毫秒数

　　　　to 右侧结束时间，填写毫秒数

　　　　zoom 显示层级，10-22，越大，时间粒度展示的越大，越小，显示越精细，最小到5分钟

　　items 任务快配置，注意这个可以同行若干任务展示

　　　　id 当前任务的id

　　　　rowId 左侧表格 rows 的id，通过这个关联，渲染到某一行

　　　　label 当前任务的名称，会默认展示在任务中

　　　　time 任务的开始、结束时间

　　　　　　start 开始时间，填写毫秒数

　　　　　　end 结束时间， 填写毫秒数

　　　　style 订制样式，是个对象，写过jsx写法，写过react 、vue jsx 的应该都不默认，这里举个简单的例子，订制任务div的背景色 圆角等样式  { background: 'red', borderRadius: '3px' }

3、配置右侧横轴的时间显示

 这个主要配置config中的 locale 属性，时间的语言环境配置，这里看文档详细些，下面只详说2个属性，

　　weekdays 配置 每周显示的文案   主要是做国际化用的

　　months 配置月的，也是做国际化的

locale: {

          name: "zh",

          Now: "Now",

          weekdays:["周日","周一","周二","周三","周四","周五","周六"],

          months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

        }

4、监听鼠标右击事件

 这个主要配置config中的 actions 属性，他是对象，以下是他所有能监听dom，很多，这篇博客就只介绍人物块的事件监听，其他的不做一一赘述了

　　这个监听函数会接收2个参数，element  和 data ，一个是dom，另一个是 任务节点的数据。根据官方要求，监听函数必须返回一个对象，此对象必须包含 update  destroy 2个方法，分别是位置更新和销毁时需要执行的方法。

5、任务的横轴、纵轴拖动

这个主要配置config中的 plugins 属性，

　　ItemMovement 插件，这个是官方开发的用来拖拽任务的插件。这个包的插件系统做的很好，官方提供了几种不错的插件，同时还支持其他的第三方插件，有兴趣的可以自己试试，这里先介绍拖拽插件，

 　　　　moveable 拖拽的方向， x 支持横轴拖拽；   y 支持纵轴拖拽；  true 横轴、纵轴都可以拖拽； false 禁止拖拽

　　　　resizeable 是否可以拖拽，true开启拖拽

　　　　resizerContent 拖拽的图标，直接写HTML，可以自己定制拖拽图标的样式

　　　　collisionDetection: 拖拽过程中是否允许元素重叠， true 不允许重叠

　　　　ghostNode  false 不展示重影节点

　　　　snapStart 拖拽开始时间点回调，这个比较机制特殊，拖拽位置的时候触发这个方法，参数接收开始时间  时间变化 当前节点数据，默认是毫秒级的刷新，会卡，我们做if判断1小时拖拽

　　　　snapEnd 拖拽结束时间点回调，这个是拖动任务块大小时触发，接收结束时间 时间段。用法同上。

6、选中任务

这个主要配置config中的 plugins 属性，

　　Selection插件，单个选中、批量选中插件。

　　　　grid 能否选中单元格

　　　　items  能否选中任务

　　　　rows  能否选中行

　　　　rectStyle 矩形样式

　　　　selected 选中的回调

　　　　deselected  取消选中的回调

　　　　canSelected  可选中的的回调，用来过滤哪些可以选中

　　　　canDeselected 可取消选中的回调，用来过滤哪些可以取消选中

小结：

　　以上就是整个甘特图的使用了，这是我用过最符合项目需求的甘特图，他的开发团队也在持续的维护这个项目，很赞。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。