65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 dhtmlxGantt 和 MeteorJS 创建甘特图应用程序。

Stas Wolski
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (6投票s)

2015 年 9 月 18 日

GPL3

6分钟阅读

viewsIcon

25649

如何将甘特图用于 MeteorJS 应用程序的详细描述。

引言

甘特图是数据可视化的一种可能方式。由于这些图表可以直观地显示工作流程，因此在项目管理软件中被广泛使用。在本文中，我将介绍创建一个在线甘特图应用程序的过程。我将只使用两个组件：MeteorJS 和 dhtmlxGantt。让我们仔细看看它们。

dhtmlxGantt 和 MeteorJS 的基本功能

dhtmlxGantt 是一个开源的 JavaScript 甘特图库。除了创建甘特图，它还允许您为项目添加一些额外功能，例如导出、重要任务高亮、过滤、缩放、关键路径、截止日期等。这是基本图表示例，供您了解它的外观和行为。想要更多？这里有大量示例，涵盖了它的大部分功能。

MeteorJS 是一个使用 Node.js 编写的开源完整全栈 JavaScript 框架。它旨在简化 Web 应用程序的开发过程。它的主要功能是实时传输数据更改的可能性。而且无需编写额外的同步代码。您可以访问此页面查看功能列表。

创建甘特图

首先，我们需要安装 MeteorJS 并创建一个简单的 Meteor 应用程序。

安装 MeteorJS 并创建您的第一个应用程序

安装方式可能因操作系统而异。在 OS X 或 Linux 上，您应该在终端中运行以下命令

curl https://install.meteor.com/ | sh

如果您使用 Windows，则应获取安装程序。请访问此安装指南了解详细信息。

安装 NodeJS 后，您可以打开终端并创建一个基本应用程序。我们将其项目命名为 my-chart

meteor create my-chart

此代码将创建一个名为 my-chart 的文件夹。在此文件夹中，您可以找到一些文件和一个文件夹，它们构成了您当前阶段的项目。在我的 Linux 系统上，它们看起来是这样的

.meteor
my-chart.css
my-chart.html
my-chart.js

您可以立即运行此基本应用程序，以确保一切正常。只需从项目目录中键入 meteor 命令

cd my-chart
meteor

如果一切正常，您将看到以下输出

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: https://:3000/

meteor-application

这是一个带有一个计数点击次数按钮的小网页。好了，一切似乎都正常。让我们继续 dhtmlxGantt。

将 dhtmlxGantt 添加到您的项目中

您可以从开发者网站下载软件包，也可以使用特殊的 Meteor 包。由于没有理由让我们进行下载、解压等常规操作，因此我们选择第二种方式

meteor add dhtmlx:gantt

下一步是获取数据适配器，该适配器将启用实时数据更新

meteor add dhtmlx:gantt-data

好的，所有必需的软件包都已下载，我们可以继续创建图表了。

根据文档，my-chart.html 文件定义了视图模板，这意味着我们可以将 HTML 代码放在其中。打开该文件，并用以下内容替换其现有代码

<body>
    <div id="gantt_here" style='width: 100%; height: 400px;'></div>
</body>

 此代码将创建一个 DIV 容器。我们很快就会在其中放置图表。

my-chart.js 文件是一个在客户端和服务器上都加载的 JavaScript 文件。它将包含创建数据存储、初始化和配置图表的代码。

MeteorJS 使用 MongoDB 数据库。您应该使用所谓的 Collections 来存储数据。Collections 可以从服务器和客户端访问。此外，它们会自动更新，这意味着所有更改将立即在屏幕上呈现。

我们应该创建两个 Collections。第一个将包含描述现有 任务 的数据。第二个将保存有关任务之间 链接 的信息。

打开 my-chart.js 文件并将其内容更改为

TasksCollection = new Mongo.Collection("tasks");
LinksCollection = new Mongo.Collection("links");

下一步是初始化图表并使用数据适配器。我们希望在客户端运行图表代码。为此，我们将使用 if (Meteor.isClient) 语句。要运行我们需要的代码，我们可以使用以下代码：Meteor.startup(func)。

根据这些信息，我们可以向我们的 .js 文件添加类似如下的内容

if (Meteor.isClient) {
    /* runs only on the client side */
    Meteor.startup(function() {
        /* place your client side code here*/
    });
}

只需几个简单的步骤，我们就能达成目标。首先，我们应该在先前创建的 DIV 容器中初始化图表

gantt.init("gantt_here");

最后一步是初始化数据适配器

//Init dhtmlxGantt data adapter.
gantt.meteor({tasks: TasksCollection, links: LinksCollection});
//or
gantt.meteor(
    {tasks: TasksCollection.find(/*[anything]*/), links: LinksCollection.find(/*[anything]*/)},
    {tasks: TasksCollection, links: LinksCollection}

将此代码放入客户端函数后，您可以运行应用程序。只需打开终端并键入

meteor

然后您可以在浏览器中查看结果

gantt-meteor

此图表没有任何数据可渲染。我们需要创建一个任务才能看到它的效果。单击此“+”按钮，屏幕上将出现“新建任务”窗口

task-meteor-gantt

您可以创建任意数量的任务，定义它们之间的链接，在日历网上拖动它们以更改开始时间，并调整它们的大小以更改持续时间。最棒的是，您可以关闭浏览器、关闭服务器，然后再次运行它时，您会发现所有任务都在正确的位置。 

实时更改

让我们看看 MeteorJS 应用程序如何响应更改。我们将从一个简单的例子开始。还记得我们如何定义 DIV 容器吗？让我提醒您

<body>
    <div id="gantt_here" style='width: 100%; height: 400px;'></div>
</body>

 好了，情况是这样的。您可以更改此代码，保存更改后，无需刷新页面或执行其他额外操作。应用程序的外观将自动更改。

例如，将此代码添加到 style 属性

border: 2px solid #222

保存它，几秒钟后，应用程序将自行刷新并更改边框的样式

style-border-gantt

现在让我们看看数据库是如何工作的。在您的终端中打开一个新标签页，进入项目目录并运行

meteor mongo

此代码将打开您的应用程序本地开发数据库的控制台。现在您可以处理您的数据库了。让我们进行一些搜索工作

db.tasks.find({text:"Create my first app"});

此代码将查找我们数据库中的第二个任务。这是我得到的结果

{ "_id" : "YFhwdZxWtWns2g6oq", "id" : "1441072445217", 
"start_date" : ISODate("2015-08-31T21:00:00Z"), 
"text" : "Create my first app", "duration" : 1,
"end_date" : ISODate("2015-09-01T21:00:00Z"), "parent" : 0 }

在这里，您可以看到任务属性的值，例如它的 ID、开始日期、持续时间等。

现在让我们删除这个任务。有几种方法可以做到。我们将以 Object ID 值为例

db.tasks.remove({_id:"YFhwdZxWtWns2g6oq"});

运行此命令，然后返回您的浏览器，您将看到具有相应 ID 的任务已被删除

meteor-and-gantt-app

结论

MeteorJS 允许您通过几个简单的步骤创建在线应用程序。您可以将本文中的示例与此入门指南进行比较，后者需要花费更多时间来构建一个基本图表。MeteorJS 最好的优点之一是能够实时看到更改。而且无需付出艰辛的努力就能实现此功能。Meteor 最初就是为了这样工作而设计的。

 

© . All rights reserved.