需要将mxGraph与Angular 6集成

时间:2018-06-27 11:35:11

标签: angular angular6 mxgraph

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

有人尝试过集成和实现它。如果是这样,请提供一些使用说明/说明。

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

1 个答案:

答案 0 :(得分:0)

这是完整的解决方案:

有关不同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. 克隆Repo-4。另外,添加官方repo(即Repo-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。 component.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.
    }
    

    ii。 component.html

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

  7. 就是这样!

希望这会有所帮助。