DHTMLX Gantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。

DHTMLX Gantt 9.0重大版本更新現(xiàn)已發(fā)布。這一里程碑版本使JavaScript 甘特圖界面煥然一新，帶來了徹底改進(jìn)的主題，并大大簡化了甘特圖的外觀和感覺自定義。新版本還引入了手動(dòng)安排的摘要任務(wù)、對基線的內(nèi)置支持、增強(qiáng)的截止日期和約束可視化、粘性標(biāo)簽以及許多其他改進(jìn)，以增強(qiáng)基于甘特圖組件的 Web 應(yīng)用程序。

DHTMLX Gantt v9.0最新版試用下載

在這篇文章中，我們將介紹 DHTMLX Gantt 9.0 的新功能和改進(jìn)，這些功能和改進(jìn)使 DHTMLX Gantt 9.0 成為提供全面項(xiàng)目管理應(yīng)用程序的技術(shù)堆棧中必備工具。

可定制的主題和增強(qiáng)的用戶界面

視覺上吸引人且易于定制的用戶界面對于滿足 Web 開發(fā)人員和最終用戶的需求至關(guān)重要。在 DHTMLX Gantt 9.0 中，我們在增強(qiáng)用戶界面方面取得了重大進(jìn)展，以提供更現(xiàn)代、更靈活的體驗(yàn)。

• 徹底改造的主題

就像 DHTMLX Scheduler (v7.0) 的最新重大更新一樣，Gantt 9.0 帶來了主題的全面改革。我們重寫了核心樣式，采用了現(xiàn)代設(shè)計(jì)實(shí)踐，以確保您的甘特圖看起來新穎而時(shí)尚。

• 更新露臺主題

默認(rèn)Terrace 主題已進(jìn)行改進(jìn)，以符合現(xiàn)代 UI 標(biāo)準(zhǔn)。它現(xiàn)在提供更簡潔、更生動(dòng)的外觀，可提高可讀性和用戶參與度。

• 新的深色主題

Web 應(yīng)用程序中對深色主題的需求持續(xù)高漲，其受歡迎程度的原因有很多。深色主題可減輕眼疲勞，讓您的應(yīng)用程序外觀時(shí)尚現(xiàn)代。使用 v9.0，您可以將這個(gè)熱門主題應(yīng)用到您的甘特圖中。

使用 CSS 變量定制甘特圖

v9.0 中的另一個(gè)突出的樣式功能是使用 CSS 變量簡化甘特圖自定義。這些自定義屬性提供了多種好處，如下文更詳細(xì)地介紹。

• 輕松定制和維護(hù)

CSS 變量提供了一種簡單而靈活的方式來修改甘特圖的外觀。Web 開發(fā)人員可以定義全局樣式屬性，例如顏色、字體和其他樣式元素，只需進(jìn)行少量更改即可快速更新整個(gè)甘特圖。

以下代碼可以更改甘特圖中刻度、任務(wù)和鏈接的顏色：

對變量的任何更改（例如調(diào)整主色）都將統(tǒng)一應(yīng)用于整個(gè) UI，使所有內(nèi)容保持同步。這還降低了隨著時(shí)間的推移維護(hù)或更新 UI 所需的復(fù)雜性和工作量。

使用 CSS 變量進(jìn)行主題定制

CSS 變量還提供了簡化現(xiàn)有甘特圖主題自定義的機(jī)會(huì)。因此，UI 可以根據(jù)用戶偏好或特定項(xiàng)目需求更適應(yīng)主題變化。

此外，v9.0 還允許最終用戶通過應(yīng)用設(shè)置在主題之間切換，而無需重新加載頁面。動(dòng)態(tài)主題切換是使用setSkin()方法實(shí)現(xiàn)的。

對于那些需要大量修改甘特圖的用戶，v9.0 軟件包包含主題的源文件。它支持深度定制和重建主題以滿足特定要求。

• 圖標(biāo)定制

在新版甘特圖中，所有圖標(biāo)均使用 Web 字體或 SVG 元素構(gòu)建。這意味著您可以直接通過 CSS 變量自定義圖標(biāo)樣式，從而確保整個(gè)應(yīng)用程序的一致性。

• 新的鏈接樣式選項(xiàng)

我們還改進(jìn)了甘特圖任務(wù)之間鏈接的顯示方式。現(xiàn)在鏈接可以采用圓角邊框，從而為任務(wù)之間添加更平滑、更具視覺吸引力的連接。這由新的gantt.config.link_radius配置選項(xiàng)控制，您可以在其中定義鏈接所需的邊框半徑。

通過增加半徑值，鏈接的曲線變得更加明顯。如果您更喜歡經(jīng)典的直線而沒有任何圓角，您可以通過將半徑設(shè)置為 1 來禁用此功能。這一新穎的功能允許您定制鏈接樣式以更好地匹配應(yīng)用程序的設(shè)計(jì)美感。

手動(dòng)安排的摘要任務(wù)

我們的團(tuán)隊(duì)一直在尋找提高使用甘特圖管理項(xiàng)目的靈活性和準(zhǔn)確性的方法。新版甘特圖增加了手動(dòng)匯總（項(xiàng)目）任務(wù)調(diào)度功能。它用于在指定子任務(wù)詳細(xì)信息之前概述項(xiàng)目階段，從而提供通用的項(xiàng)目時(shí)間表。

默認(rèn)情況下，摘要任務(wù)會(huì)根據(jù)其子任務(wù)的最早開始日期和最晚結(jié)束日期自動(dòng)計(jì)算其日期。現(xiàn)在，最終用戶可以獨(dú)立于子任務(wù)為摘要任務(wù)設(shè)置固定的開始日期和結(jié)束日期。因此，甘特圖將同時(shí)顯示摘要任務(wù)的固定持續(xù)時(shí)間和從子任務(wù)得出的持續(xù)時(shí)間。

要為摘要任務(wù)激活此功能，請將auto_scheduling屬性設(shè)置為false。固定日期存儲在task.start_date和task.end_date中，而子任務(wù)計(jì)算出的日期則存儲在task.$auto_start_date和task.$auto_end_date中。

甘特圖中會(huì)顯示摘要任務(wù)的固定持續(xù)時(shí)間和根據(jù)其子任務(wù)計(jì)算出的實(shí)際持續(xù)時(shí)間。如果子任務(wù)日期范圍超出摘要任務(wù)的指定日期，摘要任務(wù)將以紅色突出顯示，以指示時(shí)間安排沖突，如下例所示。此視覺提示可幫助最終用戶快速識別和解決項(xiàng)目時(shí)間表中的差異。

此功能為最終用戶提供了一種便捷的機(jī)制，即使出現(xiàn)計(jì)劃外的時(shí)間表變更，也能確保準(zhǔn)確的項(xiàng)目管理。

內(nèi)置基線支持

在甘特圖等工具中，基線可以清楚地表明實(shí)際工作進(jìn)度與項(xiàng)目實(shí)施計(jì)劃的一致性。以前在 DHTMLX Gantt 中，添加基線需要通過gantt.addTaskLayer API 手動(dòng)編碼。從現(xiàn)在開始，開發(fā)人員可以享受對基線實(shí)體的內(nèi)置支持，從而大大簡化這一重要甘特圖項(xiàng)目的工作。基線可以直接與任務(wù)一起加載，從而簡化甘特圖數(shù)據(jù)的呈現(xiàn)和管理。一旦基線被加載，甘特圖將自動(dòng)在時(shí)間軸中顯示它們，而無需任何額外的配置 。

使用新的燈箱控件，管理基線現(xiàn)在更加直觀。最終用戶可以直接從任務(wù)編輯表單輕松添加、編輯或刪除基線。

• 靈活的基線渲染模式

我們了解項(xiàng)目在工作流可視化需求方面有所不同。新版 Gantt v9.0 提供了三種顯示基線的選項(xiàng)，由新的gantt.config.baselines.render_mode配置控制：

與任務(wù)在同一行顯示基線

如果需要在有任務(wù)條的同一行顯示基線，則該模式指定如下：

gantt.config.baselines.render_mode = “ taskRow ”；

>在任務(wù)下方的單獨(dú)子行上顯示基線

要在每個(gè)任務(wù)下方的單個(gè)子行上呈現(xiàn)所有基線，請啟用以下模式：

>顯示每個(gè)基線的單獨(dú)子行

如果您需要更清晰的視圖，可以配置單獨(dú)的子行來顯示基線：

• 數(shù)據(jù)處理器對基線的支持

DHTMLX Gantt v9.0 引入了DataProcessor對基線的支持。從技術(shù)角度來看，當(dāng)甘特圖中的基線更新時(shí)，DataProcessor 會(huì)自動(dòng)捕獲更改，確保與項(xiàng)目后端無縫同步。

內(nèi)置顯示截止日期和限制

跟蹤截止日期和了解任務(wù)限制對于及時(shí)交付項(xiàng)目至關(guān)重要。DHTMLX Gantt 9.0 帶有內(nèi)置的截止日期和限制可視化功能，可增強(qiáng)最終用戶有效管理項(xiàng)目時(shí)間表的能力。

• 截止日期可視化

在 9.0 版本中，我們的甘特圖組件開始支持task.deadline字段。指定后，它會(huì)在圖表上顯示一個(gè)視覺指示器，從而簡化任務(wù)截止日期的跟蹤。

• 自動(dòng)調(diào)度模式下約束可視化

從 v9.0 開始，當(dāng)啟用自動(dòng)調(diào)度的約束模式時(shí)，甘特圖將直接在時(shí)間軸中顯示約束元素。此功能旨在識別具有特定調(diào)度約束的任務(wù)，確保在項(xiàng)目規(guī)劃期間考慮到依賴關(guān)系和限制。

通過此附加功能，最終用戶可以快速確認(rèn)指定的任務(wù)約束在自動(dòng)調(diào)度模式下正常工作。

時(shí)間標(biāo)尺貼紙

在甘特圖時(shí)間軸中管理復(fù)雜工作流程時(shí)，保持時(shí)間刻度可見非常有用。否則，當(dāng)時(shí)間刻度標(biāo)簽移出屏幕時(shí)，用戶可能會(huì)感到困惑并誤解截止日期或時(shí)間范圍。

為了降低此類問題的風(fēng)險(xiǎn)，DHTMLX Gantt 9.0 為時(shí)間刻度提供了粘性標(biāo)簽，確保標(biāo)簽跟隨視口并保持可見，直到它們自然滾動(dòng)。粘性標(biāo)簽還可以確保甘特圖具有更好的可讀性和導(dǎo)航性。

默認(rèn)情況下，所有單元格寬度明顯大于標(biāo)簽寬度的刻度都會(huì)啟用粘性標(biāo)簽。可以使用刻度對象的sticky屬性自定義此行為：

設(shè)置sticky: true以始終啟用粘性標(biāo)簽，無論單元格寬度如何。

設(shè)置sticky: false來針對特定比例禁用此功能。

總體而言，粘性標(biāo)簽有助于更好地管理甘特圖中的工作流和組織任務(wù)。

以上就是 DHTMLX Gantt 9.0 中新增的功能。我們希望此更新能幫助您構(gòu)建更具視覺吸引力和用戶友好的甘特圖并提升您的項(xiàng)目管理應(yīng)用程序。

如需了解更多產(chǎn)品資訊，歡迎咨詢“”！