dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。它允許你創(chuàng)建動(dòng)態(tài)甘特圖，并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動(dòng)之間的依賴(lài)關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動(dòng)到樹(shù)結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

dhtmlxGantt庫(kù)允許您以Excel和iCal格式從甘特圖導(dǎo)出數(shù)據(jù)。您也可以從Excel文件將數(shù)據(jù)導(dǎo)入甘特文件。

請(qǐng)求大小限制

有一個(gè)通用的API端點(diǎn)//export.dhtmlx.com/gantt，該端點(diǎn)可用于所有導(dǎo)出方法（exportToPDF，exportToPNG，exportToMSProject等）以及importFromExcel 方法。請(qǐng)求的最大大小為10 MB。

還有一個(gè)單獨(dú)的API端點(diǎn)//export.dhtmlx.com/gantt/project，專(zhuān)門(mén)用于MSProject導(dǎo)出/導(dǎo)入服務(wù) （僅exportToMSProject / importFromMSProject）。最大請(qǐng)求大小：40 MB。

導(dǎo)出到Excel

要將數(shù)據(jù)從甘特圖導(dǎo)出到Excel文檔，請(qǐng)執(zhí)行以下操作：

• 在頁(yè)面上包含“ //export.dhtmlx.com/gantt/api.js”文件以啟用在線導(dǎo)出服務(wù)：

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

• 調(diào)用exportToExcel方法以從甘特圖導(dǎo)出數(shù)據(jù)：

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

導(dǎo)出方法的參數(shù)

所述exportToExcel（）方法作為一個(gè)參數(shù)與多個(gè)屬性（所有屬性是可選的）的對(duì)象：

• 名稱(chēng)-（字符串）設(shè)置輸出文件的擴(kuò)展名為'.xlsx'
• 列-（數(shù)組）允許配置輸出Excel工作表的列。列對(duì)象的屬性是：

1. 'id' -（string，number）事件的屬性，將映射到列
2. 'header' -（字符串）列標(biāo)題
3. 'width' -（number）列的寬度，以像素為單位
4. 'type' -（字符串）列類(lèi)型
5. server-（字符串）設(shè)置請(qǐng)求的API端點(diǎn)。可以與導(dǎo)出服務(wù)的本地安裝一起使用。默認(rèn)值為//export.dhtmlx.com/gantt

• visual-（boolean）將時(shí)間線圖添加到導(dǎo)出的Excel文檔中。默認(rèn)為假
• cellColors-（boolean）如果設(shè)置為true，則導(dǎo)出文檔的單元格將具有由timeline_cell_class模板定義的顏色， 導(dǎo)出color和background-color屬性
• data-（object）設(shè)置將在輸出甘特圖中顯示的自定義數(shù)據(jù)源
• date_format-（字符串）設(shè)置日期的格式，該日期將在導(dǎo)出的Excel文檔中顯示。您可以在此處查看可用格式代碼的完整列表。

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

要使用自定義數(shù)據(jù)集導(dǎo)出甘特圖（即不使用初始甘特圖中顯示的數(shù)據(jù)），請(qǐng)?jiān)趀xportToExcel方法的參數(shù)中使用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}
    ]      
});

您可以通過(guò)將視覺(jué)屬性的值設(shè)置為“ base-colors”，將任務(wù)的顏色添加到甘特圖的導(dǎo)出的Excel文件中：

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

由于無(wú)法自動(dòng)將Excel文檔的任意列映射到Gantt數(shù)據(jù)模型，因此導(dǎo)出服務(wù)會(huì)將文檔轉(zhuǎn)換為以JSON返回的行數(shù)組。將最終文檔轉(zhuǎn)換為甘特?cái)?shù)據(jù)是最終開(kāi)發(fā)人員的責(zé)任。

為了轉(zhuǎn)換Excel文件，您需要將以下請(qǐng)求發(fā)送到導(dǎo)出服務(wù)：

• 請(qǐng)求網(wǎng)址-https: //export.dhtmlx.com/gantt
• 請(qǐng)求方法-POST
• 內(nèi)容類(lèi)型-多部分/表單數(shù)據(jù)

• 文件-Excel文件
• 類(lèi)型-“ excel-parse”
• 數(shù)據(jù)-（可選）帶有設(shè)置的JSON字符串

<form action="http://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>

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

響應(yīng)

響應(yīng)將包含帶有對(duì)象數(shù)組的JSON：

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

• 第一行的值用作導(dǎo)入對(duì)象的屬性名稱(chēng)。
• 每行被序列化為一個(gè)單獨(dú)的對(duì)象。
• 日期值以“％Y-％m-％d％H：％i”格式序列化。

• 導(dǎo)入服務(wù)期望導(dǎo)入的工作表的第一行是包含列名稱(chēng)的標(biāo)題行。
• 默認(rèn)情況下，服務(wù)返回文檔的第一張紙。為了返回不同的工作表，請(qǐng)使用工作表參數(shù)（從零開(kāi)始）

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

要將數(shù)據(jù)從甘特圖導(dǎo)出到iCal字符串，請(qǐng)執(zhí)行以下操作：
在頁(yè)面上包含“ //export.dhtmlx.com/gantt/api.js”文件以啟用在線導(dǎo)出服務(wù)：

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

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

所述exportToICal（）方法作為一個(gè)參數(shù)與下列屬性（可選）的對(duì)象：

server-（字符串）設(shè)置請(qǐng)求的API端點(diǎn)。可以與導(dǎo)出服務(wù)的本地安裝一起使用。默認(rèn)值為//export.dhtmlx.com/gantt。
使用可選屬性調(diào)用導(dǎo)出方法

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

關(guān)產(chǎn)品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺(tái)的C#甘特圖控件

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺(tái)jQuery Gantt包

phGantt Time Package：對(duì)任務(wù)和時(shí)間的分配管理的甘特圖

APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率