甘特图自定义渲染能力

在本教程中，我们将介绍如何使用 @visactor/vtable-gantt 的自定义能力绘制甘特图。

准备工作

导入自定义图元内容，因为安装的@visactor/vtable 已经包含了渲染引擎 VRender 库的图元类型，我们可以直接从中导入。

import { Group, Image, Text, Tag } from '@visactor/vtable/es/vrender';
or;
import * as VRender from '@visactor/vtable/es/vrender';

左侧任务信息表格单元格自定义渲染

因为左侧是一个完整的 ListTable，所以可直接参照在 ListTable 中自定义渲染教程。

自定义渲染日期表头

具体配置对应的字段[timelineHeader.scales.customLayout](<../../option/Gantt#timelineHeader.scales(Array).customLayout>)

customLayout 是一个自定义函数：

(args: DateCustomLayoutArgumentType) => IDateCustomLayoutObj;

参数说明

函数参数由 Gantt 组件提供，包含了渲染的任务条的尺寸，以及日期信息。具体为：

export type DateCustomLayoutArgumentType = {
  width: number;
  height: number;
  index: number;
  /** 当期日期属于该日期刻度的第几位。如季度日期中第四季度 返回4。 */
  dateIndex: number;
  title: string;
  startDate: Date;
  endDate: Date;
  days: number;
  ganttInstance: Gantt;
};

返回值说明

返回值需要包含一个 VRender 的 Group 容器对象，这个 rootContainer 中要包括你需要在日期表头显示的具体内容结构。

export type IDateCustomLayoutObj = {
  rootContainer: Group;
  renderDefaultText?: boolean; // 是否渲染正常非自定义的文本，默认false
};

VRender 的各个图元可以理解成一个 dom 树形结构，每个图元都有一个父容器，父容器可以包含多个子图元。常用的图元类型及其配置可以具体参考 VRender配置文档：

VRender Element Type

demo

具体可以参照 demo：

自定义渲染任务条 taskBar

具体配置对应的字段taskBar.customLayout

customLayout 是一个自定义函数：

 (args: TaskBarCustomLayoutArgumentType) => ITaskBarCustomLayoutObj;

参数说明

函数参数由 Gantt 组件提供，包含了渲染的任务条的尺寸，以及任务条的数据信息。具体为：

export type TaskBarCustomLayoutArgumentType = {
  width: number;
  height: number;
  index: number;
  startDate: Date;
  endDate: Date;
  taskDays: number;
  progress: number;
  taskRecord: any;
  ganttInstance: Gantt;
};

返回值说明

返回值需要包含一个 VRender 的 Group 容器对象，这个 rootContainer 中要包括你需要在任务条中显示的具体内容结构。

export type ITaskBarCustomLayoutObj = {
  rootContainer: Group;
  renderDefaultBar?: boolean; // 默认false
  renderDefaultResizeIcon?: boolean; // 默认false
  renderDefaultText?: boolean; // 默认false
};

VRender Element Type

自定义图元事件监听

VRender 的图元支持配置事件监听，如下代码逻辑：

      const avatar = new VTableGantt.VRender.Image({
        width: 50,
        height: 50,
        image: taskRecord.avatar,
        cornerRadius: 25
      });
      // 鼠标悬浮到头像上时，显示tooltip 显示负责人名字
      avatar.addEventListener('mouseenter',event => {
        console.log('enter');
        const containerRect = document.getElementById(CONTAINER_ID).getBoundingClientRect();
        debugger;
        const targetX=event.target.globalAABBBounds.x1;
        const targetY=event.target.globalAABBBounds.y1;
        showTooltip([taskRecord.developer],ganttInstance.taskTableWidth+ targetX+containerRect.left, targetY+containerRect.top+50);
      });

demo

具体可以参照 demo：