2025年5月19日月曜日

円グラフの凡例の選択とレポートの表示を連動させる

チャート・リージョンでは凡例のクリックにより、チャートからその凡例を取り除いたり、再度、チャートに含めたりすることができます。この選択された凡例をレポートの検索条件として、同時にレポートも更新します。

作成するアプリケーションは以下のように動作します。データ・ソースとしてサンプル・データセットEMP/DEPTに含まれる表EMPを使用し、従業員のジョブを凡例に表示し、円グラフにはジョブごとの給与の合計を表示します。


空のAPEXアプリケーションを作成し、ホーム・ページにすべて実装します。

チャート・リージョンのソースSQL問合せとして、以下を記述します。

select job, sal from emp


チャートの属性を開き、タイプにします。また、今回の実装では凡例をクリックするため、凡例表示オンにします。


シリーズ名前Salaryとします。ソース位置リージョン・ソースを選択し、列のマッピングラベルに列JOB値集計合計に列SALを設定します。


チャートの凡例をクリックして非表示に設定した凡例を保存するページ・アイテムをP1_HIDDENとして作成します。タイプ非表示です。JavaScriptのコードから値を設定するため、設定保護された値オフにします。今回の例ではページを送信することはないため違いはありませんが、セッション・ステートストレージリクエストごと(メモリーのみ)にします。


円グラフに連動して従業員を一覧するクラシック・レポートを作成します。

ソース表名EMPWHERE句に以下を記述します。送信するページ・アイテムとしてP1_HIDDENを設定します。
:P1_HIDDEN is null
or
job not in (
    select column_value from apex_string.split(:P1_HIDDEN,',')
)

チャートとレポートを連動させる動的アクションを作成します。

円グラフのチャートのリフレッシュ後JavaScriptコードを実行します。


TRUEアクションとして実行するJavaScriptのコードとして以下を記述します。チャート・ウィジェットに対してonoptionchangeイベントで実行されるハンドラを設定しています。チャート・ウィジェットに対するイベント・ハンドラの設定方法やonoptionchangeイベントについては、Oracle Forumや海外のパートナーのブログ記事で取り上げられているケースがありますが、公式なドキュメントからは見つけることができませんでした。

// チャート・ウィジェットを取得する.
var chart = apex.region(this.triggeringElement.id).widget();
// オプション変更で呼び出すファンクションを設定する。
chart.on("ojoptionchange", function(event, data) {
/*
* 変更されたデータがhiddenCategoriesであることを確認。
* hiddenCategoriesについては、Oracle JETのAPIリファレンスを参照のこと。
* https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html#hiddenCategories
*/
if (data.option === "hiddenCategories") {
/*
* 非表示のカテゴリはカンマ区切りで複数設定される。
*/
apex.items.P1_HIDDEN.setValue(data.value);
}
});


ページ・アイテムP1_HIDDENの値が変更されたときにクラシック・レポートの一覧を更新するため、ページ・アイテムP1_HIDDEN動的アクションを作成します。

タイミングイベント変更になります。


TRUEアクションリフレッシュ影響を受ける要素選択タイプリージョンとし、リージョンクラシック・レポートのリージョンを選択します。


以上でアプリケーションは完成です。アプリケーションを実行すると記事の先頭のGIF動画のように動作します。

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

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