給web頁面添加甘特圖，只需三條命令！

用MZGantt插件，給web頁面添加一個甘特圖，只需要三條命令。請看示例。

// ************開始*********<!-- 1. 導(dǎo)入甘特圖插件 -->
    <link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />

    <!-- 2. 定義甘特圖容器 -->
    <div id="GanttChartDIV" style="width:90%;height:500px;"></div>

		// 命令1.實例化甘特圖
   const myGantt=MZGantt.init();

    // 命令2：設(shè)置甘特圖數(shù)據(jù)
    var taskData=[{"id":11,
                    "name":"任務(wù)名稱1",
                    "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                    "resId":"劉德華",
                    "pctComp":40,}];

    // 命令3：創(chuàng)建甘特圖
    MZGantt.createGantt("GanttChartDIV", "day", {}, taskData);
    // ************完成***********

下面是一個完整的例子。

<!DOCTYPE html>
   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
           <!-- 導(dǎo)入甘特圖插件 -->
           <link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />
           <script language="javascript" src="../../gantt/mzgantt.js"></script>
       </head>
       <body>
           <!-- 第一步：定義甘特圖容器 -->
           <div id="GanttChartDIV" style="width:90%;height:500px;"></div>
           <script language="javascript">
               // MZGantt.LicenseKey="0oruALdKiUsAA4lLAkFGrAJ3g";

               // 第二步：設(shè)置甘特圖數(shù)據(jù)
               var taskData=[
                   {
                       "id":11,
                       "name":"任務(wù)名稱1",
                       "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                       "resId":"劉德華",
                       "pctComp":40,

                   },
                   {	"id":12,
                       "name":"任務(wù)名稱2",
                       "plan":[{"start":"2023-07-07","end":"2023-07-16","dur":10}],
                       "resId":"張曼玉",
                       "planBarColor":"#F5A9D0",
                       "pctComp":20,

                   },
                   {	"id":13,
                       "name":"任務(wù)名稱3",
                       "plan":[{"start":"2023-07-17","end":"2023-07-26","dur":10}],
                       "resId":"周星馳",
                       "pctComp":50,

                   }
               ];

               // 第三步: 實例化甘特圖
               const myGantt=MZGantt.init();

               // 第四步：創(chuàng)建甘特圖
               myGantt.createGantt("GanttChartDIV", "day", {}, taskData);
           </script>
       </body>
   </html>

甘特圖示例

有需要的朋友，可以到官網(wǎng)(mzgantt.tecjt.com)下載示例程序：

MZGantt甘特圖插件_普通js版示例程序: MZGantt是一款原生js開發(fā)的甘特圖插件。支持vue，ts，js等，支持流行的各種前端框架，可以快速引用到我們的web程序或者移動應(yīng)用中。

支持編輯，按條件標(biāo)記等

效果圖

特圖是什么？可能你是第一次聽到，甘特圖是通過活動順序和時間間隔表示某一特定項目其順序與時間的關(guān)系。不同于時間表，或日程規(guī)劃表，甘特圖可以使使用者更直觀的知道在某一時間的工作內(nèi)容和進(jìn)度。

甘特圖常見用途

甘特圖開始是用來作業(yè)排序的，但是發(fā)展到現(xiàn)在甘特圖的用途花樣繁多。
1.可以以活動項目為縱軸，時間為橫軸，規(guī)劃時間，合理規(guī)劃各項活動的時間安排；
2.可以以項目計劃為縱軸，員工為橫軸。管理人員，統(tǒng)籌安排好各個項目的相關(guān)工作人員；
3.可以以教室房間為縱軸，課程為橫軸，排列課程，安排布置相應(yīng)課程對應(yīng)的相應(yīng)教室。

甘特圖片例子

下列甘特圖均為來源于“億圖圖示”網(wǎng)站，在具有專業(yè)性的同時，也具有美觀性。

甘特圖繪制方法

甘特圖的繪制方法并不復(fù)雜，根據(jù)下列順序操作步驟，就可輕松繪制出一幅專業(yè)又美觀的甘特圖。

第一步：下載“億圖圖示”軟件，或者訪問在線版億圖圖示。打開軟件，就可以開始作圖了。

第二步：新建一幅甘特圖。依次點擊“項目管理”-“甘特圖”，從所提供的模板中選擇一個打開即可。

第三步：單擊選中畫布模板圖標(biāo)中的任意一列，再在右側(cè)工具欄中找到“甘特圖”的選項，上面有“列”的按鈕，點擊即可根據(jù)自己的需求來添加或刪除列。

第四步：單擊選中畫布模板圖標(biāo)中的任意一行，雙擊所需要更改的文本，在右側(cè)工具欄中就會出現(xiàn)“任務(wù)信息”，可在此重新編輯任務(wù)名稱，時間等相關(guān)信息。此外還可以點擊上方的文本，新添一個文字模板。

第五步：完成甘特圖的繪制后，可以點擊右上角的保存，打印，導(dǎo)出等按鈕。保存繪制完成后的甘特圖，選擇將作品導(dǎo)出為圖片，PDF，Excel，HTML等格式。

甘特圖繪制軟件---億圖圖示

億圖圖示是一款支持Windows、Mac以及Linux系統(tǒng)，也支持網(wǎng)頁在線使用的專業(yè)繪制圖形圖表的國產(chǎn)軟件。不僅提供給商務(wù)人士來將獲取的信息整合，歸納，總結(jié)，將信息圖像化，具體化，還可以提高工作效率，因為在億圖圖示提供十分豐富的模板和例子，這樣使用者不用從頭一步一步制作，只要選擇好適合需求的模板，對其進(jìn)行適當(dāng)修改完善，即可繪制出直觀大方的甘特圖。此外還能夠繪制諸如系統(tǒng)圖、軟件流程圖、甘特圖，組織結(jié)構(gòu)圖、商務(wù)圖表等260余種圖表。

為什么選擇億圖圖示繪制甘特圖

1.支持多個系統(tǒng)，多種模式：億圖圖示不僅支持Mac、Linux和Windows三種系統(tǒng)，還擁有桌面下載版和在線網(wǎng)頁版兩種選擇。且新版本的V10.1 支持桌面版與網(wǎng)頁版云同步存儲，使文件保存分享更方便。
2.支持多種格式導(dǎo)入：在表格類模板中，不僅可以一鍵將導(dǎo)入Visio，SVG文件，還可以批量轉(zhuǎn)化Visio文件到Edraw文件，輕松實現(xiàn)文件轉(zhuǎn)移，減少了不必要的時間浪費。
3.支持多種格式導(dǎo)出：除了各種圖片格式，億圖圖示還支持保存為Html，PDF，SVG，Microsoft Word, PowerPoint，Excel等格式。不論是在何種軟件中應(yīng)用都可以找到相匹配的文件格式。
4.軟件操作簡單，易上手：界面簡單明了，功能強(qiáng)大。不同于以往的全程自行繪制，億圖圖示自帶模版，通過拖拽式操作，就算是沒有繪畫基礎(chǔ)的新手也能迅速繪制出有專業(yè)水準(zhǔn)的圖表。
5.提供各式各樣繪圖模板：億圖圖示相比于其他繪圖軟件的優(yōu)點就在于擁有豐富的模板，據(jù)統(tǒng)計內(nèi)置超過26000種圖形模板和矢量符號，供用戶隨心選用，去修改完善模板，搭建起符合要求的演示模板。
6.分享便捷：圖表繪制完成后，不僅可以以多種格式保存，還可以一鍵分享至微信，朋友圈等。此外，億圖圖示還提供在線多人協(xié)作模式，讓工作交流無障礙，提升你的工作效率。

篇文章給大家講解 dhtmlxGantt用HTML作為內(nèi)部視圖和相關(guān)設(shè)置。

DHTMLX Gantt官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

HTML作為內(nèi)部視圖

您還可以使用一些自定義HTML作為甘特布局的內(nèi)部視圖。例如：

例如，您可以創(chuàng)建額外的網(wǎng)格和時間線視圖，這些視圖將為主甘特圖創(chuàng)建一個底部資源面板。實施這樣的步驟自定義布局是：

gantt.config.layout={
 css: "gantt_container",
  rows: [
    {
      cols: [
        {view: "grid",scrollX: "scrollHor", scrollY: "scrollVer"},
        { html:"custom content", 
            css:"custom-content", width:50},
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        { html:"custom content", 
            css:"custom-content", width:50},
        {view: "scrollbar", id: "scrollVer"}
      ]
    },
    {view: "scrollbar", scroll: "x", id: "scrollHor"}
 ]
}

所需的視圖和設(shè)置班時間。

甘特圖對象的公共API包含從特定布局視圖派生的方法，例如getTaskPosition 、 getTaskNode、getScrollState 。

為了使這些方法按預(yù)期工作，布局必須包含默認(rèn)網(wǎng)格、時間線、滾動條，并且甘特圖應(yīng)該能夠找到它們。這是通過為默認(rèn)視圖分配特定的ID來完成的：

gantt.config.layout={
 css: "gantt_container",
  rows: [
  {
   cols: [
    {view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
    {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
    {view: "scrollbar", id: "scrollVer"}
   ]
  },
  {view: "scrollbar", id: "scrollHor"}
 ]
};

所需的視圖及其ID是：

視圖：“網(wǎng)格”，id：“網(wǎng)格”
視圖：“時間線”，id：“時間線”
視圖：“滾動條”，id：“scrollHor”
視圖：“滾動條”，id：“scrollVer”

請注意，如果未指定id，甘特圖將使用視圖名稱作為默認(rèn)視圖 id，或自動生成唯一 id。因此，在默認(rèn)網(wǎng)格和時間線的情況下，可以省略“id”參數(shù)：

gantt.config.layout={
 css: "gantt_container",
  rows: [
  {
   cols: [
    {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
    {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
    {view: "scrollbar", id: "scrollVer"}
   ]
  },
  {view: "scrollbar", id: "scrollHor"}
 ]
};

布局可以包含任何額外數(shù)量的視圖。

視圖的配置和模板

網(wǎng)格和時間線視圖重用來自全局gantt.config/gantt.templates的模板和配置。但是，可以在布局級別為特定視圖覆蓋這些設(shè)置。例如：

var secondGridColumns={
  columns: [
    {
        name: "status", label: "Status", width: 60, align: "center", 
        template: function (task) {
            var progress=task.progress || 0;
            return Math.floor(progress * 100) + "";
        }
    },
    {
        name: "impact", width: 80, label: "Impact", template: function (task) {
            return (task.duration * 1000).toLocaleString("en-US", {
              style: 'currency', currency: 'USD'
          });
        }
    }
  ]
};
 
gantt.config.layout={
  css: "gantt_container",
  rows: [
    {
      cols: [
        {view: "grid", id: "grid", width: 320, scrollY: "scrollVer"},
        {resizer: true, width: 1},
        {view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        {resizer: true, width: 1},
        {view: "grid", width: 120, bind:"task", 
            scrollY:"scrollVer", config:secondGridColumns},           {view: "scrollbar", scroll: "y", id: "scrollVer"}
      ]
    },
    {view: "scrollbar", id: "scrollHor", height: 20}
  ]
};

視圖可以從父布局繼承配置和模板：

var resourceConfig={        scale_height: 30      };                         
gantt.config.layout={
  css: "gantt_container",
  rows: [
    {
      cols: [
        {view: "grid", group:"grids", scrollY: "scrollVer"},
        {resizer: true, width: 1},
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        {view: "scrollbar", id: "scrollVer", group:"vertical"}
      ],
      gravity:2
    },
    {resizer: true, width: 1},
    {
      config: resourceConfig,         cols: [
        {view: "resourceGrid", group:"grids", width: 435, scrollY: "resourceVScroll" },
        {resizer: true, width: 1},
        {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
        {view: "scrollbar", id: "resourceVScroll", group:"vertical"}
      ],
      gravity:1
    },
    {view: "scrollbar", id: "scrollHor"}
  ]
};

dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表，可滿足項目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關(guān)內(nèi)容，請鎖定本套系列教程。

在線咨詢

上一篇：Node.js 和 Java 的史詩級對決，誰才是開
下一篇：實時視頻直播客戶端技術(shù)盤點Native、HTML5、

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商