建站
咨詢
售后
建站咨詢
新聞中心
在Web開(kāi)發(fā)愛(ài)好者，以及那些重視Web應(yīng)用的高性能與可靠性的大型企業(yè)中，React已經(jīng)廣受歡迎，并得到了廣泛的使用。目前，業(yè)界出現(xiàn)了各種復(fù)雜程度不一的React組件，它們的功能各不相同。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了扎囊免費(fèi)建站歡迎大家使用！
本文將重點(diǎn)向您介紹基于React的四種甘特圖解決方案。它們基本上被分為兩種類(lèi)型。一類(lèi)是提供基本功能，且適合小型公司的輕量級(jí)圖表。另一類(lèi)則是提供豐富功能，且適用于大型公司和復(fù)雜項(xiàng)目的方案。通過(guò)此類(lèi)方案，項(xiàng)目經(jīng)理能夠確保不會(huì)放過(guò)任何一個(gè)值得重視的細(xì)節(jié)。下面，我們來(lái)具體看看這四種方案。
1. React Google Charts(https://react-google-charts.com/)
React Google Charts是一個(gè)包裝器(wrapper)，它可以讓您使用由Google開(kāi)發(fā)的大量圖表。此類(lèi)甘特圖使用的是SVG(Scalable Vector Graphics，可縮放矢量圖形)渲染。雖然其功能非?；A(chǔ)，但是您可以據(jù)此來(lái)獲悉并跟蹤項(xiàng)目的整體狀態(tài)，以及各個(gè)子任務(wù)涉及的一切。Google通過(guò)提供此工具，既可以顯示任務(wù)的持續(xù)時(shí)間，又可以展示其開(kāi)始與結(jié)束日期。此外，將鼠標(biāo)懸停在某個(gè)任務(wù)上時(shí)，您還能夠獲悉一些其他方面的相關(guān)信息。根據(jù)圖表配置的不同，這些信息可以包括：完成百分比、持續(xù)時(shí)間、以及用到的資源等。此外，該工具的提示也有助于定義特定的任務(wù)是否處在關(guān)鍵的路徑上。
通過(guò)使用箭頭，它可以顯示不同任務(wù)之間的依賴(lài)關(guān)系。當(dāng)然，您也可以使用不顯示任何依賴(lài)項(xiàng)的模式。同時(shí)，其分組功能可以使您將相似的任務(wù)組合到一起?！瓣P(guān)鍵路徑”是所有甘特圖的必備功能。在此方面，Google可以為您定義那些對(duì)于項(xiàng)目時(shí)間影響最大的任務(wù)。
值得一提的是，Google甘特圖的樣式是可調(diào)的，您可以更改那些用來(lái)標(biāo)記任務(wù)和軌跡之間依賴(lài)關(guān)系的箭頭外觀。此外，Google甘特圖也提供了那些創(chuàng)建輕巧、整潔且美觀的圖表所需的幾乎所有功能?？傊?，如果您想構(gòu)建一個(gè)使用多種不同圖表的Web應(yīng)用，并使其輕巧且功能齊全的話，那么React Google Charts絕對(duì)是您的不二選擇。
2. Frappe Gantt React(https://www.npmjs.com/package/frappe-gantt-react)
Frappe Gantt React也是一個(gè)包裝器，它允許用戶使用MIT許可證下的Frappe甘特圖發(fā)行版。作為一個(gè)簡(jiǎn)單輕巧的開(kāi)源JavaScript甘特圖，它具有拖放、調(diào)整大小、創(chuàng)建依賴(lài)項(xiàng)、以及時(shí)間刻度等功能。您可以用它來(lái)創(chuàng)建任務(wù)，并將其拖到時(shí)間軸上，或通過(guò)調(diào)整大小來(lái)更改持續(xù)的時(shí)間。通過(guò)單擊某項(xiàng)特定的任務(wù)，您也可以獲悉諸如：持續(xù)時(shí)間和當(dāng)前進(jìn)度等，某些其他信息。
該方案能夠按照季度、月、周、天、半天，提供查看模式。通過(guò)事件監(jiān)聽(tīng)器，您可以定義自己的應(yīng)用將如何針對(duì)用戶的某項(xiàng)操作做出何種反應(yīng)。而通過(guò)在彈出窗口中使用自定義的HTML，您也可以修改該工具提示中所顯示的信息格式。目前，該方案對(duì)外提供的功能列表較為保守，因此，如果您對(duì)甘特圖的功能要求不高的話，則可以使用這款極簡(jiǎn)的工具。
在了解了只提供基本功能的甘特圖方案之后，下面我們?cè)賮?lái)看看兩個(gè)能夠滿足苛刻用戶需求的方案。
3. DHTMLX Gantt(https://dhtmlx.com/docs/products/dhtmlxGantt/)
作為一款功能齊全的甘特圖工具，DHTMLX Gantt能夠?qū)崿F(xiàn)跨瀏覽器和平臺(tái)的應(yīng)用。它能夠完全自定義各種圖表，其靈活的API也能夠方便每個(gè)元素的配置。
您可以自定義從任務(wù)欄到網(wǎng)格結(jié)構(gòu)的所有內(nèi)容。使用其縮放功能，以及在月、日和小時(shí)之間靈活的切換，您可以更專(zhuān)注于項(xiàng)目的某個(gè)特定部分。鑒于基線對(duì)于確保按時(shí)完成任務(wù)的重要性，您可以使用自定義基線，來(lái)標(biāo)記項(xiàng)目的初始計(jì)劃，并將其與項(xiàng)目的當(dāng)前狀態(tài)進(jìn)行比較。同時(shí)，它的自動(dòng)計(jì)劃功能，可以讓您避免手動(dòng)進(jìn)行更改，而將所有需要的更改都自動(dòng)應(yīng)用于計(jì)劃之中。當(dāng)然，如果任務(wù)的結(jié)束日期需要跟蹤變更的話，那么此功能也會(huì)更新任務(wù)的開(kāi)始日期。
DHTMLX Gantt的資源分配功能可以讓用戶實(shí)施各種高級(jí)管理功能。您可以在資源使用圖、直方圖和資源日歷的幫助下，為各項(xiàng)任務(wù)合理地分配資源，并跟蹤其工作負(fù)荷。
上文提到的關(guān)鍵路徑方法，不但可以顯著地簡(jiǎn)化項(xiàng)目工作，也可以定義確定項(xiàng)目總體工期的任務(wù)順序。對(duì)此，您可能需要添加一些自定義的內(nèi)容。例如：通過(guò)一個(gè)S曲線來(lái)顯示項(xiàng)目的進(jìn)度。除了可以在React項(xiàng)目中使用甘特圖之外，您還可以通過(guò)該工具，從與Vue.js、Angular、jQuery、Laravel、Node.js、以及ASP.NET等服務(wù)器端技術(shù)的集成中受益。
目前，DHTMLX Gantt還在持續(xù)迭代改進(jìn)中，其功能也會(huì)越來(lái)越豐富。如果您想了解更多其相關(guān)信息的話，請(qǐng)?jiān)L問(wèn)該項(xiàng)目的主頁(yè)，以及它在GitHub上的demo(https://github.com/DHTMLX/react-gantt-demo)。
4. React Gantt by Bryntum(https://www.react-gantt.com/)
該React甘特圖工具由Bryntum公司開(kāi)發(fā)。該公司以高質(zhì)量的Ext JS框架插件而聞名。其調(diào)度引擎是從頭開(kāi)始構(gòu)建的，具有出色的性能，被稱(chēng)為Chronograph。而它的異步重調(diào)度功能則可以處理任意數(shù)量的任務(wù)。在移動(dòng)了任務(wù)之后，Bryntum會(huì)將生成的變更集放到適當(dāng)?shù)奈恢茫员阌脩舾櫮硞€(gè)變更是如何輕松地影響到其他變更的。
目前，Bryntum的開(kāi)發(fā)人員已經(jīng)實(shí)現(xiàn)了，用戶在可能進(jìn)行有效項(xiàng)目管理過(guò)程中的所有功能。其中包括：通過(guò)拖放支持，允許用戶使用鼠標(biāo)或觸摸設(shè)備，來(lái)創(chuàng)建、調(diào)整任務(wù)窗口的大小;以及以編程的方式，驗(yàn)證編輯動(dòng)作，以避免可能出現(xiàn)的錯(cuò)誤，并確保提供信息的準(zhǔn)確性。而可定制的工具提示則允許用戶使用HTML定義，獲悉特定任務(wù)的額外詳細(xì)信息。
另外，Bryntum內(nèi)置的可自定義上下文菜單，將有助于實(shí)現(xiàn)企業(yè)所需的某些特定功能。當(dāng)然，您也可以在任何條件下，過(guò)濾出可用的任務(wù)，并更改其顯示的比例。與前面提到的工具類(lèi)似，Bryntum也提供了關(guān)鍵路徑的計(jì)算。您可以使用其提前(leads)和滯后(lags)功能，來(lái)靈活地管理項(xiàng)目過(guò)程，并在任務(wù)之間創(chuàng)建各種類(lèi)型的依賴(lài)關(guān)系(如：FF、FS、SF、以及SS等)。
通過(guò)該工具，您可以只需使用普通CSS，即可輕松地設(shè)置所有元素的樣式，自定義行高，動(dòng)態(tài)更改自定義模板，以及設(shè)置每個(gè)時(shí)間線元素的呈現(xiàn)。另外，通過(guò)使用PHP、Java、ASP.NET、以及其他技術(shù)，開(kāi)發(fā)人員還能夠?qū)崿F(xiàn)一些服務(wù)器與數(shù)據(jù)庫(kù)的集成功能。
標(biāo)題名稱(chēng)：值得擁有!React的四種優(yōu)秀甘特圖方案
URL鏈接：http://m.5511xx.com/article/dhosijd.html
