1 什么是甘特图 甘特图(Gantt chart)又称为横道图、条状图(Bar chart)。以提出者亨利·L·甘特先生的名字命名，是项目管理、生产排程、节点管理中非常常见的一个功能。 甘特图内在思想简单，即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。基本是一条线条图，横轴表示时间，纵轴表示活动(项目)，线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。管理者由此可便利地弄清一项任务(项目)还剩下哪些工作要做，并可评估工作进度。
2 为什么要用甘特图 在很多较大且时间跨度较长的工程、IT、市场营销、电商运营等项目中，都会涉及诸多对人员、时间、质量等方面的控制，而且很多时候还需要跨部门进行协作，所以，如何把控整个项目管理流程就显得非常重要。 而使用甘特图就可以实现这样一个目的。
3 前端vue实现甘特图 3.1 DHTMLX 甘特图 dhtmlx-gantt 是一个综合性 JavaScript 库，在过去十年中被 Web 开发人员广泛用于在项目管理应用程序中实现甘特图功能。使用这个完全可配置的甘特图组件，开发人员可以提供有效的解决方案来管理基于流行框架和不同服务器端技术的项目中的任务及其依赖项。 可扩展项和相关api比较完整，并且免费、扩展性高。 github地址：github.com/DHTMLX/gant…
dhtmlxGantt是一款JavaScript编写的甘特图控件，帮助开发人员进行项目的可视化展示和安排，通过该控件可以在任务之间设置不同的关系，提供的大量的API和事件处理可以帮助开发人员根据自身需要进行高度自定义和设置。支持过滤和放大、时间比例、最短路径、显示隐藏列、导出数据、加载大数据集等多种功能。
图一：dhtmlx-gantt实现甘特图demo图
3.2 使用dhtmlx-gantt甘特图
3.2.1 下载安装
npm install dhtmlx-gantt -save
import { gantt } from 'dhtmlx-gantt' // 组件插件
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css' // 组件样式
配置属性
gantt.config: { task_height: 28, //时间轴图表中，任务条形图的高度 row_height: 36, //时间轴图表中，甘特图的高度 add_column: true, // 添加符号 auto_types: true, //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务 xml_date: '%Y-%m-%d', //从后端过来的数据格式化 show_grid: false, //是否显示左侧树表格 autosize: true, //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务 date_format: "%Y-%m-%d-%H", //日期格式化 autofit: true, //左侧自适应 grid_width: 500, //左侧宽 drag_links: true, //是否连线 readonly: false, //只读 resize_rows: true, //允许调整行高 select_task: true, //右侧显示列名 scales: [ { unit: "day", step: 1, format: "%Y-%m-%d" }, { unit: "hour", step: 1, format: "%Y-%m-%d %H" }, { unit: "minute", step: 1, format: "%Y-%m-%d %H:%i" }, { unit: "second", step: 1, format: "%Y-%m-%d %H:%i:%s" }, { unit: "week", step: 1, format: "%Y-%m-%d %H:%i" }, { unit: "month", step: 1, format: "%Y-%m" }, { unit: "year", step: 1, format: "%Y" }, ], // 右侧时间格式 fit_tasks: true, //自动调整图表坐标轴区间用于适配task的长度 wide_form: false, //弹窗宽 } // 汉化 gantt.locale = { date: { month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], day_short: ["日", "一", "二", "三", "四", "五", "六"] }, labels: { dhx_cal_today_button: "今天", day_tab: "日", week_tab: "周", month_tab: "月", new_event: "新建日程", icon_save: "保存", icon_cancel: "关闭", icon_details: "详细", icon_edit: "编辑", icon_delete: "删除", confirm_closing: "请确认是否撤销修改!", confirm_deleting: "是否删除计划?", section_description: "描述:", section_time: "时间范围:", section_type: "类型", section_text: "任务名称:", section_color: "颜色:",
/* grid columns */
column_text: "计划名称",
column_start_date: "开始时间",
column_duration: "持续时间",
column_add: "",
/* link confirmation */
link: "关联",
confirm_link_deleting: "将被删除",
link_start: " (开始)",
link_end: " (结束)",
type_task: "任务",
type_project: "项目",
type_milestone: "里程碑",
minutes: "分钟",
hours: "小时",
days: "天",
weeks: "周",
months: "月",
years: "年"
} }
// 鼠标操作甘特图--悬浮显示详情、拖动条目、拖动图等配置 gantt.plugins({ click_drag: true,//用于启用或禁用通过单击任务条目并拖动来更改任务的开始和结束日期的功能 drag_timeline: true,// 拖动图 marker: true,// 时间标记 fullscreen: true,// 全屏 tooltip: true,// 鼠标经过时信息 undo: true // 允许撤销 })
