線形軸(linear)

リニア(線形)スケールは、数値データのチャートに使用されます。 X軸またはY軸のどちらかに設定することができます。 散布図では、X軸に対してリニアスケールを使った折れ線グラフを自動的に設定します。 名前が示すように、線形補間を使って、値が軸上のどこにあるかを決定します。

目盛線設定

リニアスケールには、目盛線の設定のための以下のオプションがあります。 これらはtickオプションのサブオプションです。 これらのオプションは目盛線設定を拡張します。

範囲設定

軸の範囲設定が複数指定された場合に、 それぞれの値が互いにどう作用するか理解することが重要です。

suggestedMaxとsuggestedMinは、 軸をスケールするために、データのみを変更します。 これらは、自動で軸範囲を変更するに便利です。

let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);

以下の例では、データの最大値は50ですが、最大値を100まで拡張します。 しかし、最小値はsuggestedMinの値よりも小さいので、無視されます。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 50
                    suggestedMax: 100
                }
            }]
        }
    }
});

suggested～とは対象的に、 min、maxでは軸の終端が明示的に設定されます。 これらが設定されると、一部のデータが表示されない場合があります。

ステップサイズ

stepSizeが設定されている場合、 目盛線はstepSizeの倍数で列挙されます。 stepSizeが設定されていない場合、 適切なアルゴリズムを使って自動的に目盛線を表示します。

以下の例では、0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5に目盛線を生成するY軸チャートを設定しています。

let options = {
    scales: {
        yAxes: [{
            ticks: {
                max: 5,
                min: 0,
                stepSize: 0.5
            }
        }]
    }
};