快速上手

在本教程中，我们将介绍如何使用 @visactor/vtable-gantt 绘制一个简单的甘特图。

获取 @visactor/vtable-gantt

需要注意的是 @visactor/vtable-gantt 是基于 @visactor/vtable 构建的，所以你需要先安装 @visactor/vtable 才能使用 @visactor/vtable-gantt。

你可以通过以下几种方式获取

使用 NPM 包

首先，你需要在项目根目录下使用以下命令安装：


# 使用 npm 安装
npm install @visactor/vtable
npm install @visactor/vtable-gantt

# 使用 yarn 安装
yarn add @visactor/vtable
yarn add @visactor/vtable-gantt

使用 CDN

你还可以通过 CDN 获取构建好的 vtable-gantt 文件。

<script src="https://unpkg.com/@visactor/vtable-gantt/dist/vtable-gantt.min.js"></script>
<script>
  const ganttInstance = new VTableGantt.Gantt(domContainer, option);
</script>

如果需要用到 VTable 或者 VRender 的相关功能如编辑单元格或者自定义渲染，需要注意请使用 VTableGantt.VTable 和 VTableGantt.VRender。

引入 VTable 的能力，如：

// 注册图标或编辑器
VTableGantt.VTable.register.***
// 引用VTable的主题
VTableGantt.VTable.themes.***
// 引用VTable的自定义渲染元素
VTableGantt.VTable.CustomLayout.***

引入 VRender 的图元来实现自定义渲染，如：

// 使用图元Group
VTableGantt.VRender.Group()

引入 VTableGantt

通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 vtable-gantt：

import { Gantt } from '@visactor/vtable-gantt';

const ganttInstance = new Gantt(domContainer, option);

使用 script 标签引入

通过直接在 HTML 文件中添加 <script> 标签，引入构建好的 vtable-gantt 文件：

<script src="https://unpkg.com/@visactor/vtable-gantt/dist/vtable-gantt.min.js"></script>
<script>
  const ganttInstance = new VTableGantt.Gantt(domContainer, option);
</script>

绘制一个简单的甘特图

在绘图前我们需要为 VTableGantt 准备一个具备高宽的 DOM 容器，且这个容器可以相对定位，即需要设置 position 为 'absolute' 或者 'relative'。

请务必保证容器的宽高值为整数，VTable 内部逻辑中会用到容器的 offsetWidth、offsetHeight、clientWidth、clientHeight 属性，如果容器的 width 和 height 为小数会造成取值有误差，可能产生表格抖动问题。

<body>
  <div id="tableContainer" style="position: absolute; width: 600px;height:400px;"></div>
</body>

接下来，我们创建一个 Gantt 实例，传入甘特图配置项：

至此，你已经成功绘制出了一个简单的甘特图！

当最小粒度为天且 unit: 'day'、step: 1 时，可以通过 timelineHeader.weekendColWidth 覆盖周末列宽度（或通过 timelineHeader.hideWeekend 隐藏周末列）。

希望这篇教程对你学习如何使用 Gantt 有所帮助。接下来可以深入了解 vtable-gantt 的各种配置选项，定制出更加丰富多样的表格效果。