2023年5月12日金曜日

ドーナツチャートの中心にラベルを表示し動的に更新する

 ドーナツチャートの中心にラベルを表示し、さらにそれを動的に更新します。

サンプル・データセットのEMP/DEPTを使います。

選択リストで部門を選択し、選択された部門名をドーナツ・チャートの中心に表示します。選択された部門に所属する従業員の給与をドーナツ・チャートで表示しています。


ドーナツ・チャートの中心に部門名を表示するために、チャートの属性の初期化JavaScriptファンクションとして、以下のコードを記述します。

function(options) {
    options.pieCenter = {
        label: apex.items.P1_DEPTNO.displayValueFor(
            apex.items.P1_DEPTNO.value
        )
    };
    return options;
}
pieCenterとして設定できるプロパティについて、以下を参照しました。


これだけだと部門を選択するページ・アイテムP1_DEPTNOが変更されても、チャートの中心のラベルは更新されません。

ページ・アイテムP1_DEPTNOが変更されたときに、以下のJavaScriptを実行します。チャート・リージョンに静的IDとしてdonutを割り当てていることが前提です。
apex.region("donut").widget().ojChart(
    {
        pieCenter: {
            label: apex.items.P1_DEPTNO.displayValueFor(
                apex.items.P1_DEPTNO.value
            )
        }
    }
);

以上のコードを組み込むと、記事の先頭のGIF動画のように動作します。

中心のラベルを動的に変更する必要がなければ、初期化JavaScriptファンクションの設定だけで足ります。逆に動的に変更する場合は、動的アクションの実行の初期化時に実行をオンにすることで、初期化JavaScriptファンクションは必要ありません。

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

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

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