您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“在Vue中使用dhtmlxGantt組件時(shí)遇到的問(wèn)題怎么解決”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“在Vue中使用dhtmlxGantt組件時(shí)遇到的問(wèn)題怎么解決”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
最近接到需要在頁(yè)面中引入甘特圖,經(jīng)過(guò)多方對(duì)比插件
甘特圖1
1.Gantt-elastic:一個(gè)基于HTML和CSS的甘特圖插件,具有自適應(yīng)布局和觸摸屏支持。
2.jsgantt-improved:一個(gè)基于JavaScript的甘特圖插件,具有靈活的配置選項(xiàng),支持任務(wù)鏈和資源分配。
3.dhtmlxGantt:一個(gè)功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式。
4.jQuery Gantt Chart:一個(gè)基于jQuery的甘特圖插件,支持日期范圍選擇和任務(wù)進(jìn)度跟蹤。
5.FusionCharts Gantt:一個(gè)基于圖表庫(kù)FusionCharts的甘特圖插件,支持動(dòng)態(tài)數(shù)據(jù)更新和多種視圖模式。
甘特圖2
1.vue-gantt-schedule-timeline:一個(gè)基于Vue.js的甘特圖插件,支持時(shí)間軸和事件編輯。
2.vue-gantt:一個(gè)基于Vue.js的甘特圖插件,支持動(dòng)態(tài)數(shù)據(jù)更新和任務(wù)進(jìn)度跟蹤。
3.vue-dhtmlx-gantt:一個(gè)基于dhtmlxGantt的Vue.js甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式。
4.vue-fusioncharts-gantt:一個(gè)基于FusionCharts Gantt的Vue.js甘特圖插件,支持動(dòng)態(tài)數(shù)據(jù)更新和多種視圖模式。
最后選擇了 dhtmlxGantt
效果圖如下:
因?yàn)楣俜轿臋n全部是英文,所以經(jīng)過(guò)多方查證,總結(jié)一下文檔中API的用法:
在 Vue 中使用 dhtmlxGantt 組件時(shí),gantt.parse中各個(gè)參數(shù)代表的意思是什么
gantt.parse() 方法是用于將數(shù)據(jù)解析為 Gantt 圖表的方法。它接受一個(gè)包含任務(wù)和鏈接數(shù)據(jù)的對(duì)象作為參數(shù)。該對(duì)象包含以下屬性:
data: 任務(wù)數(shù)據(jù)數(shù)組,包含每個(gè)任務(wù)的信息,例如 id、text、start_date、duration 等等。 links: 鏈接數(shù)據(jù)數(shù)組,包含每個(gè)鏈接的信息,例如 id、source、target 等等。 key: 任務(wù)數(shù)據(jù)對(duì)象中唯一標(biāo)識(shí)每個(gè)任務(wù)的屬性名稱(chēng),默認(rèn)為 "id"。 parent: 任務(wù)數(shù)據(jù)對(duì)象中用于標(biāo)識(shí)父任務(wù)的屬性名稱(chēng),默認(rèn)為 "parent". open_tree_initially: 布爾值,如果設(shè)置為 true,則所有任務(wù)默認(rèn)展開(kāi)。 preserve_links: 布爾值,如果設(shè)置為 true,則鏈接信息中的任務(wù)不存在時(shí)也會(huì)保留鏈接。 preserve_tasks: 布爾值,如果設(shè)置為 true,則鏈接信息中的任務(wù)不存在時(shí)也會(huì)保留任務(wù)。
例如,可以使用以下代碼將數(shù)據(jù)解析為 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 }, ]; /* gantt.parse 方法中的 data 參數(shù)是一個(gè)包含任務(wù)信息的數(shù)組。每個(gè)任務(wù)都包含多個(gè)字段,下面是一些常用的字段及其作用: id: 任務(wù)的唯一標(biāo)識(shí)符。 text: 任務(wù)的名稱(chēng)。 start_date: 任務(wù)的開(kāi)始日期,可以是一個(gè)字符串或者一個(gè) Date 對(duì)象。 end_date: 任務(wù)的結(jié)束日期,可以是一個(gè)字符串或者一個(gè) Date 對(duì)象。 duration: 任務(wù)的持續(xù)時(shí)間,以天為單位。如果 end_date 和 duration 都提供了,duration 會(huì)被忽略。 progress: 任務(wù)的進(jìn)度,以百分比表示。 parent: 父任務(wù)的 id,如果當(dāng)前任務(wù)是頂級(jí)任務(wù),則該字段為 0。 open: 是否展開(kāi)當(dāng)前任務(wù)的子任務(wù)。如果不提供,默認(rèn)為 true。 state: 用于設(shè)置任務(wù)的狀態(tài)。狀態(tài)可以是任何自定義值,例如 "in progress"、"completed"、"cancelled" 等等。在 Gantt 圖中,任務(wù)的狀態(tài)可以通過(guò)任務(wù)條顏色、邊框、文本樣式等 visulization 屬性進(jìn)行自定義渲染,以便用戶(hù)更直觀地了解任務(wù)狀態(tài)的變化??梢栽?nbsp;Gantt 文檔中的 Visualization 屬性部分了解有關(guān)自定義任務(wù)狀態(tài)可視化的更多信息。 除了上面列出的常用字段之外,還有很多其他可選字段,例如 color、link、type 等,可以根據(jù)實(shí)際需求來(lái)添加。 */ const links = [ { id: 1, source: 1, target: 2, type: "0" }, ]; gantt.parse({ data: data, links: links, }); //其中,data 數(shù)組包含兩個(gè)任務(wù),links 數(shù)組包含一個(gè)鏈接,最后將這些數(shù)據(jù)傳遞給 gantt.parse() 方法進(jìn)行解析,即可在 Gantt 圖表中顯示這些任務(wù)和鏈接。
2.在月刻度下需要從1號(hào)開(kāi)始顯示到月底最后一天應(yīng)該怎么顯示,直接上代碼
//設(shè)置 scale_unit 屬性為 month,以顯示月刻度 gantt.config.scale_unit = "month"; //設(shè)置 step 屬性為 1,以每個(gè)月顯示一個(gè)刻度 gantt.config.step = 1; //設(shè)置 date_scale 屬性為 %Y-%m-%d,以顯示年月日格式的刻度 gantt.config.date_scale = "%Y-%m-%d"; //設(shè)置 scale_date 屬性為 gantt.date.monthStart,以從每個(gè)月的第一天開(kāi)始顯示刻度。 gantt.config.scale_date = gantt.date.monthStart; //設(shè)置 subscale 屬性為一個(gè)包含兩個(gè)刻度的對(duì)象,分別為 day 和 week。 gantt.config.subscales = [ { unit: "day", step: 1, date: "%d" }, { unit: "week", step: 1, date: "#%W" } ];
讀到這里,這篇“在Vue中使用dhtmlxGantt組件時(shí)遇到的問(wèn)題怎么解決”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。