亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)

 更新時間:2023年03月16日 10:08:42   作者:莎莉哇  
dhtmlxGantt一個功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下

最近接到需要在頁面中引入甘特圖,經(jīng)過多方對比插件
甘特圖1
1.Gantt-elastic:一個基于HTML和CSS的甘特圖插件,具有自適應(yīng)布局和觸摸屏支持。
2.jsgantt-improved:一個基于JavaScript的甘特圖插件,具有靈活的配置選項,支持任務(wù)鏈和資源分配。
3.dhtmlxGantt:一個功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式。
4.jQuery Gantt Chart:一個基于jQuery的甘特圖插件,支持日期范圍選擇和任務(wù)進度跟蹤。
5.FusionCharts Gantt:一個基于圖表庫FusionCharts的甘特圖插件,支持動態(tài)數(shù)據(jù)更新和多種視圖模式。
甘特圖2
1.vue-gantt-schedule-timeline:一個基于Vue.js的甘特圖插件,支持時間軸和事件編輯。
2.vue-gantt:一個基于Vue.js的甘特圖插件,支持動態(tài)數(shù)據(jù)更新和任務(wù)進度跟蹤。
3.vue-dhtmlx-gantt:一個基于dhtmlxGantt的Vue.js甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式。
4.vue-fusioncharts-gantt:一個基于FusionCharts Gantt的Vue.js甘特圖插件,支持動態(tài)數(shù)據(jù)更新和多種視圖模式。

最后選擇了 dhtmlxGantt
效果圖如下:

因為官方文檔全部是英文,所以經(jīng)過多方查證,總結(jié)一下文檔中API的用法:

在 Vue 中使用 dhtmlxGantt 組件時,gantt.parse中各個參數(shù)代表的意思是什么

gantt.parse() 方法是用于將數(shù)據(jù)解析為 Gantt 圖表的方法。它接受一個包含任務(wù)和鏈接數(shù)據(jù)的對象作為參數(shù)。該對象包含以下屬性:

data: 任務(wù)數(shù)據(jù)數(shù)組,包含每個任務(wù)的信息,例如 id、text、start_date、duration 等等。
links: 鏈接數(shù)據(jù)數(shù)組,包含每個鏈接的信息,例如 id、source、target 等等。
key: 任務(wù)數(shù)據(jù)對象中唯一標(biāo)識每個任務(wù)的屬性名稱,默認(rèn)為 "id"。
parent: 任務(wù)數(shù)據(jù)對象中用于標(biāo)識父任務(wù)的屬性名稱,默認(rèn)為 "parent".
open_tree_initially: 布爾值,如果設(shè)置為 true,則所有任務(wù)默認(rèn)展開。
preserve_links: 布爾值,如果設(shè)置為 true,則鏈接信息中的任務(wù)不存在時也會保留鏈接。
preserve_tasks: 布爾值,如果設(shè)置為 true,則鏈接信息中的任務(wù)不存在時也會保留任務(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ù)是一個包含任務(wù)信息的數(shù)組。每個任務(wù)都包含多個字段,下面是一些常用的字段及其作用:
id: 任務(wù)的唯一標(biāo)識符。
text: 任務(wù)的名稱。
start_date: 任務(wù)的開始日期,可以是一個字符串或者一個 Date 對象。
end_date: 任務(wù)的結(jié)束日期,可以是一個字符串或者一個 Date 對象。
duration: 任務(wù)的持續(xù)時間,以天為單位。如果 end_date 和 duration 都提供了,duration 會被忽略。
progress: 任務(wù)的進度,以百分比表示。
parent: 父任務(wù)的 id,如果當(dāng)前任務(wù)是頂級任務(wù),則該字段為 0。
open: 是否展開當(dāng)前任務(wù)的子任務(wù)。如果不提供,默認(rèn)為 true。
state: 用于設(shè)置任務(wù)的狀態(tài)。狀態(tài)可以是任何自定義值,例如 "in progress"、"completed"、"cancelled" 等等。在 Gantt 圖中,任務(wù)的狀態(tài)可以通過任務(wù)條顏色、邊框、文本樣式等 visulization 屬性進行自定義渲染,以便用戶更直觀地了解任務(wù)狀態(tài)的變化。可以在 Gantt 文檔中的 Visualization 屬性部分了解有關(guān)自定義任務(wù)狀態(tài)可視化的更多信息。
除了上面列出的常用字段之外,還有很多其他可選字段,例如 color、link、type 等,可以根據(jù)實際需求來添加。
*/

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

gantt.parse({
  data: data,
  links: links,
});
//其中,data 數(shù)組包含兩個任務(wù),links 數(shù)組包含一個鏈接,最后將這些數(shù)據(jù)傳遞給 gantt.parse() 方法進行解析,即可在 Gantt 圖表中顯示這些任務(wù)和鏈接。

2.在月刻度下需要從1號開始顯示到月底最后一天應(yīng)該怎么顯示,直接上代碼

//設(shè)置 scale_unit 屬性為 month,以顯示月刻度
gantt.config.scale_unit = "month";
//設(shè)置 step 屬性為 1,以每個月顯示一個刻度
gantt.config.step = 1;
//設(shè)置 date_scale 屬性為 %Y-%m-%d,以顯示年月日格式的刻度
gantt.config.date_scale = "%Y-%m-%d";
//設(shè)置 scale_date 屬性為 gantt.date.monthStart,以從每個月的第一天開始顯示刻度。
gantt.config.scale_date = gantt.date.monthStart;
//設(shè)置 subscale 屬性為一個包含兩個刻度的對象,分別為 day 和 week。
gantt.config.subscales = [
  { unit: "day", step: 1, date: "%d" },
  { unit: "week", step: 1, date: "#%W" }
];

參考資料:
官方例子
查看官方文檔

到此這篇關(guān)于在 Vue 中使用 dhtmlxGantt 組件時遇到的問題匯總的文章就介紹到這了,更多相關(guān)Vue 使用 dhtmlxGantt 組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • configureWebpack、chainWebpack配置vue.config.js方式

    configureWebpack、chainWebpack配置vue.config.js方式

    這篇文章主要介紹了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • vue中使用js-xlsx導(dǎo)出excel的實現(xiàn)方法

    vue中使用js-xlsx導(dǎo)出excel的實現(xiàn)方法

    本文主要介紹了vue中使用js-xlsx導(dǎo)出excel的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • 詳解Vue demo實現(xiàn)商品列表的展示

    詳解Vue demo實現(xiàn)商品列表的展示

    這篇文章主要介紹了Vue demo實現(xiàn)商品列表的展示,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • vue手寫<RouterLink/>組件實現(xiàn)demo詳解

    vue手寫<RouterLink/>組件實現(xiàn)demo詳解

    這篇文章主要為大家介紹了vue手寫<RouterLink/>組件實現(xiàn)demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法

    Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法

    最近在開發(fā)中遇到了一個新需求:列表輪播滾動,實現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實現(xiàn),于是我開始了嘗試,但是在這個過程中遇到了動態(tài)綁定style樣式不生效,所以本文介紹了Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法
    2024-08-08
  • 基于VUE的v-charts的曲線顯示功能

    基于VUE的v-charts的曲線顯示功能

    這篇文章主要介紹了基于VUE的v-charts的曲線顯示功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10
  • vue移動端html5頁面根據(jù)屏幕適配的四種解決方法

    vue移動端html5頁面根據(jù)屏幕適配的四種解決方法

    在vue移動端h5頁面當(dāng)中,其中適配是經(jīng)常會遇到的問題,這塊主要有四個方法可以適用。這篇文章主要介紹了vue移動端h5頁面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下
    2018-10-10
  • vue倒計時刷新頁面不會從頭開始的解決方法

    vue倒計時刷新頁面不會從頭開始的解決方法

    在本篇文章里小編給大家整理的是關(guān)于vue倒計時刷新頁面不會從頭開始的解決方法,需要的朋友們參考下。
    2020-03-03
  • vue3圖片剪裁插件vue-img-cutter使用小結(jié)

    vue3圖片剪裁插件vue-img-cutter使用小結(jié)

    Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧
    2024-01-01
  • vue實現(xiàn)滑塊拖拽校驗功能的全過程

    vue實現(xiàn)滑塊拖拽校驗功能的全過程

    vue驗證滑塊功能,在生活中很多地方都可以見到,使用起來非常方便,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)滑塊拖拽校驗功能的相關(guān)資料,需要的朋友可以參考下
    2021-08-08

最新評論