IgbDataChart において、軸ラベルのフォーマットを変更する方法を紹介します。ここでは、X 軸のラベルをドル形式で表示し、小数点以下を最大 2 桁まで表示する設定方法を例にします。

軸の設定

IgbNumericXAxis の LabelFormat プロパティを “$ {0} “と設定します。{0} とすることでカスタムラベル形式である IgbNumberFormatSpecifier コレクションが使用できます。

IgbNumberFormatSpecifier については以下のように設定します。

  • MaximumFractionDigits
    表示される最大の小数点以下の桁数を設定します。この値を 2 に設定すると、最大で小数点以下 2 桁まで表示されます。
    3.14159 という数値があった場合、3.14 と表示されます。
  • MinimumFractionDigits
    表示される最小の小数点以下の桁数を設定します。この値を 0 に設定すると、小数点以下が 0 桁未満の場合でも、必ず 0 桁表示されるようになります。
    例えば、5.0 という数値があった場合、5 と表示されます。
<IgbNumericXAxis ....
             LabelFormat="$ {0}">
    <IgbNumberFormatSpecifier ....
             MaximumFractionDigits="2" 
             MinimumFractionDigits="2" />
</IgbNumericXAxis>

ツールチップの設定

IgbDataToolTipLayer においても、数値のフォーマットをカスタマイズできます。以下の設定により、ツールチップ内の数値も軸ラベルと同様のドル形式で表示されます。

<IgbDataToolTipLayer ....
                     ValueFormatString="$ {0}"
                     ValueFormatMinFractions="0"
                     ValueFormatMaxFractions="2" />

実行結果

関連ドキュメント

Tagged:

製品について

Ignite UI for Blazor