Нужно интегрировать mxGraph с Angular 6 - PullRequest
Новая
       5

Нужно интегрировать mxGraph с Angular 6

0 голосов
/ 27 июня 2018

Мне нужно реализовать диаграмму Ганта и подумать, что mxGraph Gantt может быть идеальным решением. Единственная проблема заключается в интеграции его в приложение.

Кто-нибудь пробовал интегрировать и внедрять его. Если да, то, пожалуйста, предоставьте некоторые указания / инструкции по его использованию.

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

1 Ответ

0 голосов
/ 14 февраля 2019

Вот полное решение:

Немного подробностей о различных репозиториях 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. Кроме того, добавьте удаленный доступ к официальному репо (т. Е. 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 в своем приложении.

    я. 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. Вот и все !!

Надеюсь, это будет полезно.

...