2025年5月9日金曜日

ピラミッド・チャートのラベルをカスタマイズする

Orale APEXのチャートのタイプにピラミッドがあります。ピラミッド・チャートではラベルは列のマッピングの値に指定した数値が表示され、列のマッピングのラベルに指定した文字列は表示されません。

初期化JavaScriptファンクションを記述することにより、ピラミッド・チャートに以下のようにラベルを表示させてみます。


何もカスタマイズしていないと、以下のように表示されます。


以下より、実施したカスタマイズについて紹介します。チャートの表示には、サンプル・データセットのEMP/DEPTに含まれる表EMPをデータ・ソースとして使用しています。

識別の名前をPyramid、タイプをチャートとしたリージョンを作成しています。ソースの表名はEMPです。


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

デフォルトではこの設定で、ラベルに列SALの値が表示されます。


チャート・リージョンの属性を開き、チャートのタイプにピラミッドを選択します。今回の実装には関係しませんが、ツールチップや凡例の表示もオンにしておきます。

そして本記事のテーマであるラベルをカスタマイズするコードを、初期化JavaScriptファンクションに記述します。

function( options ){
options.dataFilter = function( data ) {
data.series.map( (series) => {
series.items.map( (item) => {
item.label = `${item.name}:${item.value}`;
});
});
apex.debug.info(data);
return data;
};
return options;
}
view raw custom-label-for-pyramid.js hosted with ❤ by GitHub


以上でカスタマイズは完了です。

チャートの初期化JavaScriptファンクションで設定しているoptions.dataFilterについては、Plamen Mushkovさんのブログ記事から、その存在を見つけました。

Taking your APEX JET charts style to the next level

dataFilterに渡されるデータを確認したところ、labelにvalueと同じ数値が割当たっていたので、これを変更しています。
{
  "series": [
    {
      "name": "PRESIDENT",
      "displayInLegend": "on",
      "items": [
        {
          "id": "1",
          "value": 5000,
          "label": 5000,
          "name": "PRESIDENT"
        }
      ]
    },
    {
      "name": "MANAGER",
      "displayInLegend": "on",
      "items": [
        {
          "id": "2",
          "value": 8275,
          "label": 8275,
          "name": "MANAGER"
        }
      ]
    },
    ...
 }
デフォルトでは、ラベルに列SALの値が表示されますが、その際に数値に書式が適用されます。


dataFilterに渡されるvalueはフォーマット後の文字列ではなく数値そのものであるため、書式が適用されません。そのため、例えば単位が必要であれば、その処理も初期化JavaScriptファンクションで行う必要があります。

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

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

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