日日是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や海外のパートナーのブログ記事で取り上げられているケースがありますが、公式なドキュメントからは見つけることができませんでした。