2024年8月20日火曜日

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

CanvasJSをOracle APEXのアプリケーションに組み込んでみます。

Oracle JETやその他のチャート描画ライブラリの組み込み作業で表示したチャートと、同じチャートを表示してみます。


直接CanvasJSで描画



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

https://cdn.canvasjs.com/canvasjs.min.js


静的コンテンツのリージョンの名前をCanvasJSとし、ソースのHTMLコードに以下を記述します。

<div id="myChart" class="h300"></div>


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

ページ・アイテムP1_VALUEに計算を作成し、ページの描画前にデータを設定します。計算のタイプとしてSQL問合せ(単一の値を返す)を選択し、SQL問合せに以下を記述します。 
select
    json_arrayagg(
        json_object(
            'y'     value sal,
            'label' value ename
        )
    order by empno asc )
from emp where deptno = 10

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



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



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



CanvasJSのバー・チャートを描画するテンプレート・コンポーネントについて、設定内容を説明します。

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



カスタム属性としてCSS Classes、Value、Color、Orientationを作成しています。Valueのタイプはセッション・ステート値、Colorはカラーです。チャートが描画される範囲をWidthとHeightで指定します。これらのタイプは整数です。CanvasJSでは、Groupsとして与える列名はValueに含まれているため、カスタム属性のGroupsは作成していません。


チャートの向きの指定であるOrientationの静的LOVは、horizontalの戻り値としてbar、verticalの戻り値としてcolumnを設定します。


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

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

https://cdn.canvasjs.com/canvasjs.min.js
#PLUGIN_FILES#js/script#MIN#.js


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

リージョンにCanvasJSのテンプレート・コンポーネントを実装します。

ページ・アイテムP2_VALUEは、最初に作成したP1_VALUEと同じ設定で作成します。

識別の名前をCanvasJS、タイプをCanvasJS Bar Chartとします。


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


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



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



対話モード・レポートのソースのSQL問合せとして以下を記述します。
select
    dname,
    json_arrayagg(
        json_object(
            'y'     value sal,
            'label' value ename
        )
    order by empno asc ) value,
    '' chart
from emp_dept_v group by dname

対話モード・レポートの列CHARTを選択し、識別のタイプをCanvasJS Bar Chartに変更します。

設定のValueにVALUE、Colorに#309fdb、Orientationにhorizontalを設定します。Widthは400、Heightに200を設定します。


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


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

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

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

完
投稿者 時刻:
ラベル: ,