@visactor/vtable-gantt
v1.11.1
Published
canvas table width high performance
Downloads
1,804
Readme
VTable-Gantt 打造高效、灵活的甘特图解决方案,让项目管理更轻松。通过简单的配置和自定义布局,快速上手并满足各种复杂需求。提升团队协作效率,实现项目进度透明化。.
简体中文| English
(video)
介绍
VTable-Gantt 是 VisActor 可视化体系中的甘特图组件库,基于表格组件VTabe和可视化渲染引擎 VRender 进行封装。它专为项目管理和任务跟踪设计,提供了强大的可视化和交互功能。核心能力如下:
- 高效性能:支持大规模项目数据的快速运算与渲染,确保流畅的用户体验。
- 灵活布局:支持自定义时间轴、任务条样式和布局,满足不同项目管理需求。
- 强大交互:提供任务的拖拽、缩放和编辑功能,简化项目管理操作。
- 丰富的可视化能力:支持信息单元格及任务条的自定义渲染,提供树形结构展示,提升数据展示的多样性和直观性。
代码仓库介绍
主要包含以下几个子项目:
- packages/vtable:表格组件代码
- packages/vtable-gantt: 甘特图组件代码
- packages/vtable-editors: 表格编辑器组件代码
- packages/vtable-export: 表格导出工具代码
- packages/vtable-search: 表格搜索工具代码
- packages/react-vtable: React 版本的表格组件
- packages/vue-vtable: Vue 版本的表格组件
- docs: 教程文档
用法
安装
// npm
npm install @visactor/vtable-gantt
// yarn
yarn add @visactor/vtable-gantt
快速上手
import {Gantt} from '@visactor/vtable-gantt';
const records = [
{
id: 1,
title: 'Task 1',
developer: '[email protected]',
start: '2024-07-24',
end: '2024-07-26',
progress: 31,
priority: 'P0',
},
{
id: 2,
title: 'Task 2',
developer: '[email protected]',
start: '07/24/2024',
end: '08/04/2024',
progress: 60,
priority: 'P0'
},
{
id: 3,
title: 'Task 3',
developer: '[email protected]',
start: '2024-08-04',
end: '2024-08-04',
progress: 100,
priority: 'P1'
},
{
id: 4,
title: 'Task 4',
developer: '[email protected]',
start: '2024-07-26',
end: '2024-07-28',
progress: 31,
priority: 'P0'
}
];
const columns = [
{
field: 'title',
title: 'title',
width: 'auto',
sort: true,
tree: true,
editor: 'input'
},
{
field: 'start',
title: 'start',
width: 'auto',
sort: true,
editor: 'date-input'
},
{
field: 'end',
title: 'end',
width: 'auto',
sort: true,
editor: 'date-input'
}
];
const option = {
overscrollBehavior: 'none',
records,
taskListTable: {
columns,
},
taskBar: {
startDateField: 'start',
endDateField: 'end',
progressField: 'progress'
},
timelineHeader: {
colWidth: 100,
backgroundColor: '#EEF1F5',
horizontalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
verticalLine: {
lineWidth: 1,
lineColor: '#e1e4e8'
},
scales: [
{
unit: 'day',
step: 1,
format(date) {
return date.dateIndex.toString();
},
style: {
fontSize: 20,
fontWeight: 'bold',
color: 'white',
strokeColor: 'black',
textAlign: 'right',
textBaseline: 'bottom',
backgroundColor: '#EEF1F5'
}
}
]
},
};
const ganttInstance = new Gantt(document.getElementById(CONTAINER_ID), option);
相关链接
生态系统
| Project | Description | | ----------------------------------------------------------- | -------------------------------------------------------------------------------------- | | AI-generated Components | AI-generated table component. |
参与贡献
细流成河,终成大海!