vue3 甘特图（一）：选择与初始化甘特图

vue3 甘特图（一）

　　1.功能使用背景：

　　　　　　甘特图是一种项目管理工具，以图形直观的方式显示项目的时间轴和任务计划，为了可扩展和定制相关任务的开发，故此选择dhtmlx-gantt

　　2.vue3 初始化甘特图 gantt

　　　　2.1 下载安装 dhtmlx-gantt 依赖包

npm install dhtmlx-gantt -save

　　　　2.2 引入插件

import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import demoData from './ganttData.json'

　　　　2.3 初始化及其简单配置测试数据

//初始化甘特图
const initGantt = () => {
  gantt.config.grid_width = 350
  gantt.config.add_column = false //添加符号

  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.autofit = false
  gantt.config.row_height = 60
  gantt.config.bar_height = 34
  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  // gantt.config.xml_date = '%Y-%m-%d' //甘特图时间格式
  gantt.config.readonly = true //是否只读
  gantt.i18n.setLocale('cn') //设置语言
  gantt.init('gantt_here')
  gantt.parse(demoData)
}

　　2.4 完整代码

　　index.vue 

<template>
  <section class="my-gantt">
    <div id="gantt_here" class="gantt-container"></div>
  </section>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, watchEffect, defineExpose } from 'vue'

import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import demoData from './ganttData.json'

const data = reactive({})

//初始化甘特图
const initGantt = () => {
  gantt.config.grid_width = 350
  gantt.config.add_column = false //添加符号

  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  gantt.config.autofit = false
  gantt.config.row_height = 60
  gantt.config.bar_height = 34
  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
  gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
  // gantt.config.xml_date = '%Y-%m-%d' //甘特图时间格式
  gantt.config.readonly = true //是否只读
  gantt.i18n.setLocale('cn') //设置语言
  gantt.init('gantt_here')  //初始化
  gantt.parse(demoData)   //填充数据
}

onBeforeMount(() => {})
onMounted(() => {
  initGantt()
})
watchEffect(() => {})
defineExpose({
  ...toRefs(data)
})
</script>
<style scoped lang="scss">
.my-gantt {
  height: 800px;
  width: 100vw;
  .gantt-container {
    width: 100%;
    height: 100%;
  }
}
</style>

　　ganttData.json

{
	"data":[
		{"id":11, "text":"Project #1", "start_date":"28-03-2023", "duration":"11", "progress": 0.6, "open": true},
		{"id":1, "text":"Project #2", "start_date":"01-04-2023", "duration":"18", "progress": 0.4, "open": true},

		{"id":2, "text":"Task #1", "start_date":"02-04-2023", "duration":"8", "parent":"1", "progress":0.5, "open": true},
		{"id":3, "text":"Task #2", "start_date":"11-04-2023", "duration":"8", "parent":"1", "progress": 0.6, "open": true},
		{"id":4, "text":"Task #3", "start_date":"13-04-2023", "duration":"6", "parent":"1", "progress": 0.5, "open": true},
		{"id":5, "text":"Task #1.1", "start_date":"02-04-2023", "duration":"7", "parent":"2", "progress": 0.6, "open": true},
		{"id":6, "text":"Task #1.2", "start_date":"03-04-2023", "duration":"7", "parent":"2", "progress": 0.6, "open": true},
		{"id":7, "text":"Task #2.1", "start_date":"11-04-2023", "duration":"8", "parent":"3", "progress": 0.6, "open": true},
		{"id":8, "text":"Task #3.1", "start_date":"14-04-2023", "duration":"5", "parent":"4", "progress": 0.5, "open": true},
		{"id":9, "text":"Task #3.2", "start_date":"14-04-2023", "duration":"4", "parent":"4", "progress": 0.5, "open": true},
		{"id":10, "text":"Task #3.3", "start_date":"14-04-2023", "duration":"3", "parent":"4", "progress": 0.5, "open": true},

		{"id":12, "text":"Task #1", "start_date":"03-04-2023", "duration":"5", "parent":"11", "progress": 1, "open": true},
		{"id":13, "text":"Task #2", "start_date":"02-04-2023", "duration":"7", "parent":"11", "progress": 0.5, "open": true},
		{"id":14, "text":"Task #3", "start_date":"02-04-2023", "duration":"6", "parent":"11", "progress": 0.8, "open": true},
		{"id":15, "text":"Task #4", "start_date":"02-04-2023", "duration":"5", "parent":"11", "progress": 0.2, "open": true},
		{"id":16, "text":"Task #5", "start_date":"02-04-2023", "duration":"7", "parent":"11", "progress": 0, "open": true},

		{"id":17, "text":"Task #2.1", "start_date":"03-04-2023", "duration":"2", "parent":"13", "progress": 1, "open": true},
		{"id":18, "text":"Task #2.2", "start_date":"06-04-2023", "duration":"3", "parent":"13", "progress": 0.8, "open": true},
		{"id":19, "text":"Task #2.3", "start_date":"10-04-2023", "duration":"4", "parent":"13", "progress": 0.2, "open": true},
		{"id":20, "text":"Task #2.4", "start_date":"10-04-2023", "duration":"4", "parent":"13", "progress": 0, "open": true},
		{"id":21, "text":"Task #4.1", "start_date":"03-04-2023", "duration":"4", "parent":"15", "progress": 0.5, "open": true},
		{"id":22, "text":"Task #4.2", "start_date":"03-04-2023", "duration":"4", "parent":"15", "progress": 0.1, "open": true},
		{"id":23, "text":"Task #4.3", "start_date":"03-04-2023", "duration":"5", "parent":"15", "progress": 0, "open": true}
	],
	"links":[
		{"id":"1","source":"1","target":"2","type":"1"},
		{"id":"2","source":"2","target":"3","type":"0"},
		{"id":"3","source":"3","target":"4","type":"0"},
		{"id":"4","source":"2","target":"5","type":"2"},
		{"id":"5","source":"2","target":"6","type":"2"},
		{"id":"6","source":"3","target":"7","type":"2"},
		{"id":"7","source":"4","target":"8","type":"2"},
		{"id":"8","source":"4","target":"9","type":"2"},
		{"id":"9","source":"4","target":"10","type":"2"},
		{"id":"10","source":"11","target":"12","type":"1"},
		{"id":"11","source":"11","target":"13","type":"1"},
		{"id":"12","source":"11","target":"14","type":"1"},
		{"id":"13","source":"11","target":"15","type":"1"},
		{"id":"14","source":"11","target":"16","type":"1"},
		{"id":"15","source":"13","target":"17","type":"1"},
		{"id":"16","source":"17","target":"18","type":"0"},
		{"id":"17","source":"18","target":"19","type":"0"},
		{"id":"18","source":"19","target":"20","type":"0"},
		{"id":"19","source":"15","target":"21","type":"2"},
		{"id":"20","source":"15","target":"22","type":"2"},
		{"id":"21","source":"15","target":"23","type":"2"}
	]
}

　　　　2.5 效果图预览

　　3.甘特图的选取

　　　　3.1 DHTMLX 甘特图

　　　　　　dhtmlx-gantt 是一个综合性 JavaScript 库，在过去十年中被 Web 开发人员广泛用于在项目管理应用程序中实现甘特图功能。使用这个完全可配置的甘特图组件，开发人员可以提供有效的解决方案来管理基于流行框架和不同服务器端技术的项目中的任务及其依赖项。

　　　　　　可扩展项和相关api比较完整，扩展性高。

　　　github地址：GitHub - DHTMLX/gantt: GPL version of Javascript Gantt Chart

　　　　3.2 Bryntum 甘特图

　　　　　 Bryntum gantt 组件是在先进的 Web 技术的帮助下用 ES 2020 编写的。因此，该工具可以无缝集成到任何基于 Vue.js 或其他流行框架的项目管理应用程序中。但是需要付费。

　　　　　 github地址：GitHub - bryntum/chronograph: A reactive state management system with novel and unique properties

　　　　3.3 Syncfusion 甘特图

　　　　Syncfusion Vue 甘特图已经成为任何基于 Vue 的项目管理应用程序的一个很好的补充。它使开发人员能够提供随时间安排的项目任务的结构良好的可视化，引入必要的更新，并监控项目实施的所有阶段。使用直观的甘特图 UI，可以通过编辑、拖动和调整大小方便地处理任务及其依赖项，以及项目中涉及的资源。但是需要收费，体验效果还可以。

　　　　github地址：GitHub - syncfusion/ej2-javascript-ui-controls: Syncfusion JavaScript UI controls library offer more than 50+ cross-browser, responsive, and lightweight HTML5 UI controls for building modern web applications.

　　　3.4 GSTC 甘特图

　　　　GSTC 允许开发人员不仅使用用于规划和管理任务的甘特图功能来丰富基于 Vue 的应用程序，而且正如其名称所暗示的那样，还使用其他有用的工具：预订系统的时间表、组织活动的时间表或日历不同的使用场景。这个甘特图体验效果也不错，但是可扩展性欠佳。

　　　　地址：Home gantt-schedule-timeline-calendar javascript (typescript) component (neuronet.io)

　　3.5 vue-ganttastic 甘特图

　　　　这是一个基于Vue3的轻量级、易于使用的甘特图组件。具有良好的文档和示例，可帮助你快速入门。使用起来较为轻量，可作为单纯的展示使用，可扩展性欠缺。

　　　　地址：Live Demos | Vue-Ganttastic (zunnzunn.github.io)