广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总(推荐)
  • 511
分享到

在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总(推荐)

Vue 使用 dhtmlxGantt 组件Vue  dhtmlxGantt 组件vue甘特图 2023-03-19 18:03:51 511人浏览 八月长安
摘要

最近接到需要在页面中引入甘特图,经过多方对比插件甘特图11.Gantt-elastic:一个基于html和CSS的甘特图插件,具有自适应布局和触摸屏支持。2.jsgantt-impr

最近接到需要在页面中引入甘特图,经过多方对比插件
甘特图1
1.Gantt-elastic:一个基于htmlCSS的甘特图插件,具有自适应布局和触摸屏支持。
2.jsgantt-improved:一个基于javascript的甘特图插件,具有灵活的配置选项,支持任务链和资源分配。
3.dhtmlxGantt:一个功能丰富的甘特图插件,支持任务编辑,资源分配和多种视图模式。
4.Jquery Gantt Chart:一个基于jQuery的甘特图插件,支持日期范围选择和任务进度跟踪。
5.FusionCharts Gantt:一个基于图表库FusionCharts的甘特图插件,支持动态数据更新和多种视图模式。
甘特图2
1.Vue-gantt-schedule-timeline:一个基于vue.js的甘特图插件,支持时间轴和事件编辑。
2.vue-gantt:一个基于Vue.js的甘特图插件,支持动态数据更新和任务进度跟踪。
3.vue-dhtmlx-gantt:一个基于dhtmlxGantt的Vue.js甘特图插件,支持任务编辑,资源分配和多种视图模式。
4.vue-fusioncharts-gantt:一个基于FusionCharts Gantt的Vue.js甘特图插件,支持动态数据更新和多种视图模式。

最后选择了 dhtmlxGantt
效果图如下:

因为官方文档全部是英文,所以经过多方查证,总结一下文档中API的用法:

在 Vue 中使用 dhtmlxGantt 组件时,gantt.parse中各个参数代表的意思是什么

gantt.parse() 方法是用于将数据解析为 Gantt 图表的方法。它接受一个包含任务和链接数据的对象作为参数。该对象包含以下属性:

data: 任务数据数组,包含每个任务的信息,例如 id、text、start_date、duration 等等。
links: 链接数据数组,包含每个链接的信息,例如 id、source、target 等等。
key: 任务数据对象中唯一标识每个任务的属性名称,默认为 "id"。
parent: 任务数据对象中用于标识父任务的属性名称,默认为 "parent".
open_tree_initially: 布尔值,如果设置为 true,则所有任务默认展开。
preserve_links: 布尔值,如果设置为 true,则链接信息中的任务不存在时也会保留链接。
preserve_tasks: 布尔值,如果设置为 true,则链接信息中的任务不存在时也会保留任务。

例如,可以使用以下代码将数据解析为 Gantt 图表:

const data = [
  { id: 1, text: "Task 1", start_date: "2023-03-15", duration: 3 },
  { id: 2, text: "Task 2", start_date: "2023-03-18", duration: 2, parent: 1 },
];


const links = [
  { id: 1, source: 1, target: 2, type: "0" },
];

gantt.parse({
  data: data,
  links: links,
});
//其中,data 数组包含两个任务,links 数组包含一个链接,最后将这些数据传递给 gantt.parse() 方法进行解析,即可在 Gantt 图表中显示这些任务和链接。

2.在月刻度下需要从1号开始显示到月底最后一天应该怎么显示,直接上代码

//设置 scale_unit 属性为 month,以显示月刻度
gantt.config.scale_unit = "month";
//设置 step 属性为 1,以每个月显示一个刻度
gantt.config.step = 1;
//设置 date_scale 属性为 %Y-%m-%d,以显示年月日格式的刻度
gantt.config.date_scale = "%Y-%m-%d";
//设置 scale_date 属性为 gantt.date.monthStart,以从每个月的第一天开始显示刻度。
gantt.config.scale_date = gantt.date.monthStart;
//设置 subscale 属性为一个包含两个刻度的对象,分别为 day 和 week。
gantt.config.subscales = [
  { unit: "day", step: 1, date: "%d" },
  { unit: "week", step: 1, date: "#%W" }
];

参考资料:
官方例子
查看官方文档

到此这篇关于在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总的文章就介绍到这了,更多相关Vue 使用 dhtmlxGantt 组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总(推荐)

本文链接: https://www.lsjlt.com/news/200142.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作