Oracle JETやその他のチャート描画ライブラリの組み込み作業で表示したチャートと、同じチャートを表示してみます。
直接Plotly.jsで描画
Plotly.jsのGetting started in JavaScriptのページを参照して、実装を進めます。バー・チャートの表示はこちらのページにある例を元にしています。バー・チャートのリファレンスはこちらです。
ページ・プロパティのJavaScriptのファイルURLに以下を記述します。
https://cdn.plot.ly/plotly-2.34.0.min.js
静的コンテンツのリージョンの名前をPlotly.jsとし、ソースのHTMLコードに以下を記述します。
<div id="myChart" class="w600 h400"></div>
ページ・アイテムP1_GROUPSに計算を作成し、ページの描画前にデータを設定します。計算のタイプとしてSQL問合せ(単一の値を返す)を選択し、SQL問合せに以下を記述します。
select
json_arrayagg(
ename
order by empno asc )
from emp where deptno = 10
ページ・アイテムP1_VALUEにも計算を作成し、ページ描画前に値を設定します。SQL問合せに以下を記述します。
select
json_arrayagg(
sal
order by empno asc )
from emp where deptno = 10
チャートを描画するJavaScriptのコードを、ページ・プロパティのページ・ロード時に実行に記述します。
以上で実装は完了です。ページを実行すると以下のように表示されます。
テンプレート・コンポーネントの作成
Plotly.jsのバー・チャートを描画するテンプレート・コンポーネントについて、設定内容を説明します。
テンプレート・コンポーネントの名前はPlotly.js Bar Chartとしました。テンプレートの部分には以下を記述しています。
テンプレート・コンポーネントの名前はPlotly.js Bar Chartとしました。テンプレートの部分には以下を記述しています。
カスタム属性としてCSS Classes、Groups、Value、Color、Orientation、Width、Heightを作成しています。GroupsとValueのタイプはセッション・ステート値、Colorはテキスト、WidthとHeightは両方とも整数です。
チャートの向きの指定であるOrientationの静的LOVは、horizontalの戻り値としてh、verticalの戻り値としてvを設定します。
ロードするファイルURLのJavaScriptに以下を記述します。
https://cdn.plot.ly/plotly-2.34.0.min.js
#PLUGIN_FILES#js/script#MIN#.js
以上でテンプレート・コンポーネントは完成です。
リージョンにPlotly.jsのテンプレート・コンポーネントを実装します。
ページ・アイテムP2_GROUPSとP2_VALUEは、最初に作成したP1_GROUPSとP1_VALUEと同じ設定で作成します。
識別の名前をPlotly.js、タイプをPlotly.js Bar Chartとします。
以上で実装は完了です。ページを実行すると以下のように表示されます。
対話モード・レポートへの組み込み
対話モード・レポートのソースのSQL問合せとして以下を記述します。
select
dname,
json_arrayagg(
ename
order by empno asc ) groups,
json_arrayagg(
sal
order by empno asc ) value,
'' chart
from emp_dept_v group by dname
対話モード・レポートの列CHARTを選択し、識別のタイプをPlotly.js Bar Chartに変更します。
設定のCSS Classesにw130、GroupsにGROUPS、ValueにVALUE、Colorに#309fdb、Orientationにhorizontalを設定します。Widthは400、Heightに300を設定します。
今回の記事は以上になります。
作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-plotly-js.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完