svelte-gantt項(xiàng)目排期用SvelteGanttDependencies模塊畫(huà)出任務(wù)依賴(lài)關(guān)系的完整指南【免費(fèi)下載鏈接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component項(xiàng)目地址: https://gitcode.com/gh_mirrors/sv/svelte-ganttsvelte-gantt是一款輕量、零依賴(lài)的交互式 JavaScript 甘特圖組件由 Svelte 構(gòu)建可兼容任何前端框架。它的SvelteGanttDependencies模塊能在任務(wù)條之間自動(dòng)繪制帶箭頭的依賴(lài)連線讓項(xiàng)目排期中的誰(shuí)依賴(lài)誰(shuí)一目了然。本教程面向新手帶你用 5 分鐘完成任務(wù)依賴(lài)關(guān)系的可視化配置。為什么甘特圖需要依賴(lài)關(guān)系線項(xiàng)目排期中任務(wù)很少孤立存在需求評(píng)審要等文檔完成、上線要等測(cè)試通過(guò)。若只畫(huà)時(shí)間條讀者無(wú)法判斷任務(wù)的先后約束。svelte-gantt的依賴(lài)模塊解決的就是這個(gè)問(wèn)題自動(dòng)連線根據(jù)任務(wù) ID 自動(dòng)計(jì)算箭頭起點(diǎn)與終點(diǎn)無(wú)需手動(dòng)排版智能走線同層任務(wù)直線連接跨層任務(wù)自動(dòng)繞行折線支持起止行隱藏時(shí)的特殊形態(tài)可定制樣式箭頭顏色、線寬、箭頭大小均可配置高性能僅渲染可視區(qū)域內(nèi)的依賴(lài)線大數(shù)據(jù)集也不卡頓相關(guān)源碼位于packages/svelte-gantt/src/modules/dependencies/目錄核心文件包括GanttDependencies.svelte依賴(lài)容器和Dependency.svelte單條依賴(lài)線的渲染邏輯。依賴(lài)關(guān)系的數(shù)據(jù)結(jié)構(gòu)依賴(lài)數(shù)據(jù)是一個(gè)數(shù)組每條依賴(lài)只需 3 個(gè)必填字段字段類(lèi)型說(shuō)明idnumber/string依賴(lài)線唯一 ID必填fromIdnumber/string起點(diǎn)任務(wù)的 ID必填toIdnumber/string終點(diǎn)任務(wù)的 ID必填strokestring線條顏色如red或#ff0000可選strokeWidthnumber線條寬度可選arrowSizenumber箭頭大小可選字段定義可查看 dependency.ts模型接口為DependencyModel位于packages/svelte-gantt/src/modules/dependencies/dependency.ts。以官方 Demo 為例它定義了 5 條依賴(lài)把準(zhǔn)備 → 規(guī)劃 → 開(kāi)發(fā) → 實(shí)施 → 完成串成一條主鏈路同時(shí)讓培訓(xùn)并行匯入最終節(jié)點(diǎn)dependencies: [ { id: 1, fromId: 1, toId: 2 }, // 準(zhǔn)備 → 規(guī)劃 { id: 2, fromId: 2, toId: 3 }, // 規(guī)劃 → 開(kāi)發(fā) { id: 3, fromId: 3, toId: 4 }, // 開(kāi)發(fā) → 實(shí)施 { id: 4, fromId: 4, toId: 5 }, // 實(shí)施 → 完成 { id: 5, fromId: 6, toId: 5 } // 培訓(xùn) → 完成 ]完整示例數(shù)據(jù)可參考 dependencies/page.svelte路徑packages/demo/src/routes/dependencies/page.svelte。三步配置 SvelteGanttDependencies 模塊第 1 步安裝與引入npm install svelte-ganttimport { SvelteGantt, SvelteGanttDependencies } from svelte-gantt;第 2 步把模塊注冊(cè)到甘特圖主體依賴(lài)線繪制在甘特圖主體區(qū)域因此必須將模塊放入ganttBodyModulesconst options { rows: rows, // 行資源/泳道 tasks: tasks, // 任務(wù)數(shù)組 dependencies: dependencies, ganttBodyModules: [SvelteGanttDependencies] }; const gantt new SvelteGantt({ target: document.getElementById(example-gantt), props: options });第 3 步運(yùn)行時(shí)動(dòng)態(tài)更新依賴(lài)數(shù)據(jù)支持隨時(shí)更新無(wú)需重建圖表gantt.$set({ dependencies: [ { id: 9, fromId: 3, toId: 7, stroke: #ff0000, strokeWidth: 3 } ], ganttBodyModules: [SvelteGanttDependencies] });依賴(lài)線的繪制原理源碼解析GanttDependencies.svelte負(fù)責(zé)性能優(yōu)化它遍歷所有依賴(lài)只保留起點(diǎn)或終點(diǎn)位于可視區(qū)域內(nèi)的連線避免滾動(dòng)時(shí)渲染上千條 SVG 路徑。Dependency.svelte負(fù)責(zé)單條線的幾何計(jì)算邏輯分為三種場(chǎng)景兩行均可見(jiàn)從起點(diǎn)任務(wù)右側(cè)中點(diǎn)出發(fā)的折線連到終點(diǎn)任務(wù)左側(cè)中點(diǎn)距離較近時(shí)自動(dòng)加繞行避免重疊起點(diǎn)行被隱藏連線退化為終點(diǎn)處的圓點(diǎn)標(biāo)記終點(diǎn)行被隱藏連線退化為起點(diǎn)處的圓點(diǎn)標(biāo)記。箭頭頭部由arrowPath獨(dú)立繪制顏色統(tǒng)一讀取 CSS 變量--sg-dependency-arrow-color方便全局換膚。這套機(jī)制讓依賴(lài)圖在行過(guò)濾、行折疊時(shí)依然保持正確外觀是排期看板交互體驗(yàn)的關(guān)鍵細(xì)節(jié)。實(shí)戰(zhàn)建議畫(huà)出易讀的任務(wù)依賴(lài)圖主鏈路用默認(rèn)色例外依賴(lài)高亮為關(guān)鍵路徑外的加急依賴(lài)單獨(dú)設(shè)置stroke如stroke: #e74c3c控制依賴(lài)線數(shù)量只畫(huà)前置-后繼的緊鄰關(guān)系跨越多層的長(zhǎng)依賴(lài)會(huì)讓畫(huà)面雜亂配合時(shí)間范圍模塊Demo 中同時(shí)使用了timeRanges標(biāo)注午休/晚餐時(shí)段幫助資源排期避開(kāi)不可用時(shí)間任務(wù) ID 保持穩(wěn)定fromId/toId必須與tasks數(shù)組中的id一一對(duì)應(yīng)否則依賴(lài)線不會(huì)顯示行隱藏時(shí)依賴(lài)線自動(dòng)降級(jí)無(wú)需額外處理圓點(diǎn)標(biāo)記會(huì)提示此處有一條被截?cái)嗟囊蕾?lài)常見(jiàn)問(wèn)題FAQQ1依賴(lài)線為什么沒(méi)有顯示先確認(rèn)ganttBodyModules: [SvelteGanttDependencies]已設(shè)置且fromId、toId能在tasks中找到對(duì)應(yīng)任務(wù)。兩個(gè) ID 都無(wú)效時(shí)該依賴(lài)會(huì)被靜默跳過(guò)。Q2依賴(lài)線能拖拽嗎依賴(lài)線本身不可拖拽但路徑上有select-area命中區(qū)域可用于事件監(jiān)聽(tīng)拖拽任務(wù)后連線會(huì)隨任務(wù)位置自動(dòng)重算。Q3如何批量修改箭頭顏色覆蓋 CSS 變量--sg-dependency-arrow-color即可全局生效無(wú)需逐條修改stroke?？偨Y(jié)SvelteGanttDependencies是 svelte-gantt 排期能力的關(guān)鍵拼圖只需一個(gè)dependencies數(shù)組加一行模塊注冊(cè)就能讓甘特圖從時(shí)間條列表升級(jí)為完整的項(xiàng)目依賴(lài)視圖。結(jié)合其樹(shù)形視圖、縮放、事件系統(tǒng)等模塊可以快速搭建出專(zhuān)業(yè)的項(xiàng)目排期與資源預(yù)訂系統(tǒng)。想繼續(xù)深入建議按以下順序閱讀源碼依賴(lài)數(shù)據(jù)模型packages/svelte-gantt/src/modules/dependencies/dependency.ts依賴(lài)渲染容器可視性過(guò)濾packages/svelte-gantt/src/modules/dependencies/GanttDependencies.svelte單條依賴(lài)線繪制packages/svelte-gantt/src/modules/dependencies/Dependency.svelte完整可運(yùn)行示例packages/demo/src/routes/dependencies/page.svelte【免費(fèi)下載鏈接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component項(xiàng)目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考