如何使用wps制作甘特图_使用Webix制作自己的甘特图-CSDN博客

如何使用wps制作甘特图

在上一篇文章中，我向您介绍了Webix框架。您已经发现了它的基本功能，并学习了如何使用它创建外观很好的响应式Web应用程序。现在是时候向前迈出一步，看看我们还能用这个有前途的框架做什么。

在本文中，我将向您展示如何创建自己的甘特图应用程序，并完成此任务，我将结合使用Webix框架和名为dhtmlxGantt的开源JavaScript甘特图。

但是，为什么要问甘特图呢？好吧，毫无疑问它有很多优点。首先，这些图表由于其直观的表示方式而被广泛用于可视化项目的工作过程。其次，dhtmlxGantt是一个甘特图工具，具有大量的功能列表，例如导出，可自定义的时间刻度等。最终，我在Webix开发人员博客的Webix Web Apps中找到了一篇名为DHTMLX Gantt Chart的文章，事实证明，您只需几行代码就可以将Gantt图表添加到Webix应用程序中。因此，我认为它们可以很好地融合在一起。
如果您需要帮助，也可以使用许多分步指南，因此如有疑问，请随时使用。

创建基本甘特图

现在创建应用程序。首先，我们来看一个基本图表。然后，我们将添加一些功能以增强其功能。

准备文件

首先，我们需要下载dhtmlxGantt库包，并将“ codebase”文件夹解压缩到项目目录中。由于与dhtmlxGantt的集成不是内置的Webix功能，因此我们需要从GitHub存储库下载所需的文件。我们感兴趣的是应该放置在项目目录中的“ gantt”目录。
我已经使用Webix CDN将Webix包括到我的项目中，但是如果需要，您可以下载完整的库。此外，我们需要api.js文件，该文件将允许我们使用导出功能。

因此，这是我目前的index.html文件：

<head>
   <title>Webix Gantt Chart</title>
   <!--Webix-->
   <script src="http://cdn.webix.com/edge/webix.js"></script>
   <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" />
   <!--dhtmlxGantt-->
   <script src="codebase/dhtmlxgantt.js"></script>
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet" />
   <!--dhtmlxGantt integration-->
   <script type="text/javascript" src="./gantt/gantt.js"></script>
   <!--export-->
   <script src="http://export.dhtmlx.com/gantt/api.js"></script>
</head>

完成后，我们可以创建一个基本的甘特图。

甘特图初始化

此图表提供了使用数据库存储数据的可能性（您可以查看文档页面以查看其工作方式）。但是，对于我们的实验，我们将使用内联数据作为示例来关注JavaScript部分。在本教程中，我将假装使用第二个教程，其内容也已转换为等效JavaScript对象：

var tasks = {
   data: [{
         id: 1,
         text: "Project #1",
         start_date: "01-06-2015",
         duration: 11,
         progress: 0.6,
         open: true
      }, {
         id: 2,
         text: "Task #1",
         start_date: "03-06-2015",
         duration: 5,
         progress: 1,
         open: true,
         parent: 1
      },
      /*some more tasks*/
      {
         id: 6,
         text: "Task #2.3",
         start_date: "05-06-2015",
         duration: 4,
         progress: 0.2,
         open: true,
         parent: 3
      }
   ],
   links: [{
         id: 1,
         source: 1,
         target: 2,
         type: "1"
      }, {
         id: 2,
         source: 1,
         target: 3,
         type: "1"
      },
      /*some more links*/
      {
         id: 5,
         source: 5,
         target: 6,
         type: "0"
      }
   ]
};

让我们讨论属性。 data属性包含任务描述：任务名称，其ID，其开始日期，任务持续时间，以当前时间范围（默认为天）的单位显示，以及当前进度（0到1之间的数字）。它还包括用于定义任务分支是否打开的open属性和旨在定义父任务的parent属性。 links参数定义依赖项链接，它由以下值组成：任务ID，依赖于target任务的source任务以及依赖项类型（0 –“完成以开始”，1 –“开始以开始，2”） –“完成以完成”）。

现在，我们可以使用以下数据初始化图表：

webix.ui({
   rows: [
      //row_1: header
      {
         type: "header",
         template: "Webix Gantt Chart"
      },
      //row_2: gantt chart
      {
         view: "dhx-gantt",
         init: function() {
            gantt.config.order_branch = true;
         },
         ready: function() {
            gantt.parse(tasks);
         }
      }
   ]
});

view:"dhx-gantt"定义UI组件类型，在这种情况下为Gantt图表。 init属性包含将在初始化之前运行的函数。我使用了order_branch选项来启用拖放任务的重新排序。 ready属性定义了在组件完全加载时触发的功能。在我们的例子中，它使用gantt.parse()方法使用先前创建的数据初始化图表。

结果如下所示：

基本甘特图

那么，我们具有哪些功能？您可以重新定义现有任务依赖关系并创建新的依赖关系。您可以通过在任务边缘拖动圆圈来实现。可以使用底部的三角形更改进度状态。可以通过在水平方向上拖动任务来更改任务的开始时间。至于持续时间，您可以通过调整任务大小来进行设置。我们可以使用“ +”按钮添加新任务和子任务。

这是一个新任务创建的样子：

添加新的子任务

至此，我们可以创建一个图表，但是无法对其进行操作。因此，让我们为此添加一些控件。

Webix的更多控制

我们将使用一些Webix UI组件来控制图表。

为了避免混乱的代码，我决定将UI组件的初始化与布局代码分开。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

首先，让我们定义菜单按钮，这将使我们能够将图表导出为不同的文件格式。为此，我们将使用Webix Menu组件。

这是菜单说明：

var menu = {
   view: "menu",
   openAction: "click",
   data: [{
      value: "Export to...",
      type: "icon",
      icon: "save",
      config: {
         on: {
            onItemClick: function(id) {
               switch (id) {
                  case "pdf":
                     gantt.exportToPDF();
                     break;
                  case "png":
                     gantt.exportToPNG();
                     break;
                  case "excel":
                     gantt.exportToExcel();
                     break;
                  case "ical":
                     gantt.exportToICal();
                     break;
                  default:
                     webix.message("Unknown file format");
               }
            }
         }
      },
      submenu: [{
         id: "pdf",
         value: "PDF",
         type: "icon",
         icon: "file-pdf-o"
      }, {
         id: "png",
         value: "PNG",
         type: "icon",
         icon: "file-image-o"
      }, {
         id: "excel",
         value: "Excel",
         type: "icon",
         icon: "file-excel-o"
      }, {
         id: "ical",
         value: "iCal",
         type: "icon",
         icon: "calendar"
      }]
   }]
};

默认情况下，将鼠标悬停在菜单按钮上时，该按钮处于激活状态。 openAction: "click"属性重新定义了此行为，因此菜单将仅通过鼠标单击来打开其子菜单。 data参数定义菜单内容。这里有趣的是type: "icon"属性，它允许我们向菜单按钮添加图标。 Webix使用Font Awesome图标集合。如果要应用所需的图标，则必须使用图标的名称作为icon参数的值。
下一步是事件处理。单击菜单项之一时，将触发onItemClick事件。我已经使用switch语句来处理选定的id值，因此您可以看到某种文件格式使用了哪种方法。 submenu参数包含菜单项定义。

我们将工具栏放在页面底部。它将包含控制元素，包括我们的菜单按钮。

工具栏组件将帮助我们。但在此之前，让我们定义应该添加哪些选项。如果您要管理一个持续时间足够长的项目，则应考虑比例缩放功能。 dhtmlxGantt为您提供了多种可用的比例尺属性。我们将使用日，周和月比例。

让我们定义启用月度刻度的函数：

var scaleMonths = function() {
   gantt.config.scale_unit = "month";
   gantt.config.date_scale = "%F, %Y";
   gantt.parse(tasks);
};

scale_unit属性定义比例单位。其可能的值为“分钟”，“小时”，“天”，“周”，“季度”，“月”和“年”。为了设置正确的时间刻度格式，我们使用了date_scale属性。之后，我们应该使用gantt.parse(tasks)刷新图表。

使用此功能后，图表如下所示：

其他小数位函数也以类似的方式工作，因此我不再赘述。

现在我们可以定义toolbar变量：

var toolbar = {
   view: "toolbar",
   paddingY: 0,
   elements: [
      menu, {
         view: "segmented",
         on: {
            onChange: function(id) {
               switch (id) {
                  case "days":
                     scaleDays();
                     break;
                  case "weeks":
                     scaleWeeks();
                     break;
                  case "months":
                     scaleMonths();
                     break;
                  default:
                     webix.message("Wrong scale option");
               }
            }
         },
         options: [{
            id: "days",
            value: "Days"
         }, {
            id: "weeks",
            value: "Weeks"
         }, {
            id: "months",
            value: "Months"
         }]
      }
   ]
};

它看起来类似于我们先前创建的菜单。该paddingY属性设置的顶部和底部填充值0。 elements属性定义工具栏的内容，就如同data在我们的菜单实例属性。工具栏的第一个元素是菜单，第二个是分段按钮。当您想在示例中的比例单位之间切换时，这很有用。使用了另一个事件处理程序来管理用户的选择，但这一次是onChange事件。更改当前选择的按钮后，它将触发。我们先前定义的功能将根据所选按钮ID更改比例。 option属性定义控件中的按钮（段）。

最后，是时候将工具栏添加到图表中了。为此，只需将toolbar变量添加到您的布局代码中：

webix.ui({
   rows: [
      //row_1: header
      {
         type: "header",
         template: "Webix Gantt Chart"
      },
      //row_2: gantt chart
      {
         view: "dhx-gantt",
         init: function() {
            gantt.config.order_branch = true;
         },
         ready: function() {
            gantt.parse(tasks);
         }
      },
      toolbar
   ]
});

结果如下：

webix甘特图