線形直交軸

線形スケールは、数値データのグラフ化に使用されます。x軸またはy軸のいずれかに使用できます。散布図では、線グラフを基本の型として使用しますが、線グラフのx軸が線形スケールとして自動的に設定されます。この名前(訳注: 線形スケール)が示すように、値が軸上のどこにあるかを決定するために線形補間が使用されます。

目盛設定オプション

以下のオプションは、線形スケールにおいて使用できます。これらはすべて ticksサブオプションにあります。これらのオプションは共通の目盛設定を拡張します。

軸範囲の設定

軸の範囲設定をする際には、それらが互いにどのように相互作用するかを理解することが重要です。

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: '1つ目のデータセット',
            data: [0, 20, 40, 50]
        }],
        labels: ['1月', '2月', '3月', '4月']
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 50,
                    suggestedMax: 100
                }
            }]
        }
    }
});

suggested~の設定とは対照的に、minと maxの設定は明示的な端を軸に設定します。これらを設定すると、一部のデータ点が表示されないことがあります。

刻み幅

設定されている場合、スケール目盛はstepSizeの倍数で生成され、1つごとに目盛線が引かれます。設定されていない場合、目盛はnice numbersアルゴリズムを使用して自動的に付けられます。

この例では、 '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
            }
        }]
    }
};