您的位置:首页 > 房产 > 建筑 > dhtmlx-gantt甘特图数据展示

dhtmlx-gantt甘特图数据展示

2024/10/5 20:26:48 来源:https://blog.csdn.net/dy1717/article/details/140439951  浏览:    关键词:dhtmlx-gantt甘特图数据展示

官网文档:甘特图文档

实现效果:

首先需要下载 dhtmlx-gantt组件

npm i dhtmlx-gantt
//我项目中使用的是"dhtmlx-gantt": "^8.0.6" 这个版本,不同的版本api或是文档中存在的方法稍有差异

界面引用

<template><div id="ganttPhtot" ref="ganttPhtot" class="gantt-container" style="height:100%" />
</template><script>
import gantt from 'dhtmlx-gantt' //引入组件export default{data() {return {// 甘特图的数据tasks: {data: [],links: []},}}}</script>

调用接口获取数据

methods:{
//获取接口数据getQueryMaturity(){const  {data} = await getMatuity()this.tasks.data = data.row gantt.clearAll() //清空甘特图数据//gantt.config.scales 这个是设置时间的,根据项目需要,设计年月,或者周天         gantt.config.scales = [// { unit: 'day', step: 1, date: '%d %M' }// { unit: 'year', step: 1, format: '%Y' } // 显示年份{ unit: 'year', step: 1, format: '%Y' }, // 显示年份{ unit: 'month', step: 1, format: '%M' } // 显示月份]gantt.locale = {date: {month_full: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'],month_short: ['一', '二', '三', '四', '五', '六','七', '八', '九', '十', '十一', '十二']},/* 更多自定义标签可以在这里添加 */labels: {new_task: '新任务',icon_save: '保存',icon_cancel: '取消',icon_details: '详情',icon_edit: '编辑',icon_delete: '删除',confirm_closing: '', // 你可以自定义确认关闭的提示信息confirm_deleting: '是否确定删除任务?',section_description: '描述',section_time: '时间范围',text: '任务',start_date: '开始时间',end_date: '结束时间',duration: '计划时间'}// 自动延长时间刻度gantt.config.fit_tasks = true// 不允许拖放gantt.config.drag_project = falsegantt.config.calendar_property = 'start_date'gantt.config.calendar_property = 'end_date'//这里是我项目需要阻止双击出现弹窗可以新增任务,按照需求自行设置gantt.attachEvent('onTaskDblClick', function(id, e) {return false // 阻止默认双击行为})gantt.init(this.$refs.ganttPhtot) //初始化甘特图gantt.parse(this.tasks) //将甘特图数据存放进去}}
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com