Chart.js XY軸スケール<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

Chart.js XY軸スケール(対象:棒グラフ、折線グラフ)


Y軸スケール

折線グラフや棒グラフでは、Aのようにデータから判断して適切なスケールが設定されます。
Bのように、ticks でスケールの最小値、最大値、刻み幅を与えることができます。
しかし、その範囲を逸脱したデータがあると、その部分は表示されません。
Cのように、min → suggestedMin, max → suggestedMax とすることにより、逸脱したデータも表示できます。

Y軸スケールA

    ticks の指定なし

Y軸スケールB

options: {
     :
    scales: {
        yAxes: [           // Y軸 
            {
                ticks: {     // 目盛り        
                    min: 0,      // 最小値
                      // beginAtZero: true でも同じ
                    max: 25,     // 最大値
                    stepSize: 5  // 間隔
                }
            :

Y軸スケールC

   ticks: {        
       suggestedMin: 0,
       suggestedMax: 25,
       stepSize: 5
   }

X軸スケール

Y軸と同様にX軸でも、Bのようにmin/maxの指定ができます。このときはsuggestedMin/suggestedMaxは使えませんし、stepSize も使えません(無視されます)。
その理由は、X軸のラベルは単なる文字列で数値のような大小関係を示していないからです。同様な機能は maxTicksLimit で設定します。

多くのデータが時系列で与えられているとき、全ての要素でのラベルを表示することができません。標準では、
 ・表示を斜めにする
 ・それでも表示できないときは、適当にスキップする
ことにより、Cのように表示されます。

Dのように、水平に利用者が指示した間隔で表示することを考えます。

X軸スケールB

options: {
     :
    scales: {
        xAxes: [  // X軸 
            {
               ticks: {       
                    min: "6月",
                    max: "9月",
                    stepSize: 2 // 無視される
                }
            :

X軸スケールC

xAxes.ticksでの設定なし
.
.
.
.
.
.
.
.

X軸スケールD

xAxes: [
    {
        ticks: {
            :
            minRotation: 0,   // ┐表示角度水平
            maxRotation: 0,   // ┘
            // autoSkip: true,  なくてもよい
            maxTicksLimit: 6  // 最大表示数
        },
        :

minRotation/maxRotationは表示角度の幅を与えます。0により水平になります(90なら垂直)
maxTicksLimitは、最大表示数です。stepSize のように間隔を設定するのではなく、個数を設定して間隔はChart.jsに任せる(通常は等間隔になる)のです。最小表示の機能はありません。
autoSkip: trueは「間隔をChart.jsに任せる」設定です。省略時が true ですので記述は不要です。これを false にすると全ラベル表示になります。