整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家分享一款超全功能的跨瀏覽器平臺甘特圖表庫DHTMLXGantt。
dhtmlx-gantt DHTMLX公司開源的 JavaScript 甘特圖/橫道圖/條狀圖類庫。用來快速構建顯示項目、進度，和隨著時間關聯的相關進展情況。
dhtmlx-Gantt 由位于俄羅斯圣彼得堡的DHTMLX公司開發的甘特圖組件，適用于B/S模式的Web應用開發。被廣泛應用于項目管理、建筑、IT軟件、汽車等領域。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>gantt demo</title>
<script src="dhtmlxgantt.js?v=6.0.0"></script>
<link rel="stylesheet" href="dhtmlxgantt.css?v=6.0.0">
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
var taskList = {
data: [
{
id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
progress: 0.4, open: true
},
{
id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
progress: 0.6, parent: 1
},
{
id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
progress: 0.6, parent: 1
}
],
links: [
{id: 1, source: 1, target: 2, type: "1"},
{id: 2, source: 2, target: 3, type: "0"}
]
};
gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.parse(taskList);
</script>
</body>
</html>為了配置甘特圖所需外觀，dhtmlxGantt提供了2個對象 config和templates。
gantt.config //日期，比例，控件等的配置選項。
gantt.templates //格式化甘特圖中使用的日期和標簽的模板。gantt.config.scale_unit = "year"; //按年顯示
gantt.config.step = 1.5; //設置時間刻度的步長（X軸）
gantt.config.date_scale = "%Y"; //日期尺度按年
gantt.init("gantt_here");gantt.config.scale_unit = "month"; //按月顯示
gantt.config.date_scale = "%F, %Y"; //設置時間刻度的格式（X軸） 多個尺度
gantt.config.scale_height = 50; //設置時間刻度的高度和網格的標題
gantt.config.subscales = [
{unit: "day", step: 1, date: "%j, %D"}
]; //指定第二個時間刻度
gantt.init("gantt_here");gantt.templates.task_text=function(start,end,task){
return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.username;
};
gantt.init("gantt_here");官網提供了豐富的文檔示例。
非常棒的一款開源甘特圖庫，可以讓你預測時間、成本、數量及質量上的關聯并回溯結果。也能幫助你考慮人力、資源、日期、項目中重復的要素和關鍵部分，讓你更加直觀的看到任務進展及資源的利用率等。
# 官網地址
https://dhtmlx.com/docs/products/dhtmlxGantt/
# 倉庫地址
https://github.com/DHTMLX/gantt好了，今天就介紹到這里。大家如果有其它不錯的甘特圖庫，歡迎一起交流討論！
擊“了解更多”獲取SpreadJS v14.0正式版下載
如果一個項目由多個任務組成，而任務之間又有關聯，我們該怎樣準確的顯示項目整體進度呢？
使用甘特圖，應該是最好的方式。
甘特圖，不僅能夠讓管理者實時有效的掌握項目進度和資源分配，同時能夠加強過程的可視化管理、人員實時溝通。因此，在企業項目管理工作中被廣泛應用。
由于項目管理的工作往往存在時間上的交叉。在項目開始之前，領導都會要求我們先查找可以并行的事項，并將它們安排在一起，以此實現對時間的高效利用。 合理的使用甘特圖，可以把每天的工作安排得當。
Excel在2010版本中就已經內置了甘特圖類型，SpreadJS 作為一款高度類似Excel的純前端表格控件，對甘特圖這一特殊圖表同樣提供支持。
SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、遠光軟件、蘇寧易購、天弘基金等為代表的企業用戶青睞。
用以下兩種方式，即可在使用 SpreadJS 搭建的Web系統中實現甘特圖：
作為一款前端開發工具，SpreadJS具備一流的框架支持及二次擴展能力，可以通過集成第三方圖表組件（如ECharts）實現甘特圖，效果如下圖：
這里的甘特圖是通過SpreadJS的浮動對象來實現的。
在 SpreadJS中，你可以給表單添加浮動對象元素，浮動對象元素會覆蓋在單元格的上面顯示，該對象具備強大的框架兼容能力，可采用事件機制實現數圖聯動，具體實現方法可以參考示例代碼：EchartsWithSpreadJS。
從 SpreadJS V13.0版本開始，通過對其圖表組件自定義，即可快速實現大家所期待的甘特圖：
這里的甘特圖是通過SpreadJS的自定義圖表組件功能來實現的。
SpreadJS內置了外觀與excel高度類似的圖表功能，并提供了高度靈活的自定制能力，如可自定義圖表的橫縱坐標軸樣式、圖例、圖表區樣式、鼠標懸停效果和行為、趨勢線和誤差線等，借助此功能，你能更加簡單和靈活的在SpreadJS中創建一個圖表。
當然，通過自定義SpreadJS圖表功能實現的甘特圖同樣支持數圖聯動，具體效果請參考附件示例代碼：SpreadJS甘特圖。
以上兩種方式，都可以用來在SpreadJS 集成的Web系統中實現甘特圖。對于新接觸 SpreadJS的用戶，建議使用第二種方式，更加簡單、擴展性更強。
SpreadJS | 下載試用
純前端表格控件SpreadJS，可滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發、數據填報、在線文檔、圖表公式聯動、類 Excel UI 設計等業務場景，并在數據可視化、Excel 導入導出、公式引用、數據綁定、框架集成中無需大量代碼開發和測試，極大降低了企業研發成本和項目交付風險。
本文轉載自葡萄城
果一個項目由多個任務組成，而任務之間又有關聯，我們該怎樣準確的顯示項目整體進度呢?
使用甘特圖，應該是最好的方式。甘特圖，不僅能夠讓管理者實時有效的掌握項目進度和資源分配，同時能夠加強過程的可視化管理、人員實時溝通。因此，在企業項目管理工作中被廣泛應用。
甘特圖效果
由于項目管理的工作往往存在時間上的交叉。在項目開始之前，領導都會要求我們先查找可以并行的事項，并將它們安排在一起，以此實現對時間的高效利用。 合理的使用甘特圖，可以把每天的工作安排得當。
Excel在2010版本中就已經內置了甘特圖類型，SpreadJS， 作為一款高度類似Excel的純前端表格控件，對甘特圖這一特殊圖表同樣提供支持。
SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、招商銀行、蘇寧易購、天弘基金等為代表的企業用戶青睞。
用以下兩種方式，即可在使用 SpreadJS 搭建的Web系統中實現甘特圖：
方法一：SpreadJS + ECharts 組件，實現甘特圖
作為一款前端開發工具，SpreadJS具備一流的框架支持及二次擴展能力，可以通過集成第三方圖表組件(如ECharts)實現甘特圖，效果如下圖：
在 SpreadJS 的表格UI界面實現甘特圖效果
這里的甘特圖是通過SpreadJS的浮動對象來實現的。
在 SpreadJS中，你可以給表單添加浮動對象元素，浮動對象元素會覆蓋在單元格的上面顯示，該對象具備強大的框架兼容能力，可采用事件機制實現數圖聯動。
方法二：自定義 SpreadJS 圖表，實現甘特圖
從 SpreadJS V13.0版本開始，通過對其圖表組件自定義，即可快速實現大家所期待的甘特圖：
這里的甘特圖是通過SpreadJS的自定義圖表組件功能來實現的。
SpreadJS內置了外觀與Excel高度類似的圖表功能，并提供了高度靈活的自定制能力，如可自定義圖表的橫縱坐標軸樣式、圖例、圖表區樣式、鼠標懸停效果和行為、趨勢線和誤差線等，借助此功能，你能更加簡單和靈活的在SpreadJS中創建一個圖表。
當然，通過自定義SpreadJS圖表功能實現的甘特圖同樣支持數圖聯動。
以上兩種方式，都可以用來在SpreadJS 集成的Web系統中實現甘特圖。對于新接觸 SpreadJS的用戶，建議使用第二種方式，更加簡單、擴展性更強。
點擊此處，訪問 SpreadJS 產品官網下載產品，體驗甘特圖、股票圖、散點圖等更多圖表類型。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
