介绍

VTable-Gantt 是 VisActor 可视化体系中的甘特图组件库，基于表格组件VTabe和可视化渲染引擎 VRender 进行封装。它专为项目管理和任务跟踪设计，提供了强大的可视化和交互功能。核心能力如下：

1. 高效性能：支持大规模项目数据的快速运算与渲染，确保流畅的用户体验。
2. 灵活布局：支持自定义时间轴、任务条样式和布局，满足不同项目管理需求。
3. 强大交互：提供任务的拖拽、缩放和编辑功能，简化项目管理操作。
4. 丰富的可视化能力：支持信息单元格及任务条的自定义渲染，提供树形结构展示，提升数据展示的多样性和直观性。

代码仓库介绍

主要包含以下几个子项目:

1. packages/vtable：表格组件代码
2. packages/vtable-gantt: 甘特图组件代码
3. packages/vtable-editors: 表格编辑器组件代码
4. packages/vtable-export: 表格导出工具代码
5. packages/vtable-search: 表格搜索工具代码
6. packages/react-vtable: React 版本的表格组件
7. packages/vue-vtable: Vue 版本的表格组件
8. docs: 教程文档

用法

安装

npm package

1// npm
2npm install @visactor/vtable-gantt
3
4// yarn
5yarn add @visactor/vtable-gantt

快速上手

1import {Gantt} from '@visactor/vtable-gantt';
2
3const records = [
4  {
5    id: 1,
6    title: 'Task 1',
7    developer: 'liufangfang.jane@bytedance.com',
8    start: '2024-07-24',
9    end: '2024-07-26',
10    progress: 31,
11    priority: 'P0',
12  },
13  {
14    id: 2,
15    title: 'Task 2',
16    developer: 'liufangfang.jane@bytedance.com',
17    start: '07/24/2024',
18    end: '08/04/2024',
19    progress: 60,
20    priority: 'P0'
21  },
22  {
23    id: 3,
24    title: 'Task 3',
25    developer: 'liufangfang.jane@bytedance.com',
26    start: '2024-08-04',
27    end: '2024-08-04',
28    progress: 100,
29    priority: 'P1'
30  },
31  {
32    id: 4,
33    title: 'Task 4',
34    developer: 'liufangfang.jane@bytedance.com',
35    start: '2024-07-26',
36    end: '2024-07-28',
37    progress: 31,
38    priority: 'P0'
39  }
40];
41
42const columns = [
43  {
44    field: 'title',
45    title: 'title',
46    width: 'auto',
47    sort: true,
48    tree: true,
49    editor: 'input'
50  },
51  {
52    field: 'start',
53    title: 'start',
54    width: 'auto',
55    sort: true,
56    editor: 'date-input'
57  },
58  {
59    field: 'end',
60    title: 'end',
61    width: 'auto',
62    sort: true,
63    editor: 'date-input'
64  }
65];
66const option = {
67  overscrollBehavior: 'none',
68  records,
69  taskListTable: {
70    columns,
71  },
72  taskBar: {
73    startDateField: 'start',
74    endDateField: 'end',
75    progressField: 'progress'
76  },
77  timelineHeader: {
78    colWidth: 100,
79    backgroundColor: '#EEF1F5',
80    horizontalLine: {
81      lineWidth: 1,
82      lineColor: '#e1e4e8'
83    },
84    verticalLine: {
85      lineWidth: 1,
86      lineColor: '#e1e4e8'
87    },
88    scales: [
89      {
90        unit: 'day',
91        step: 1,
92        format(date) {
93          return date.dateIndex.toString();
94        },
95        style: {
96          fontSize: 20,
97          fontWeight: 'bold',
98          color: 'white',
99          strokeColor: 'black',
100          textAlign: 'right',
101          textBaseline: 'bottom',
102          backgroundColor: '#EEF1F5'
103        }
104      }
105    ]
106  },
107};
108const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);
109

更多 demo 和详细教程

相关链接

• 官网

生态系统

Project	Description
AI-generated Components	AI-generated table component.

参与贡献

如想参与贡献，请先阅读 行为准则 和 贡献指南。

细流成河，终成大海！

许可证

MIT 协议