需要将 mxGraph 与 Angular 6 集成

Question

我需要实现一个甘特图，并认为mxGraph 甘特图可能是理想的解决方案。唯一的问题是将其集成到应用程序中。

有没有人尝试过集成和实现它。如果是这样，那么请提供一些有关如何使用它的说明/说明。

https://github.com/jgraph/mxgraph/

Answer 1

这是完整的解决方案：

有关不同 mxGraph 存储库的几个详细信息：

Repo-1: https://github.com/jgraph/mxgraph
This is an official release repo of mxGraph. With npm issues.
Repo-2: https://bitbucket.org/jgraph/mxgraph2
This is an official development repo of mxGraph. With npm issues.
If anyone wants to see what npm issues with these above repos(i.e. Repo-1 and Repo-2), then check these following issues:  
- https://github.com/jgraph/mxgraph/issues/169
- https://github.com/jgraph/mxgraph/issues/175
Repo-3: https://bitbucket.org/lgleim/mxgraph2
Fork of Repo-2. With npm fixes.
Repo-4: https://github.com/ViksYelapale/mxgraph2
Fork of Repo-2. Merged npm fixes from Repo-3 as well. Added changes(i.e. required for local installation of mxGraph) to this repo.

步骤：

1. 克隆存储库-4。另外，添加官方存储库(即存储库-2(的远程以获取最新的 mxGraph 更新/发布/修复。

2. 将目录更改为 mxgraph2 并运行 npm install

   
   $ cd mxgraph2$ npm install

3. 现在转到您的角度项目存储库并安装 mxGraph(即我们在本地构建的 mxgraph2(。

   $ npm install /path/to/mxgraph2

   例如npm install /home/user/workspace/mxgraph2

   这将在您的 package.json 文件中添加一个类似的条目，如下所示：

   "mxgraph": "file:../mxgraph2"

4. 运行一次正常的 npm 安装。用于添加任何缺失/依赖项包。

   $ npm install

5. 现在我们将安装 mxgraph 打字

   注意 - 打字稿的最低要求版本是 2.4.0

   $ npm install lgleim/mxgraph-typings --save

6. 现在，您可以在应用程序中使用 mxGraph。

   i. 组件.ts

   import { mxgraph } from "mxgraph";
   declare var require: any;
   const mx = require('mxgraph')({
   mxImageBasePath: 'assets/mxgraph/images',
   mxBasePath: 'assets/mxgraph'
   });
   .
   .
   .
   ngOnInit() {
   // Note - All mxGraph methods accessible using mx.xyz
   // Eg. mx.mxGraph, mx.mxClient, mx.mxKeyHandler, mx.mxUtils and so on.
   // Create graph
   var container = document.getElementById('graphContainer');
   var graph = new mx.mxGraph(container);
   // You can try demo code given in official doc with above changes.
   }
   

   二、组成.html

   <div id="graphContainer"></div>

7. 就是这样！！

希望它会有所帮助。