2024年4月17日水曜日

チャートのプロパティを動的に変更する

Oracle APEXはチャートを描画するコンポーネントとして、Oracle JETを使用しています。Oracle JETのコンポーネントが持つプロパティを変更することにより、チャートの描画条件を動的に変更することができます。

簡単な棒グラフを表示するチャート・リージョンを作成し、Y軸の最大値を動的に変更してみます。

確認のために以下のように動作するアプリケーションを作成します。


チャートを表示するソースとして、サンプル・データセットのEMP/DEPTに含まれる表EMPを使用します。

空のアプリケーションを作成し、ページ作成ウィザードを起動します。


作成するページのタイプとしてチャートを選択します。


チャートのタイプとしてバーを選択します。


ページ番号は2、ページの名前はSalaryとします。データ・ソースの表/ビューの名前としてEMPを指定します。

次へ進みます。


向きは垂直、ラベル列としてENAME(Varchar2)、値列としてSAL(Number)を選択します。

ページの作成をクリックします。


チャート・リージョンを含んだページが作成されます。

作成されたページを実行します。


バー・チャートのY軸の最大値はデフォルトでは指定が無く、最大値は自動的に調整されます。

以下の例では最も多いサラリーが5000なので、最大値は6000になっています。


Y軸の最大値は、Y軸の値の最大として設定します。

最大を10000に設定し、チャートの表示を確認してみます。


Y軸の最大値が10000になります。


ページ・デザイナで設定するY軸の最大はアプリケーションの開発時に設定し、アプリケーションの実行中に変更することはできません。

以下より、この値をアプリケーションから変更します。

最初にY軸の最大値を保持するページ・アイテムを作成します。

識別の名前はP2_MAX_Y、タイプはテキスト・フィールドとします。ラベルはMax Yとします。設定の[Enter]を押すと送信をオンにし、Enterの入力でY軸の最大値を確定します。

ページの送信後にP2_MAX_Yの値が維持されるように、セッション・ステートのストレージはセッションごと(永続)を選択します。


チャートに限りませんが、大抵のOracle APEXに含まれるJavaScriptによって実装されたコンポーネントは、初期化JavaScriptファンクションを記述できます。

チャート・リージョンの初期化JavaScriptファンクションに以下を記述し、設定可能なオプションを確認します。
function( options ) {
    console.log( options );
}

アプリケーションを実行（ページを再ロード）するとチャートが初期化されるので、初期化JavaScriptファンクションが実行されます。

JavaScriptコンソールの出力を確認すると、yAxisのmaxとして10000が設定されていることが確認できます。


ページ・アイテムP2_MAX_Yに指定された値をY軸の最大とするように、初期化JavaScriptファンクションを書き直します。
function( options ) {
    // console.log( options );
    if ( apex.items.P2_MAX_Y.value ) {
        options.yAxis.max = apex.items.P2_MAX_Y.value;
    }
    return options;
}
Y軸の最大値を指定しEnterを押すと（ページが送信された後、ページが再描画され）、チャートのY軸の最大値が変更されます。


ページの送信をせずにチャートのY軸の最大を変更するには、JavaScriptのコードを実行しコンポーネントの属性を直接変更します。

チャート・リージョンをJavaScriptのコードから参照するため、静的IDを割り当てます。以下ではチャート・リージョンの静的IDとしてSALARYを割り当てています。


ページ・アイテムP2_MAX_Yに動的アクションを作成し、値が変更されたときに以下のJavaScriptコードを実行します。
apex.region("SALARY").widget().ojChart( { "yAxis" : { "max" : apex.items.P2_MAX_Y.value }});

動的アクションは値の変更が認識されれば実行されます。値の確定にEnterの入力の代わりにタブを入力することで、動的アクションによるY軸の最大値の変更を確認できます。


Y軸の最大を変更するにあたって動的アクションを使うような場合は、ページ・アイテムP2_MAX_Yのセッション・ステートのストレージとしてリクエストごと(メモリーのみ)を選択することができます。


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

現行のOracle APEXが組み込んでいるOracle JETのコンポーネントは、ほぼチャートのみです。Oracle JETのチャートについてのドキュメントは、以下より参照できます。


Oracle APEXにバンドルされているOracle JETのバージョンは、リリース・ノートを確認するか、またはチャートを組み込んだページがロードしているOracle JETのファイルから確認します。ロードされるファイルのパスに、組み込まれているOracle JETのバージョンが含まれています。


バージョンを選択し、Cookbookを開きます。


今回例に採用したバー・チャートは、VisualizationsのChartに含まれます。


Bar Chartを開きます。


バー・チャートのプロパティを確認するためAPI DocのojChartを開きます。


Element oj-chartが開きます。Attributesからy-axisを探します。


y-axisを開きます。


oj.ojChart.YAxisを開きます。


YAxisとして設定可能なプロパティの一覧が表示されます。プロパティmaxについて、ここで確認することができます。


簡単なアプリケーションですが、今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-jet-chart-property-change.zip

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

完
投稿者 時刻:
ラベル: