Chart.js で横軸を動的に指定して範囲を変更していく

今回はChart.jsで横軸のスケールで自動で動かす方法についてまとめておきたいと思います。
前回のブログの最後に後でまとめていきます。と記載した内容です。
elsammit-beginnerblg.hatenablog.com

■Chart.jsで横軸範囲を指定する
■横軸を動的に動かしてみる
■最後に
■参考

■Chart.jsで横軸範囲を指定する

まずはChart.jsで横軸を指定する方法に関してまとめていきます。
Chart.jsで横軸を指定するには、optionタグのticksを指定すればoKです。
例えば、

var ctx = document.getElementById("myLineChart3");
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1,2,3,4,5,6,7,8,9,10,11],
    datasets: [{
      label: 'CPU使用率',
      data: [10,20,50,30,0,15,20,10,80,12,32],
      borderColor: 'rgba(60, 190, 20, 1)',
      backgroundColor: "rgba(0,0,0,0)"
    }]
  },
  options: {
    animation: false,
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: '時間(秒)',   
          fontColor: "black", 
          fontSize: 16
        },
        ticks:{
          max:8,
          min:3,
          stepSize:1,
          fontColor: "black",
          fontSize: 14
        }
      }],
    }
  }
});

というようにコードを作成すると、
f:id:Elsammit:20210820223218p:plain
といったように、グラフに与えている横軸データは、

[1,2,3,4,5,6,7,8,9,10,11]

と11項目あるにも関わらず、

max:8,
min：3

と指定しているためにグラフの範囲が3～8になっています。
こちらのmax, minの値を変更させればグラフの範囲を自由に変化させることができます。
ここで、

max:20,
min:3

といったように横軸データを超えて範囲を指定した場合には、データの最大値が末端になります。
f:id:Elsammit:20210820223953p:plain

逆に、

max:3,
min:8

とした場合はどうなるのでしょうか？？
答えは、こちらの図のようにminで指定した値が一区間だけ表示されるようです。
f:id:Elsammit:20210820223953p:plain

■横軸を動的に動かしてみる

先ほどまでで、ticks内のmax,minを指定すれば横軸の範囲を指定すればよいことがわかりました。
では、本題の横軸の範囲を動的に指定して横軸を動かしてみたいと思います。
完成形はこんな感じになります。
f:id:Elsammit:20210812230657g:plain

コード全体は前回のブログをご覧になっていただくとして、
elsammit-beginnerblg.hatenablog.com

コードを抜き出すとこちらになります。

function setChartLabel(jsn, ChartBuf){
  if(Object.keys(jsn).length > 12){
    ChartBuf.options.scales.xAxes[0].ticks.max = Object.keys(jsn).length;
    ChartBuf.options.scales.xAxes[0].ticks.min = Object.keys(jsn).length - 12;
  }else{
    ChartBuf.options.scales.xAxes[0].ticks.max = 12;
    ChartBuf.options.scales.xAxes[0].ticks.min = 0;    
  }
}