js甘特图插件(ant-gantt)
在项目管理中，甘特图的可视化操作界面，可以让项目规划与风险把控更便捷与清晰，同时该插件是一款基于HTML5、javasrcipt的一款js插件，支持在当前主流的前端框架中接入。
js甘特图插件效果图：
js甘特图插件如何使用
1、下载插件
甘特图官网地址：Open Source Javascript Gantt (frappe.io)，
2、导入项目
将下载到的sdk拷贝至项目工程目录，如拷贝至：
externalSdk/ant-gantt/index.js
externalSdk/ant-gantt/index.css
3、开发实践
3.1 原生js嵌入
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#ant-gantt {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" type="text/css" href="/externalSdk/ant-gantt/index.css"/>
<script type="text/javascript" src="/externalSdk/ant-gantt/index.js" defer></script>
</head>
<body>
<div id="ant-gantt"></div>
</body>
</html>
// grid视图列自定义
const columns = [
{
title: '编号',
dataIndex: 'wbs',
width: 48,
},
{
title: '任务名称',
dataIndex: 'name',
width: 200
},
];
const config = { mode: 'day', grid: { columns } };
// 对象实例化
const instance = new Gantt('#ant-gantt', config);
// 数据渲染
const data = [
{
id: 'task.1',
editable: true,
wbs: '2',
milestone:"1",
name: '任务01',
fzr: 'x先生',
type: 't',
status: 2,
beginTime: "2021-06-02",
children: []
},
];
instance.render(data);
3.2 react嵌入
import React from 'react';
import ReactDOM from 'react-dom'
import AntGantt from '@/externalSdk/ant-gantt'; // @为项目资源目录的alias
import '@/externalSdk/ant-gantt/index.css';
const GanttView = (props) => {
const gridRef = React.useRef(null);
const handleClick = (record) => {
console.log(record);
};
React.useLayoutEffect(() => {
const columns = [
{
title: '编号',
dataIndex: 'wbs',
width: 48,
},
{
title: '任务名称',
dataIndex: 'name',
width: 200,
render: (text, record) => {
/* 渲染react节点
** 如果渲染节点存在异步交互，需要传递callback
*/
return (node, callback) => {
ReactDOM.render(
<span onClick={() => handleClick(record)}>{text}</span>,
node,
callback
);
};
}
},
{
title: '负责人',
dataIndex: 'fzr',
width: 120,
}
];
const config = {
mode: 'day',
grid: {
collapseIndex: 1,
columns
}
};
gridRef.current = new AntGantt('#ant-gantt', config);
}, []);
React.useEffect(() => {
Promise.resolve().then(() => {
const data = [
{
id: 'task.1',
editable: true,
wbs: '2',
milestone:"1",
name: '任务01',
fzr: 'x先生',
type: 't',
status: 2,
beginTime: "2021-06-02",
children: []
},
];
const instance = gridRef.current;
instance.render(data);
})
return () => instance && instance.destroy();
}, []);
return (
<div id="ant-gantt"></div>
);
};
export default GanttView;
3.3 vue2嵌入
<template>
<div id="gantt"></div>
</template>
<style scoped>
.m-gantt {
width: 100%;
height: 100%;
}
</style>
<script>
import AntGantt from '@/externalSdk/ant-gantt';
import '@/externalSdk/ant-gantt/index.css';
export default {
data() {
return {
config: {
mode: 'day',
grid: {
collapseIndex: 1
}
}
}
},
mounted() {
this.init()
},
beforeDestroy() {
this.gInstance?.destroy();
},
methods: {
init() {
const { grid } = this.config;
grid.columns = this.getColumns();
this.gInstance = new AntGantt('#gantt', this.config);
this.getData().then(data => this.gInstance.render(data));
},
getColumns() {
return [
{
title: '编号',
dataIndex: 'wbs',
width: 48,
},
{
title: '任务名称',
dataIndex: 'name',
width: 200,
render: (text, record) => {
const el = document.creactElement('span');
span.innerText = text;
el.onClick = () => {
this.handleClick(record);
};
return el;
}
},
];
},
getData() {
return Promise.resolve([
{
id: 'task.1',
editable: true,
wbs: '2',
milestone:"1",
name: '任务01',
fzr: 'x先生',
type: 't',
status: 2,
beginTime: "2021-06-02",
children: []
},
]);
}
}
}
</script>
数据格式（dataItem）
1、基本类型
type为i、t、itemNew时，通用的节点字段
参数 说明 类型 默认值
id 节点id - 必填 string 必填项
name 节点名称 string 必填项
type 节点类型 i - 组节点、t - 节点、itemNew - 临时节点(基本字段同类型t) 必填项
total 子节点数量 number -
children 子节点列表 dataItem[] -
hasMore 是否有更多子节点 - 用于显示加载更多 boolean -
isLeaf 是否是叶子节点 - 用于显示是否可展开 boolean -
2、标准类型（type === t）
参数 说明 类型 默认值
beginTime 计划开始日期 string -
endTime 计划结束日期 string -
realityBeginTime 实际开始日期 string -
realityEndTime 实际结束日期 string -
rangeBeginTime 范围开始日期 - 自身以及子节点时的日期范围 string -
rangeEndTime 范围结束日期 - 自身以及子节点时的日期范围 string -
milestone 是否是里程碑 boolean -
status 节点状态，字段名称可由calendarConfig.statusKey定义 string -
createFS/createSF/createFF createSS 是否可关联不同的节点关系 boolean -
FS/SF/FF/SS 节点关系 object[] -
disabled 是否可编辑 Boolean -
3、分组类型（type === i）
该数据类型，只显示gridConfig.expandedWidthKey配置的字段
参数 说明 类型 默认值
rangeBeginTime 范围开始日期 - 自身以及子节点时的日期范围 string -
rangeEndTime 范围结束日期 - 自身以及子节点时的日期范围 string -
配置相关
1、基础配置 - config
参数 说明 类型 默认值
locale 显示语言 - zh-CN、en-US、zh-TW string zh-CN
mode 视图类型 - year、halfYear、season、month、week、day string day
format 日期格式 string YYYY-MM-DD
rowKey 数据的唯一键值 string id
showExpand 是否可展开 boolean true
expandedKeys 展开的节点 rowKey[] []
collapse 表格视图是否可收起 boolean true
parentChild 父子节点是否可关联 boolean false
autoPairing 是否开启自动编排，开启后， boolean false
colWidth 列宽 - 描述一天表示的宽度 number 32
rowHeight 行高 - 描述数据行的高度 number 32
hasMore 是否有更多数据 boolean false
loadMore 是否支持加载更多 boolean false
loadMoreText 显示文案 string 加载更多
grid 表格视图配置项 gridConfig 详细配置
calendar 日期视图配置项 calendarConfig 详细配置
link 关联关系 linkConfig 详细配置
resizer 列调节器 resizerConfig 详细配置
exportImg 导出甘特图，可导出png图片。size为支持的图片大小，name导出图片的名称 (size, name) => Promise<{url, name, …other}> -
onExpand 展开收起子节点的回调 (expandedKeys, row) => void -
onCollapse 展开/收起表格视图的回调 (collapse) => void -
onLoadMore 点击加载更多是，加载数据的回调 (record) => void -
onLoadData 节点展开时，加载数据的回调 (record) => void -
onItemClick 点击行时的回调 (record) => void -
onItemLinkChange 关联关系发生变化时的回调, 第二个参数err，提供回调函数onError，当异步更新失败后，调用onError来重置数据状态 (linkData, err) => void -
onItemChange 数据发生变化时的回调, 第二个参数err，提供回调函数onError，当异步更新失败后，调用onError来重置数据状态 (params, record, err) => void -
2、表格配置 - gridConfig
参数 说明 类型 默认值
show 是否显示表格 boolean true
columns 表格列，如果show为true，该值不能为空 columnType[] 详细配置
layout 表格列是否可拖拽 boolean true
width 表格最大宽度。超出时，则支持滚动 number 400
defColW 默认列宽 - 每列最小宽度 number 80
expandedWidthKey 支持展开的列字段 string name
collapseIndex 收起时，显示列的位置 number 1
2.1 列配置 - columnType
参数 说明 类型 默认值
name 列名称 string -
dataIndex 列字段，唯一值 string -
width 自定义列宽 number 80
hidden 列是否显示 boolean false
render 自定义渲染方法 (text, record) => string ｜htmlElement | function -
// function 使用方法
render = (text, record) => {
return (node, callback) => {
// node为当前数据行在该列的容器
// callback为异步渲染的回调方法，具体可参考开发用例
Promise.resolve().then(() => {
node.appendChild(document.createElement('div'));
callback && callback();
});
};
}
3、日历配置 - calendarConfig
参数 说明 类型 默认值
showYear 是否显示年份 boolean true
beginTime 描述项目的开始日期，在视图上绘制起始线 string -
endTime 描述项目的结束日期，在视图上绘制截止线 string -
statusKey 视图色块对应的DataItem字段 string status
statusMap 不同状态，对应的颜色 string[] [“#16AD31”, “#B5C5CD”, “#4463ED”, “#1990FF”, “#DCDADD”, “#DCDADD”, “#DCDADD”, “#F6313B”, “#B5C5CD”, “#B5C5CD”, “#88AD8E”]
showTimeline 是否显示当前时间线 boolean true
endTimePlaceholder 超出结束日期的提示文案 string ‘’
getDisableDate 获取非工作日期的方法 (beginTime, endTime) => (YYYY-MM-DD)[] 默认以周六、周日为节点日
4、列调节器 - resizerConfig
参数 说明 类型 默认值
show 是否显示调节器 boolean true
width 调节器占位宽度 number 20
5、关联关系配置 - linkConfig
参数 说明 类型 默认值
type 可关联的关系类型，默认为空，支持全部关系 FS/FF/SF/SS ‘’
typesMap 不同关联关系类型对应的字段映射 typeMap[] 详细配置
show 是否显示操作栏 boolean true
delayConfig 延迟项配置 delayConfig 详细配置
deleteConfig 删除项配置 deleteConfig 详细配置
5.1 typeMap
参数 说明 类型 默认值
type 关联关系类型 FS/FF/SF/SS ‘’
field 关联关系类型对应的字段 string FS/FF/SF/SS
5.2 delayConfig
参数 说明 类型 默认值
min 延迟最小值 number 0
max 延迟最大值 number 99
decimals 延迟值的精确度 number 0
show 是否显示延迟操作栏 boolean true
5.3 deleteConfig
参数 说明 类型 默认值
show 是否显示删除栏 boolean true
api 相关
destroy
// 用于实例内部事件的销毁，以及实例dom的卸载
const instance = new AntGantt('#app', { grid: { show: false } });
instance.destroy();
render
// 当数据以及配置都更新时，需要调用render重新渲染
const instance = new AntGantt('#app', { grid: { show: false } });
const data = [];
const config = {};
instance.render(data, config);
refresh
// 数据更新时属性
const instance = new AntGantt('#app', { grid: { show: false } });
const data = [];
instance.refresh(data, { expandKeys: [] });
updateConfig
// 更新配置项, 但是不会刷新视图
const instance = new AntGantt('#app', { grid: { show: false } });
const config = { showYear: false };
instance.updateConfig(config);
refreshConfig
// 视图数据更新
const instance = new AntGantt('#app', { grid: { show: false } });
const config = { showYear: false };
/* viewType: null、Grid、Calendar
** viewType为空时，表格、日期都会刷新
*/
const viewType = null;
instance.refreshConfig(config, viewType);~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
js甘特图插件使用方式二：
首先将frappe gantt的js以及css文件复制到项目中，可以直接去gantt/dist at master · frappe/gantt · GitHub中下载项目，将项目中的dist文件复制到项目中
更改frappe-gantt.js文件，在末尾添加导出，这样就可以在vue界面直接
export default Gantt
界面引入js文件以及css样式文件 注意：这里的文件路径请根据自己项目的实际情况进行更改
import Gantt from '@/assets/js/frappe-gantt'
@import'~@/assets/js/frappe-gantt.css';
js甘特图插件效果如下：
<!--甘特图-->
<template>
<div>
<el-row>
<el-col :span="6">
<div>
<div>
<span>生产计划列表</span> |
</div>
<div
v-for="(item, index) in tasks"
:id="'task-item-' + item.id"
:key="index"
:class="{'fill-bg': (index % 2 !== 0), 'task-item': true}"
>
{{ item.name }}
</div>
</div>
</el-col>
<el-col :span="18">
<!--甘特图-->
<div />
</el-col>
</el-row>
</div>
</template>
<script>
import { reactive, toRefs, onMounted } from 'vue'
import Gantt from '@/assets/js/frappe-gantt'
export default {
setup() {
const vueConfig = reactive({
tasks: [{
start: '2022-06-01',
end: '2022-06-08',
name: '测试任务1',
id: '1',
progress: 0
},
{
start: '2022-06-03',
end: '2022-06-06',
name: '测试任务2',
id: '2',
progress: 0,
dependencies: '1'
},
{
start: '2022-06-04',
end: '2022-06-08',
name: '测试任务3',
id: '3',
progress: 0,
dependencies: '1'
},
{
start: '2022-06-08',
end: '2022-06-09',
name: '测试任务4',
id: '4',
progress: 0,
dependencies: '2'
},
{
start: '2022-06-08',
end: '2022-06-10',
name: '测试任务5',
id: '5',
progress: 0,
dependencies: '2'
}],
gantt: null
})
onMounted(() => {
const gantt = new Gantt('.gantt-target', vueConfig.tasks, {
on_click: function(task) {
console.log('我点击了', task)
},
on_date_change: function(task, start, end) {
console.log(task, start, end)
},
on_progress_change: function(task, progress) {
console.log(task, progress)
},
on_view_change: function(mode) {
console.log(mode)
},
view_mode: 'Day',
language: 'zh'
})
console.log('gantt111', gantt)
})
return {
...toRefs(vueConfig)
}
}
}
</script>
<style scoped>
@import'~@/assets/js/frappe-gantt.css';
.gantt-container {
background-color: transparent;
}
.gantt-tasks {
background-color: #fff;
}
.task-item {
height: 38px;
font-size: 14px;
padding-left: 15px;
border-bottom: 2px solid #F5F7F8;
line-height: 38px;
}
.tasks-header {
height: 60px;
padding-left: 15px;
line-height: 60px;
border-bottom: 2px solid #E9E9E9;
}
.details-container {
width: 200px;
}
.fill-bg {
background-color: #f5f5f5;
}
.task-date .el-date-editor {
width: 100%;
margin-top: 5px;
border-bottom: none;
}
.task-name {
color: #000;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90%;
text-align: left;
}
.task-name:hover {
color: #8FBC8F;
}
.task-progress {
margin-top: 5px;
}
</style>
同类软件
土粉评论
暂无评论