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

2025年5月19日月曜日

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

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

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

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

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

select job, sal from emp

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

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

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

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

ソースの表名はEMP、WHERE句に以下を記述します。送信するページ・アイテムとして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);
	}
	});