给web页面添加甘特图，只需三条命令！

用MZGantt插件，给web页面添加一个甘特图，只需要三条命令。请看示例。

// ************开始*********<!-- 1. 导入甘特图插件 -->
    <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：设置甘特图数据
    var taskData=[{"id":11,
                    "name":"任务名称1",
                    "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                    "resId":"刘德华",
                    "pctComp":40,}];

    // 命令3：创建甘特图
    MZGantt.createGantt("GanttChartDIV", "day", {}, taskData);
    // ************完成***********

下面是一个完整的例子。

<!DOCTYPE html>
   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
           <!-- 导入甘特图插件 -->
           <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";

               // 第二步：设置甘特图数据
               var taskData=[
                   {
                       "id":11,
                       "name":"任务名称1",
                       "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                       "resId":"刘德华",
                       "pctComp":40,

                   },
                   {	"id":12,
                       "name":"任务名称2",
                       "plan":[{"start":"2023-07-07","end":"2023-07-16","dur":10}],
                       "resId":"张曼玉",
                       "planBarColor":"#F5A9D0",
                       "pctComp":20,

                   },
                   {	"id":13,
                       "name":"任务名称3",
                       "plan":[{"start":"2023-07-17","end":"2023-07-26","dur":10}],
                       "resId":"周星驰",
                       "pctComp":50,

                   }
               ];

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

               // 第四步：创建甘特图
               myGantt.createGantt("GanttChartDIV", "day", {}, taskData);
           </script>
       </body>
   </html>

甘特图示例

有需要的朋友，可以到官网(mzgantt.tecjt.com)下载示例程序：

MZGantt甘特图插件_普通js版示例程序: MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到我们的web程序或者移动应用中。

支持编辑，按条件标记等

效果图

特图是什么？可能你是第一次听到，甘特图是通过活动顺序和时间间隔表示某一特定项目其顺序与时间的关系。不同于时间表，或日程规划表，甘特图可以使使用者更直观的知道在某一时间的工作内容和进度。

甘特图常见用途

甘特图开始是用来作业排序的，但是发展到现在甘特图的用途花样繁多。
1.可以以活动项目为纵轴，时间为横轴，规划时间，合理规划各项活动的时间安排；
2.可以以项目计划为纵轴，员工为横轴。管理人员，统筹安排好各个项目的相关工作人员；
3.可以以教室房间为纵轴，课程为横轴，排列课程，安排布置相应课程对应的相应教室。

甘特图片例子

下列甘特图均为来源于“亿图图示”网站，在具有专业性的同时，也具有美观性。

甘特图绘制方法

甘特图的绘制方法并不复杂，根据下列顺序操作步骤，就可轻松绘制出一幅专业又美观的甘特图。

第一步：下载“亿图图示”软件，或者访问在线版亿图图示。打开软件，就可以开始作图了。

第二步：新建一幅甘特图。依次点击“项目管理”-“甘特图”，从所提供的模板中选择一个打开即可。

第三步：单击选中画布模板图标中的任意一列，再在右侧工具栏中找到“甘特图”的选项，上面有“列”的按钮，点击即可根据自己的需求来添加或删除列。

第四步：单击选中画布模板图标中的任意一行，双击所需要更改的文本，在右侧工具栏中就会出现“任务信息”，可在此重新编辑任务名称，时间等相关信息。此外还可以点击上方的文本，新添一个文字模板。

第五步：完成甘特图的绘制后，可以点击右上角的保存，打印，导出等按钮。保存绘制完成后的甘特图，选择将作品导出为图片，PDF，Excel，HTML等格式。

甘特图绘制软件---亿图图示

亿图图示是一款支持Windows、Mac以及Linux系统，也支持网页在线使用的专业绘制图形图表的国产软件。不仅提供给商务人士来将获取的信息整合，归纳，总结，将信息图像化，具体化，还可以提高工作效率，因为在亿图图示提供十分丰富的模板和例子，这样使用者不用从头一步一步制作，只要选择好适合需求的模板，对其进行适当修改完善，即可绘制出直观大方的甘特图。此外还能够绘制诸如系统图、软件流程图、甘特图，组织结构图、商务图表等260余种图表。

为什么选择亿图图示绘制甘特图

1.支持多个系统，多种模式：亿图图示不仅支持Mac、Linux和Windows三种系统，还拥有桌面下载版和在线网页版两种选择。且新版本的V10.1 支持桌面版与网页版云同步存储，使文件保存分享更方便。
2.支持多种格式导入：在表格类模板中，不仅可以一键将导入Visio，SVG文件，还可以批量转化Visio文件到Edraw文件，轻松实现文件转移，减少了不必要的时间浪费。
3.支持多种格式导出：除了各种图片格式，亿图图示还支持保存为Html，PDF，SVG，Microsoft Word, PowerPoint，Excel等格式。不论是在何种软件中应用都可以找到相匹配的文件格式。
4.软件操作简单，易上手：界面简单明了，功能强大。不同于以往的全程自行绘制，亿图图示自带模版，通过拖拽式操作，就算是没有绘画基础的新手也能迅速绘制出有专业水准的图表。
5.提供各式各样绘图模板：亿图图示相比于其他绘图软件的优点就在于拥有丰富的模板，据统计内置超过26000种图形模板和矢量符号，供用户随心选用，去修改完善模板，搭建起符合要求的演示模板。
6.分享便捷：图表绘制完成后，不仅可以以多种格式保存，还可以一键分享至微信，朋友圈等。此外，亿图图示还提供在线多人协作模式，让工作交流无障碍，提升你的工作效率。

篇文章给大家讲解 dhtmlxGantt用HTML作为内部视图和相关设置。

DHTMLX Gantt官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

HTML作为内部视图

您还可以使用一些自定义HTML作为甘特布局的内部视图。例如：

例如，您可以创建额外的网格和时间线视图，这些视图将为主甘特图创建一个底部资源面板。实施这样的步骤自定义布局是：

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"}
 ]
}

所需的视图和设置班时间。

甘特图对象的公共API包含从特定布局视图派生的方法，例如getTaskPosition 、 getTaskNode、getScrollState 。

为了使这些方法按预期工作，布局必须包含默认网格、时间线、滚动条，并且甘特图应该能够找到它们。这是通过为默认视图分配特定的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是：

视图：“网格”，id：“网格”
视图：“时间线”，id：“时间线”
视图：“滚动条”，id：“scrollHor”
视图：“滚动条”，id：“scrollVer”

请注意，如果未指定id，甘特图将使用视图名称作为默认视图 id，或自动生成唯一 id。因此，在默认网格和时间线的情况下，可以省略“id”参数：

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"}
 ]
};

布局可以包含任何额外数量的视图。

视图的配置和模板

网格和时间线视图重用来自全局gantt.config/gantt.templates的模板和配置。但是，可以在布局级别为特定视图覆盖这些设置。例如：

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是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容，请锁定本套系列教程。

在线咨询

上一篇：Node.js 和 Java 的史诗级对决，谁才是开
下一篇：实时视频直播客户端技术盘点Native、HTML5、

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商