dhtmlxGantt是用於跨瀏覽器和跨平臺應用程式的功能齊全的Gantt圖表。可滿足專案管理應用程式的所有需求，是最完善的甘特圖圖表庫。它允許你建立動態甘特圖，並以一個方便的圖形化方式視覺化專案進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關係，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

下載dhtmlxGantt試用版【慧都網】

dhtmlxGantt庫允許您以Excel和iCal格式從甘特圖匯出資料。您也可以從Excel檔案將資料匯入甘特檔案。

請求大小限制

有一個通用的API端點https://export.dhtmlx.com/gantt，該端點可用於所有匯出方法（exportToPDF，exportToPNG，exportToMSProject等）以及importFromExcel 方法。請求的最大大小為10 MB。

還有一個單獨的API端點https://export.dhtmlx.com/gantt/project，專門用於MSProject匯出/匯入服務 （僅exportToMSProject / importFromMSProject）。最大請求大小：40 MB。

匯出到Excel

要將資料從甘特圖匯出到Excel文件，請執行以下操作：

• 在頁面上包含“ http://export.dhtmlx.com/gantt/api.js”檔案以啟用線上匯出服務：

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>  
<link rel="stylesheet" href="codebase/dhtmlxgantt.css" type="text/css">

• 呼叫exportToExcel方法以從甘特圖匯出資料：

<input value="Export to Excel" type="button" onclick='gantt.exportToExcel()'>
 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

相關樣本： 匯出資料：MS Project，PrimaveraP6，Excel和iCal
相關樣本： 匯出資料：線上儲存

匯出方法的引數

所述exportToExcel（）方法作為一個引數與多個屬性（所有屬性是可選的）的物件：

• 名稱-（字串）設定輸出檔案的副檔名為'.xlsx'
• 列-（陣列）允許配置輸出Excel工作表的列。列物件的屬性是：

1. 'id' -（string，number）事件的屬性，將對映到列
2. 'header' -（字串）列標題
3. 'width' -（number）列的寬度，以畫素為單位
4. 'type' -（字串）列型別
5. server-（字串）設定請求的API端點。可以與匯出服務的本地安裝一起使用。預設值為https://export.dhtmlx.com/gantt

• visual-（boolean）將時間線圖新增到匯出的Excel文件中。預設為假
• cellColors-（boolean）如果設定為true，則匯出文件的單元格將具有由timeline_cell_class模板定義的顏色， 匯出color和background-color屬性
• data-（object）設定將在輸出甘特圖中顯示的自定義資料來源
• date_format-（字串）設定日期的格式，該日期將在匯出的Excel文件中顯示。您可以在此處檢視可用格式程式碼的完整列表。

使用可選屬性呼叫匯出方法

gantt.exportToExcel({
    name:"document.xlsx", 
    columns:[
        { id:"text",  header:"Title", width:150 },
        { id:"start_date",  header:"Start date", width:250, type:"date" }
    ],
    server:"https://myapp.com/myexport/gantt",
    visual:true,
    cellColors:true,
    data:{},
    date_format: "dddd d, mmmm yyyy"
});

設定要匯出的自定義資料來源

要使用自定義資料集匯出甘特圖（即不使用初始甘特圖中顯示的資料），請在exportToExcel方法的引數中使用data屬性 ：

gantt.exportToExcel({   
    name:"document.xlsx", 
    data:[
        {id:1, text:"Project #1", start_date:"01-04-2020", duration:18},
        {id:2, text:"Task #1", start_date:"02-04-2020",duration:8, parent:1},
        {id:3, text:"Task #2", start_date:"11-04-2020",duration:8, parent:1}
    ]      
});

請注意，您不能將某些URL指定為data引數的值，而只能將其指定為資料物件。新增要匯出的任務的顏色

您可以通過將視覺屬性的值設定為“ base-colors”，將任務的顏色新增到甘特圖的匯出的Excel檔案中：

gantt.exportToExcel({
    visual: "base-colors", 
    cellColors: true
})

從Excel匯入

由於無法自動將Excel文件的任意列對映到Gantt資料模型，因此匯出服務會將文件轉換為以JSON返回的行陣列。將最終文件轉換為甘特資料是最終開發人員的責任。

為了轉換Excel檔案，您需要將以下請求傳送到匯出服務：

• 請求網址-https: //export.dhtmlx.com/gantt
• 請求方法-POST
• 內容型別-多部分/表單資料

請求引數為：

• 檔案-Excel檔案
• 型別-“ excel-parse”
• 資料-（可選）帶有設定的JSON字串

例如：

<form action="https://export.dhtmlx.com/gantt" method="POST" 
    enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="hidden" name="type" value="excel-parse">
    <button type="submit">Get</button>
</form>

另外，您可以使用客戶端API：

gantt.importFromExcel({
    server:"https://export.dhtmlx.com/gantt",
    data: file,
    callback: function(project){
        console.log(project)
    }
});

其中file是File的例項，其中應包含一個Excel（xlsx）檔案。
gantt.importFromExcel需要HTML5 File API支援。

響應

響應將包含帶有物件陣列的JSON：

[
   { "Name": "Task Name", "Start": "2018-08-11 10:00", "Duration": 8 },
   ...
]

where：

• 第一行的值用作匯入物件的屬性名稱。
• 每行被序列化為一個單獨的物件。
• 日期值以“％Y-％m-％d％H：％i”格式序列化。

匯入設定

• 匯入服務期望匯入的工作表的第一行是包含列名稱的標題行。
• 預設情況下，服務返回文件的第一張紙。為了返回不同的工作表，請使用工作表引數（從零開始）

gantt.importFromExcel({
    server:"https://export.dhtmlx.com/gantt",
    data: file,
    sheet:2, // print third sheet
    callback: function (rows) {}
});

匯出到iCal

要將資料從甘特圖匯出到iCal字串，請執行以下操作：
在頁面上包含“ http://export.dhtmlx.com/gantt/api.js”檔案以啟用線上匯出服務：

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>  
<link rel="stylesheet" href="codebase/dhtmlxgantt.css" type="text/css">

呼叫exportToICal方法以從甘特圖匯出資料：

<input value="Export to iCal" type="button" onclick='gantt.exportToICal()'>
 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

匯出方法的引數

所述exportToICal（）方法作為一個引數與下列屬性（可選）的物件：

server-（字串）設定請求的API端點。可以與匯出服務的本地安裝一起使用。預設值為https://export.dhtmlx.com/gantt。
使用可選屬性呼叫匯出方法

gantt.exportToICal({
    server:"https://myapp.com/myexport/gantt"
});

關產品推薦：
VARCHART XGantt：支援ActiveX、.Net等平臺的C#甘特圖控制元件
AnyGantt：構建複雜且內容豐富的甘特圖的理想工具
jQuery Gantt Package：基於HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package：對任務和時間的分配管理的甘特圖
APS幫助提升企業生產效率，真正實現生產計劃視覺化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率