前言:
本文基于在较为成熟完整的项目,进行甘特图模块开发的内容。并不涉及node相关下载、安装及vue的相关使用。
1 需安装的模块
npm install dhtmlx-gantt
npm install font-awesome
(1) dhtmlxgantt是进行甘特图开发过程中所用到的插件库,用于跨浏览器和跨平台应用程序的功能较为齐全的Gantt图表。其祖家组件为一个JavaScript库,提供了一套完整的Ajax驱动的UI组件。
(2)font-awesome为图标字体库和css框架。提供了各类css样式。
2 引入模块
import { gantt } from 'dhtmlx-gantt';
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import 'font-awesome/css/font-awesome.min.css';
(1)引用dhtmlxgantt.css样式,显示插件界面;
(2)引用font-awesome.min.css图标,为了显示各种图表插件。
3 设计页面格式内容
(1)前端展示界面设计:
//采用html5的el插件进行前端界面设计
<template>
//建立容器,在容器下存储界面样式与风格
<div class="app-container">
//容器下设计gantt-container,用以装载甘特图界面的显示内容
<div ref="gantt" class="gantt-container"></div>
//调用官方在线接口,设置摁钮方式实现甘特图导出(支持多种常见格式)
<input value="导出PDF" type="button" onclick="gantt.exportToPDF()"/>
<input value="导出Excel" type="button" onclick='gantt.exportToExcel()'/>
<input value="导出Png" type="button" onclick="gantt.exportToPNG()"/>
<input value="载入execl" type="button" onclick="gantt.load()"/>
//自动导入文件并解析为json格式,便于后续开发导入json数组自动生成甘特图。
<form action="https://export.dhtmlx.com/gantt" method="post"
enctype="multipart/form-data">
<input type="file" name="file" />
<input type="" name="type" value="excel-parse"/>
<button type="submit">转为json文件</button>
</form>
</div>
</template>
(2)甘特图显示设计(请参考官方文件(内容很全只是为英文文档):
界面示例,可在线编辑操作,便于学习:Gantt : Samples (dhtmlx.com)
官方学习文档:Gantt API Gantt Docs (dhtmlx.com)
一个网址讲解基本与官方文档一致较为详细:dhtmlxGantt使用教程:如何导出/导入Excel,导出到iCal-控件新闻-慧都网 (evget.com)
一个官方博客,里面解决一些较为复杂的问题,并有示例代码可在线编辑操作:
DHTMLX Blog - DHTMLX JavaScript Library - News, tips, and info.