日日是Oracle APEX: チャートのY軸のラベルに任意のフォーマットを適用する

2025年5月8日木曜日

チャートのY軸のラベルに任意のフォーマットを適用する

バー・チャートのY軸のラベルに任意のフォーマットを適用します。以下のように主要目盛が300K毎に表示されているチャートで、ラベルを300K、600K、900K、そして1Mを超えると1.2M、1.5Mと略記記号を変えます。

確認に使用しているチャート・リージョンのソースのSQL問合せとして、以下を設定しています。

SELECT 1000 + (LEVEL - 1) * 80000 AS val, level l
FROM dual
CONNECT BY 1000 + (LEVEL - 1) * 80000 <= 2000000;

チャートのシリーズの列のマッピングとして、ラベルにL、値にVALを割り当てています。

Y軸のラベルのフォーマットですが、主に値の書式および書式スケールで決定されます。

書式が- 選択 -（つまり無指定）で書式スケールを自動とすると、Y軸のラベルは以下のように表示されます。APEXアプリケーションの言語が日本語の場合、30.0万、60.0万、...のように単位が万になっています。

APEXアプリケーションのアプリケーション言語が日本語の場合、書式スケールは万、億、兆は選べますが、K、M、G、Tといった記号を選ぶことはできません。これらの書式スケールを選ぶには、アプリケーション言語を英語に切り替える必要があります。チャートやY軸ラベルに限定してロケールを英語に切り替える方法は見つかりませんでした。

アプリケーション言語が日本語でも数値の表記はK、M、G、Tといった略記にしたい場合は多いと思います。

チャートの初期化JavaScriptファンクションで設定できるのは、基本的にConverterOptionsなので、Converterインターフェースを実装したクラスが持つformatファンクションは定義できません。そのため、数値ラベルを変換するIntlNumberConverterのインスタンスを生成し、formatファンクションを置き換えた上で、チャートのY軸ラベルのConverterとして使用します。

Converterの置き換えはチャートのリフレッシュ後に実施します。

Y軸ラベルを置き換えるチャートに動的アクションを作成します。タイミングのイベントはリフレッシュ後です。

TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。

	// Create the base converter from IntlNumberConverter.
	let baseConverter = new oj.IntlNumberConverter({});

	// Create a custom converter that wraps the base and overrides `format`
	let customConverter = {
	format: (value) => {
	/*
	* custom formatting rule.
	*/
	if (value >= 10 3 && value < 10 6) {
	value = (value / 1000).toFixed(0) + 'K'
	} else if (value >= 10 ** 6) {
	// change arg of toFixed from 0 to 1
	value = (value / 1000000).toFixed(1) + 'M'
	};
	return value;
	},
	/* Delegate all other methods. */
	getHint: () => {
	return baseConverter.getHint();
	},
	parse: (value) => {
	return baseConverter.parse(value);
	},
	getOption: () => {
	return baseConverter.getOption();
	},
	resolvedOptions: (options) => {
	return baseConverter.resolvedOptions(options);
	}
	};

	let chart = apex.region("test").widget();

	chart.ojChart(
	'option',
	'yAxis.tickLabel.converter',
	customConverter
	);