chart.js積立グラフでchart.update()を使うにはどうしたら良いでしょうか？

Question

chart.jsで作成した積立グラフがあります。
これをchart.update()を使い、動的にデータの更新を行いたいです。

<script>
  var ctx = document.getElementById("BarChart").getContext('2d');
  var DiskChart = new Chart(ctx, {
  type: 'bar',
    data: {
      labels: ["2018/9", "2018/10", "2018/11"],
      datasets: [
      {
        label: "しめじ",
        data: [20, 26, 12],
      },
      {
        label: "えのき",
        data: [28, 22, 32],
      },

      {
        label: "しいたけ",
        data: [15, 23, 15],
      },
    ]
  },
  options: {
   scales: {
     xAxes: [{
       stacked: true,
       }],
       yAxes: [{
         stacked: true,
        }],
      }
    }
});
</script>

<script>
  var ctx = document.getElementById("BarChart").getContext('2d');
  var DiskChart = new Chart(ctx, {
  type: 'bar',
    data: {
      labels: ["2018/9", "2018/10", "2018/11"],
      datasets: [
      {
        label: "リンゴ",
        data: [20, 26, 12],
      },
      {
        label: "みかん",
        data: [28, 22, 32],
      },

      {
        label: "ぶどう",
        data: [15, 23, 15],
      },
    ]
  },
  options: {
   scales: {
     xAxes: [{
       stacked: true,
       }],
       yAxes: [{
         stacked: true,
        }],
      }
    }
});
</script>

公式ドキュメントを読みながら試行錯誤したのですが、上手くいきませんでした。
どなたか知恵を貸して頂けると嬉しいです。

<div>
<canvas id="BarChart">
</div>
<button id="button" type="button">切り替え</button>

<script>
  document.addEventListener('DOMContentLoaded', function() {

    var ctx = document.getElementById("BarChart").getContext("2d");
    var chart = new Chart(ctx, {
      type: "bar",
      data:{
        labels: ["1月","2月","3月"],
        datasets: [
        {
          label: "しめじ",
          data: [20, 26, 12],
        },
        {
          label: "えのき",
          data: [28, 22, 32],
        },

        {
          label: "しいたけ",
          data: [15, 23, 15],
        },
      ]
      },
      options:{
        scales: {
          xAxes: [{
            stacked: true,
            }],
            yAxes: [{
              stacked: true,
             }],
        }
      }
    });


    document.getElementById("button")
            .addEventListener('click',
                function() {
                    chart.data.labels = ["2000年","2001年","2002年"];
                    chart.data.datasets = [{label: "リンゴ",data: [20, 26, 12]},{label: "みかん",data: [28, 22, 32]},{label: "ぶどう",data: [15, 23, 15]},]
                    chart.update();
                }
            );
  });

</script>

Answer 1

こんにちは

色々なやり方がありそうですが、一例として以下のようにすればよいかと思います。

const CHART_DATA = {
  MUSHROOMS: {
    labels: ["1月", "2月", "3月"],
    datasets: [{
        label: "しめじ",
        data: [20, 26, 12],
        backgroundColor: '#4b8e8d',
      },
      {
        label: "えのき",
        data: [28, 22, 32],
        backgroundColor: '#5eb7b7',
      },

      {
        label: "しいたけ",
        data: [15, 23, 15],
        backgroundColor: '#96d1c7',
      },
    ]
  },
  FRUITS: {
    labels: ["2000年", "2001年", "2002年"],
    datasets: [{
      label: "リンゴ",
      data: [120, 110, 190],
      backgroundColor: '#7c0a02',
    }, {
      label: "みかん",
      data: [189, 120, 230],
      backgroundColor: '#f45905',
    }, {
      label: "ぶどう",
      data: [133, 105, 200],
      backgroundColor: '#fb9224',
    }]
  }
}



document.addEventListener('DOMContentLoaded', function() {

  let target = 'MUSHROOMS';
  
  var ctx = document.getElementById("BarChart").getContext("2d");
  var chart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: CHART_DATA[target].labels,
      datasets: CHART_DATA[target].datasets
    },
    options: {
      scales: {
        xAxes: [{
          stacked: true,
        }],
        yAxes: [{
          stacked: true,
        }],
      }
    }
  });


  document.getElementById("button")
    .addEventListener('click',
      function() {
        target = target === 'MUSHROOMS' ? 'FRUITS' : 'MUSHROOMS';
        chart.data.labels = CHART_DATA[target].labels;
        chart.data.datasets = CHART_DATA[target].datasets;
        chart.update();
      }
    );
});

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/bGGgJgy?editors=1010

なお上記のサンプルでは、切り替えが分かりやすく目視で確認できるように、バーに背景色をつけているのと、果物のdataを適当に変えました。

参考になれば幸いです。

Comments

[退会済みユーザー]

素晴らしい回答ありがとうございました。
また何かありましたらお願いします。

[jun68ykt]

どういたしまして。参考になれば幸いです。

[退会済みユーザー]

とても助かります。
参考までにお聞きしたいのですが、グラフの切替毎にアニメーションを実行するにはどうすれば良いでしょうか？

[退会済みユーザー]

あと出来ましたら、MUSHROOMSグラフが表示されている時は「FRUITSに切り替え」のボタンを、FRUITSグラフが表示されている時は「MUSHROOMSに切り替え」ボタンを表示する事は出来ますでしょうか？
お手数ばかり掛けて大変申し訳ございません。

[jun68ykt]

その場合は、現在表示している chart を destroyしてから、再度、new Chart　ですね。

以下サンプルです。
https://codepen.io/jun68ykt/pen/JjjEgjE?editors=1010

さらなる新たなご質問がありましたら、答えられるご質問には、なるべく回答したいと思いますので、新しい投稿にてお願い致します。

[退会済みユーザー]

ご丁寧にありがとうございます。
了解致しました。
お手数掛けて申し訳ございませんでした。次からはおっしゃるように新たな質問にて対応させて頂きますので今後ともよろしくお願いします。

[jun68ykt]

承知しました。またお役に立てそうなご質問を楽しみにしております。草々

Answer 2

そのままchart.update()をしても更新されるわけではなく、new Chart()で作ったオブジェクトに対してupdate()を呼んであげる必要があります。
この場合ですと DiskChart に対してですね。

Comments

[退会済みユーザー]

アドバイスありがとうございます。
出来ればサンプルコードのご提示などがあると非常に助かるのですが、難しいでしょうか？

[8zca]

そのままになりますけど
DiskChart.update();
ですね。

初期表示がきのこ類で、なにかのイベント（ボタンをクリックしたり）トリガーでフルーツに置き換える場合は
DiskChart.data.datasets = [{label: "リンゴ", data: [20, 26, 12]}, { みかんのオブジェクト }, {ぶどうのオブジェクト}];
DiskChart.update();
になります。

https://www.chartjs.org/docs/latest/developers/api.html
公式ページの .update の欄もあわせて確認してみてください。

[退会済みユーザー]

丁寧なアドバイスありがとうございます。
チャートの切り替えは出来たのですが、今度は元に戻らなくなってしまいました。
質問文にコードを載せますので、アドバイスお願いできないでしょうか？

[8zca]

ボタンでの切り替えができているので、いまのコードを応用すれば目的の処理は実現できますね。
例えば、
var fruit = false;
とフルーツかどうかのフラグを用意しておき、切り替えボタンがクリックされたら
fruit = !fruit;
と反転させる。
あとはfruitのフラグを見てdatasetsに入れるデータを場合分けして代入し、update()してあげればよいと思います。