以前にグラフ問合せを扱った記事を書いたことがありますが、問い合わせの結果をレポート、つまり表形式で印刷していました。それではイマイチなので、APEXでCytoscape.jsを使う方法を確認してみました。
Cytoscape.jsのページに記載されているGetting startedをAPEXのアプリケーションとして実装してみました。Getting Startedをそのまま埋め込むのではなく、アプリケーションのサンプルとして役立つように以下の実装を加えています。
- elementsとstyleは静的なJSONファイルではなく、サーバー側で生成した値を使う。
- ページ・ロード時にグラフを描画するのではなく、ブラウザのイベントより（今回はボタンの押下）生成する。
作成したアプリケーションは以下のように動作します。
簡単なアプリケーションですが、以下に実装を紹介します。
最初に空のアプリケーションを作成します。実装はホーム・ページに行います。
ページ・プロパティのJavaScriptのファイルURLとして、Cytoscape.jsを指定します。バージョンなどは変わるため、実装時はCytoscape.jsのホームページよりリンクを取得してください。
https://unpkg.com/cytoscape@3.23.0/dist/cytoscape.min.js
グラフを描画する領域を作成します。
新規にリージョンを作成します。
作成したリージョンの識別のタイトルはCytoscape、タイプは静的コンテンツとします。ソースのHTMLコードとして以下を記述します。
<div id="cy"></div>
装飾は不要なので、外観のテンプレートとしてBlank with Attributesを選択します。
HTMLコードとして記述したid="cy"のDIV要素にCytoscapeによるグラフが描画されます。描画領域をCSSで指定します。
ページ・プロパティのCSSのインラインに以下を記述します。
#cy {
width: 300px;
height: 300px;
display: block;
}
サーバー側でグラフのデータを生成するプロセスを作成します。
データを生成するプロセスはAjaxコールバックとして作成します。
識別の名前はGET_DATAとします。タイプとしてコードの実行を選択し、ソースのPL/SQLコードとして以下を記述します。Getting Startedに記述されているelementsとstyleと同じデータを出力しています。
JavaScriptのファンクションおよびグローバル変数の宣言に、以下を記述します。
また、ページ・ロード時に実行に以下の１行を記述します。
apex.actions.add([RENDER_CY]);
作成したアクションrender-cyを呼び出すボタンを作成します。
リージョンCytoscapeにボタンを作成します。
識別のボタン名をRENDER、ラベルをRenderとします。レイアウトの位置としてNextを選びます。
動作のアクションとして動的アクションで定義を選択し、詳細のカスタム属性として以下を記述します。
data-action="#action$render-cy"
以上で完成です。作成したアプリケーションを実行すると、記事の先頭のGIF動画のような動作をします。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/cytoscape-sample.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
