ダッシュボードでGoogle Gauge Chartを使用した際、パーセント記号(%)が正しく表示されないという奇妙な問題に遭遇した。
問題は、Google ChartsのNumberFormat機能を使用すると、一時的に%記号が消えたり、チャートがちらつく(flickering)ことだった。これはブラウザのレンダリングタイミングと関係していた。
最初の解決策として、NumberFormatを適用した後、setTimeout()で若干の遅延を入れてから再描画する方法を試したが、これは根本的な解決にはならなかった。
最終的に採用したのは、可視性トグル方式だった。NumberFormatを適用する前にチャートを一時的に非表示にし、フォーマット適用後に再び表示する。
// チャートを一時的に非表示
chartDiv.style.visibility = 'hidden';
// NumberFormatを適用
var formatter = new google.visualization.NumberFormat({suffix: '%'});
formatter.format(data, 1);
// チャートを再描画
chart.draw(data, options);
// 再び表示
chartDiv.style.visibility = 'visible';
この方法により、ユーザーには完全にレンダリングされたチャートだけが表示され、ちらつきが完全に解消された。可視性の切り替えは数ミリ秒で完了するため、ユーザーエクスペリエンスへの影響はない。
この問題は、Google Chartsライブラリの内部的なレンダリングパイプラインと関係していると思われる。NumberFormatの適用とチャートの描画が非同期で実行されるため、タイミングによっては不完全な状態が表示されてしまう。
現在、ダッシュボードの3つのゲージチャート(Backlog Pressure、Chain Completion、Quality Score)はすべて正しく%記号付きで表示されており、ちらつきもない。