純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開發(fā)、數(shù)據(jù)填報、在線文檔、圖表公式聯(lián)動、類 Excel UI 設(shè)計等業(yè)務(wù)場景，并在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成中無需大量代碼開發(fā)和測試，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險。

點(diǎn)擊下載SpreadJS正式版

如果一個項(xiàng)目由多個任務(wù)組成，而任務(wù)之間又有關(guān)聯(lián)，我們該怎樣準(zhǔn)確的顯示項(xiàng)目整體進(jìn)度呢？

使用甘特圖，應(yīng)該是最好的方式。

甘特圖，不僅能夠讓管理者實(shí)時有效的掌握項(xiàng)目進(jìn)度和資源分配，同時能夠加強(qiáng)過程的可視化管理、人員實(shí)時溝通。因此，在企業(yè)項(xiàng)目管理工作中被廣泛應(yīng)用。

由于項(xiàng)目管理的工作往往存在時間上的交叉。在項(xiàng)目開始之前，領(lǐng)導(dǎo)都會要求我們先查找可以并行的事項(xiàng)，并將它們安排在一起，以此實(shí)現(xiàn)對時間的高效利用。 合理的使用甘特圖，可以把每天的工作安排得當(dāng)。

Excel在2010版本中就已經(jīng)內(nèi)置了甘特圖類型，SpreadJS 作為一款高度類似Excel的純前端表格控件，對甘特圖這一特殊圖表同樣提供支持。

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、招商銀行、蘇寧易購、天弘基金等為代表的企業(yè)用戶青睞。

用以下兩種方式，即可在使用 SpreadJS 搭建的Web系統(tǒng)中實(shí)現(xiàn)甘特圖：

方法一：SpreadJS + ECharts 組件，實(shí)現(xiàn)甘特圖

作為一款前端開發(fā)工具，SpreadJS具備一流的框架支持及二次擴(kuò)展能力，可以通過集成第三方圖表組件（如ECharts）實(shí)現(xiàn)甘特圖，效果如下圖：

（在 SpreadJS 的表格UI界面實(shí)現(xiàn)甘特圖效果）

這里的甘特圖是通過SpreadJS的浮動對象來實(shí)現(xiàn)的。

在 SpreadJS中，你可以給表單添加浮動對象元素，浮動對象元素會覆蓋在單元格的上面顯示，該對象具備強(qiáng)大的框架兼容能力，可采用事件機(jī)制實(shí)現(xiàn)數(shù)圖聯(lián)動，具體實(shí)現(xiàn)方法可以參考示例代碼：EchartsWithSpreadJS。

方法二：自定義 SpreadJS 圖表，實(shí)現(xiàn)甘特圖

從 SpreadJS V13.0版本開始，通過對其圖表組件自定義，即可快速實(shí)現(xiàn)大家所期待的甘特圖：

這里的甘特圖是通過SpreadJS的自定義圖表組件功能來實(shí)現(xiàn)的。

SpreadJS內(nèi)置了外觀與excel高度類似的圖表功能，并提供了高度靈活的自定制能力，如可自定義圖表的橫縱坐標(biāo)軸樣式、圖例、圖表區(qū)樣式、鼠標(biāo)懸停效果和行為、趨勢線和誤差線等，借助此功能，你能更加簡單和靈活的在SpreadJS中創(chuàng)建一個圖表。

當(dāng)然，通過自定義SpreadJS圖表功能實(shí)現(xiàn)的甘特圖同樣支持?jǐn)?shù)圖聯(lián)動，具體效果請參考附件示例代碼：SpreadJS甘特圖。

以上兩種方式，都可以用來在SpreadJS 集成的Web系統(tǒng)中實(shí)現(xiàn)甘特圖。對于新接觸 SpreadJS的用戶，建議使用第二種方式，更加簡單、擴(kuò)展性更強(qiáng)。

說到甘特圖，我們慧都網(wǎng)有多款甘特圖產(chǎn)品，可應(yīng)用于在磁電/裝備制造/食品工業(yè)/建筑等行業(yè)，幫您實(shí)現(xiàn)項(xiàng)目管理、資源調(diào)度、生產(chǎn)排程、以及甘特圖的定制開發(fā)，輕松搞定您的工作！