ふわ

2021年04月04日に参加

学習履歴詳細

(Chart.js) canvas要素のサイズが変わってしまう不具合を修正した。

アプリ制作

  • 課題

    • 体調グラフで表示しているカラム（活動量など) を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させてもグラフのサイズが維持できるようになった。
JavaScript
JQuery

2019年12月23日(月)

1.5時間