2024年8月9日金曜日

Chart.jsをOracle APEXのアプリケーションに組み込む

オープンソースのチャート描画ライブラリであるChart.jsを、Oracle APEXのアプリケーションに組み込んでみます。Chart.jsの使い方自体には、ほとんど触れません。

前回の記事で、Oracle JETのチャートを直接Oracle APEXに組み込む方法を紹介しています。そのOracle JETのチャートと同じチャートを、Chart.jsで表示してみます。

作業にあたって、空のAPEXアプリケーションを作成します。名前はIntegrating Chart.jsとします。



直接Chart.jsで描画


最初にChart.jsを呼び出して、Canvas要素にチャートを描画します。
Chart.jsに案内のあるjsDelivrのページを開き、ページに組み込むスクリプトを選択します。
https://www.jsdelivr.com/package/npm/chart.js?path=dist

TypeはDefault、VersionはLatest Majorを選び、Copy URLを実行します。以下のURLがクリップボードにコピーされます。


このURLをページ・プロパティのJavaScriptのファイルURLに記述します。


チャートに描画するデータを保持するページ・アイテムとしてP1_GROUPS、P1_VALUEを作成します。タイプは非表示です。


ページ・アイテムP1_GROUPSに計算を作成し、ページの描画前にデータを設定します。計算のタイプとしてSQL問合せ(単一の値を返す)を選択し、SQL問合せに以下を記述します。
select
    json_arrayagg(
        ename
    order by empno asc )
from emp where deptno = 10
バー・チャートのそれぞれの棒に当たる従業員名をJSON配列にして、ページ・アイテムに保持します。（Oracle JETのときはJSONオブジェクトの配列だったので、保持する値は変わっています。）


ページ・アイテムP1_VALUEにも計算を作成し、ページ描画前に値を設定します。SQL問合せに以下を記述します。
select
    json_arrayagg(
        sal
    order by empno asc )
from emp where deptno = 10

チャートを描画するリージョンを作成します。

名前はChart.jsとします。タイプに静的コンテンツを選択し、ソースのHTMLコードとして以下を記述します。

<canvas id="myChart"></canvas>

Chart.jsは、指定したCanvas要素にチャートを描画するため、Canvas要素をあらかじめ用意しています。


チャートを描画するJavaScriptのコードを、ページ・プロパティのJavaScriptのページ・ロード時に実行に記述します。



以上で実装は完了です。ページを実行すると以下のように表示されます。



テンプレート・コンポーネントの作成



JavaScriptの記述による手続的なアプリケーションの実装は、あまりOracle APEXのアプリケーション開発に合っていません。テンプレート・コンポーネントを作成し、Chart.jsによるチャート描画を宣言的に実装できるようにします。

テンプレート・コンポーネントは、こちらの記事で紹介したOracle JETのテンプレート・コンポーネントとおおむね同じ手順で作成します。そのため、設定内容に絞って説明します。

テンプレート・コンポーネントの名前はChart.js Bar Chartとしました。テンプレートの部分には以下を記述しています。

カスタム要素名をa-chart-js-bar-chartとしています。カスタム属性はOracle JETを使ったテンプレート・コンポーネントと同じにしています。


カスタム属性の設定はOracle JETのテンプレート・コンポーネントとほぼ同じですが、orientationに限り静的LOVの戻る（戻り値）を変更しています。Chart.jsではoptionsのindexAxisによってバー・チャートの方向が決まります。indexAxisへはhorizontalのときにy、verticalのときにxを与えます。


テンプレート・コンポーネントのファイルとして、Chart.jsの実体となるファイルchart.umd.min.jsをアップロードします。アップロードするディレクトリとして、jsを指定しています。

ディレクトリをjs、ファイル名をscript.jsとして、カスタム要素a-chart-js-bar-chartの実装を記述します。

ロードするファイルURLのJavaScriptに以下を記述します。

#PLUGIN_FILES#js/chart.umd.min.js
#PLUGIN_FILES#js/script#MIN#.js


以上でテンプレート・コンポーネントは完成です。

Chart.jsで直接チャートを描画するページのコピーを作成し、テンプレート・コンポーネントを使った実装に変更します。

Chart.jsのロードや描画の実行はテンプレート・コンポーネントが行うため、ページ・プロパティのJavaScriptのファイルURLおよびページ・ロード時に実行は空白にします。


Canvas要素を含んでいた静的コンテンツのリージョンのタイプを、作成したテンプレート・コンポーネントChart.js Bar Chartに変更します。


リージョンの属性を開き、設定のGroupsとしてP2_GROUPS、ValueとしてP2_VALUE、Colorとして#309fdb、Orientationとしてhorizontalを設定します。


以上で実装は完了です。ページを実行すると以下のように表示されます。



対話モード・レポートへの組み込み



対話モード・レポートにテンプレート・コンポーネントChart.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を選択し、タイプをChart.js Bar Chartへ変更します。設定のCSS Classesにw400、Groupsに列GROUPS、ValueにVALUE、Colorに#309fdb、Orientationにhorizontalを指定します。


以上で実装は完了です。ページを実行すると以下のように表示されます。


今回の記事は以上になります。

作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-chart-js.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: