轉帖|使用教程|編輯:龔雪|2020-11-19 10:02:32.340|閱讀 656 次
概述:本文通過2種方法的解析+示例,教您如何使用SpreadJS在前端實現甘特圖,歡迎下載最新版體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
如果一個項目由多個任務組成,而任務之間又有關聯,我們該怎樣準確的顯示項目整體進度呢?
使用甘特圖,應該是最好的方式。
甘特圖,不僅能夠讓管理者實時有效的掌握項目進度和資源分配,同時能夠加強過程的可視化管理、人員實時溝通。因此,在企業項目管理工作中被廣泛應用。
由于項目管理的工作往往存在時間上的交叉。在項目開始之前,領導都會要求我們先查找可以并行的事項,并將它們安排在一起,以此實現對時間的高效利用。 合理的使用甘特圖,可以把每天的工作安排得當。
Excel在2010版本中就已經內置了甘特圖類型,SpreadJS 作為一款高度類似Excel的純前端表格控件,對甘特圖這一特殊圖表同樣提供支持。
SpreadJS 是一款基于 HTML5 的純前端電子表格控件,兼容 450 種以上的 Excel 公式,憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性,備受以華為、遠光軟件、蘇寧易購、天弘基金等為代表的企業用戶青睞。
用以下兩種方式,即可在使用 SpreadJS 搭建的Web系統中實現甘特圖:
作為一款前端開發工具,SpreadJS具備一流的框架支持及二次擴展能力,可以通過集成第三方圖表組件(如ECharts)實現甘特圖,效果如下圖:
這里的甘特圖是通過SpreadJS的浮動對象來實現的。
在 SpreadJS中,你可以給表單添加浮動對象元素,浮動對象元素會覆蓋在單元格的上面顯示,該對象具備強大的框架兼容能力,可采用事件機制實現數圖聯動,具體實現方法可以參考示例代碼:。
從 SpreadJS V13.0版本開始,通過對其圖表組件自定義,即可快速實現大家所期待的甘特圖:
這里的甘特圖是通過SpreadJS的自定義圖表組件功能來實現的。
SpreadJS內置了外觀與excel高度類似的圖表功能,并提供了高度靈活的自定制能力,如可自定義圖表的橫縱坐標軸樣式、圖例、圖表區樣式、鼠標懸停效果和行為、趨勢線和誤差線等,借助此功能,你能更加簡單和靈活的在SpreadJS中創建一個圖表。
當然,通過自定義SpreadJS圖表功能實現的甘特圖同樣支持數圖聯動,具體效果請參考附件示例代碼:。
以上兩種方式,都可以用來在SpreadJS 集成的Web系統中實現甘特圖。對于新接觸 SpreadJS的用戶,建議使用第二種方式,更加簡單、擴展性更強。
純前端表格控件SpreadJS,可滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發、數據填報、在線文檔、圖表公式聯動、類 Excel UI 設計等業務場景,并在數據可視化、Excel 導入導出、公式引用、數據綁定、框架集成中無需大量代碼開發和測試,極大降低了企業研發成本和項目交付風險。
本文轉載自
購正版SpreadJS報表控件授權限時優惠!最高立減萬元!點擊
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: