(Chart.js) canvas要素のサイズが変化する不具合を修正した。

アプリ制作

• 課題1

  • 体調グラフで表示しているカラム（活動量など) をToggleすると、グラフのサイズが

    変化してしまう。

• 原因

  • カラムをToggleすると毎回Chartを生成していたため。

jQuery('.chart-toggles a').click(function() {
  currentChart.destroy();
  jQuery(this).toggleClass('enabled');
  enableCheck();
  data = {
    labels: chartlabel,
    datasets: [ ACT, MOO, APP ]
  };
  newChart = new Chart(ctx , {
    type: 'line',
    data: data,
    options: options,
  });
  currentChart = newChart;
})

• 対処
  • Chartを削除・再生成するのではなく、更新するようにコードを修正

jQuery('.chart-toggles a').click(function() {

  jQuery(this).toggleClass('enabled');
  enableCheck();
  data = {
    labels: chartlabel,
    datasets: [ ACT, MOO, APP ]
  };

  currentChart.data = data;
  currentChart.options = options;
  currentChart.update();
})

• 結果
  • カラムをToggleさせてもグラフのサイズが維持できるようになった。