# 軸のラベル付け

チャートを作成する際には、閲覧者にどのようなデータを見ているのかを伝える必要があります。そのためには、軸にラベルを付ける必要があります。

# 軸タイトルの設定

名前空間:options.scales[scaleId].title は、軸タイトルのオプションを定義します。これは直交座標軸にのみ適用されることに注意してください。

名前 種類 デフォルト 説明
display boolean false true の場合、軸タイトルを表示します。
align string 'center' 軸タイトルの配置。可能なオプションは 'start''center''end' です。
text string|string[] '' タイトルのテキスト。(例:"# of People" または "Response Choices")
color Chart.defaults.color ラベルの色。
font フォント Chart.defaults.font フォントを参照してください。
padding パディング 4 軸ラベルの周囲に適用するパディング。topbottomy のみが実装されています。

# カスタム目盛りフォーマットの作成

目盛りマークを変更してデータ型の情報を含めることもよくあります。たとえば、ドル記号( '$')を追加します。これを行うには、軸設定で ticks.callback メソッドをオーバーライドする必要があります。

メソッドは3つの引数を受け取ります

  • value - 関連付けられた軸の**内部データ形式**での目盛りの値。時間軸の場合、これはタイムスタンプです。
  • index - 目盛り配列内の目盛りのインデックス。
  • ticks - すべての目盛りオブジェクトを含む配列。

メソッドの呼び出しは軸のスコープに限定されます。メソッド内部の this は軸オブジェクトです。

コールバックが null または undefined を返すと、関連付けられたグリッドラインは非表示になります。

ヒント

線グラフと棒グラフのデフォルトのx軸であるカテゴリ軸は、内部データ形式として`index`を使用します。ラベルにアクセスするには、`this.getLabelForValue(value)`を使用します。API: getLabelForValue

次の例では、Y軸のすべてのラベルの先頭にドル記号が付いて表示されます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, ticks) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});

ticks.callback をオーバーライドすると、ラベルのすべての書式設定を行う必要があることに注意してください。ユースケースによっては、デフォルトのフォーマッタを呼び出してから、その出力を変更することができます。上記の例では、次のようになります。

                        // call the default formatter, forwarding `this`
                        return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);

関連サンプル

最終更新日: 2024年5月17日 12:33:38 PM