軸のラベル付け

グラフを作成するときに、読者に何のデータが表示されているかを伝えたいとします。これを行うには、軸にラベルを付ける必要があります。

スケールタイトル設定

スケールラベル設定はscaleLabelキーにあり、スケール設定の下にネストされています。これはスケールタイトルのオプションを定義します。直交座標軸にのみ適用されることに注意してください。

名前 初期値 説明
display Boolean false trueの場合、軸タイトルを表示します。
labelString String '' タイトルのテキスト。 (つまり、「人数」とか「回答の選択肢」)。
lineHeight Number/String 1.2 個々のテキスト行の高さ。(MDNを参照してください。)
fontColor Color '#666' スケールタイトルのフォント色。
fontFamily String "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" スケールタイトルのフォントファミリ。CSSフォントファミリのオプションに従います。
fontSize Number 12 スケールタイトルのフォントサイズ。
fontStyle String 'normal' スケールタイトルのフォントファミリ。CSSフォントファミリのオプションに従います。(i.e. normal, italic, oblique, initial, inherit)。
padding Number/Object 4 スケールラベルの周囲に適用するパディング。topbottomだけが実装されています。

カスタム目盛様式を作成する

データ形式に関する情報を含めるように目盛を変更することも一般的です。たとえば、ドル記号('$')を追加します。これを行うには、軸設定の ticks.callbackメソッドをオーバーライドする必要があります。 次の例では、Y軸のすべてのラベルが頭にドル記号を伴って表示されます。

コールバックが nullまたはundefinedを返す場合、関連するグリッド線は非表示になります。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // 目盛にドル記号を入れる
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }]
        }
    }
});

results matching ""

    No results matching ""