1. 製品
  2.   ダイアグラム
  3.   JavaScript
  4.   mxGraph 

mxGraph 

 
 

オープンソースの JavaScript 作図ライブラリ

オープンソースの無料の JavaScript 作図ライブラリを使用して、インタラクティブなグラフおよびチャート作成アプリケーションを生成します。

mxGraph は、SVG および HTML ダイアグラムをレンダリングする機能を提供するオープン ソースの JavaScript ダイアグラム ライブラリです。 mxGraph ライブラリを使用するためにサードパーティ ソフトウェアは必要ありません。もう 1 つの良い点は、プラグインを必要とせず、ほぼすべてのフレームワークに統合できることです。 mxGraph は、インタラクティブなダイアグラムとグラフを表示するための機能を提供します。 API は、コンテキストを図に描画、操作、および関連付けるために一般的に必要なすべての機能を提供します。

API は非常に一般的なアーキテクチャを使用しており、HTML ページを処理できる Web サーバーと JavaScript をサポートする Web ブラウザが必要です。主に、すべてのライブラリ機能を含む 1 つの JavaScript ファイルを使用します。そのファイルは JavaScript セクションの HTML Web ページにロードされ、ブラウザーの HTML コンテナーで実行されます。

Previous Next

mxGraph 入門

mxGraph をインストールする推奨される方法は、npm を使用することです。これは、npm パッケージ マネージャーから入手できます。 mxGraph を依存関係として使用するには、npm install を使用します。

npm経由でmxGraphをインストール

npm install mxgraph --save

JavaScript API によるグラフの生成

オープン ソースの mxGraph ライブラリは、JavaScript を使用してダイアグラムまたはグラフを作成するための機能を提供します。また、新しいグラフ エディターの作成またはカスタマイズによる複雑なグラフの変更もサポートします。まず、特定のコンテナー内にグラフを作成する必要があります。次に、モデルにセルを簡単に追加してグラフを作成できます。図のタイトルを簡単に追加し、複数の参加者にメモを配置できます。このライブラリは、視覚効果、ユーザー インターフェイス コントロールなどの追加機能も提供します。

JavaScript による 2 つのグラフのマージ

mxGraph を使用すると、コンピューター プログラマーは独自の JavaScript アプリケーション内で 2 つのグラフをマージできます。まず、指定されたコンテナ内にサンプル グラフを作成する必要があります。白い太字のラベルですべてのセルを丸くしてください。ここで、コンテナなしで 2 番目のグラフ モデルを作成してください。頂点のカスタム ID を使用して、単一のステップでターゲット モデルにセルを追加します。これで、2 番目のグラフのモデルを最初のグラフのモデルにマージできます。

JavaScript を使用したグリッドの描画

mxGraph ライブラリを使用すると、ソフトウェア開発者は独自の JavaScript アプリケーション内でグリッドを動的に描画できます。 HTML 5 キャンバスを使用して、グリッドを動的に簡単に描画できます。まず、指定されたコンテナ内にグラフを作成し、キャンバスを必要とするグリッドを動的に作成してください。キャンバスをコンテナとして受け入れるようにイベント フィルタリングを変更する必要があります。 必要に応じて背景を消去し、グリッド線の距離をピクセル単位で設定します。実際のグリッドを描画します。

 日本