chart.jsでグラフのデータを動的に切り替えるにはどのようにすれば良いでしょうか？

Question

chart.jsで棒グラフを描写しました。

<script>
var ctx = document.getElementById("BarChart").getContext("2d");
var chart = new Chart(ctx, {
  type: "bar",
  data:{
    labels:["1月","2月","3月"],
    datasets:[{
      data:[4,5,9]
    }]
  },
  options:{}
});
</script>

これに例えば、

  data:{
    labels:["2000年","2001年","2002年"],
    datasets:[{
      data:[41,34,52]
    }]
　},

というデータを追加し、それをクリック等で切り替えられるようにしたいです。
どのようなコードを記述すれば実現出来るのでしょうか？

<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>

Comments

[退会済みユーザー]

回答文にコメントしました。

Answer 1

こんにちは

var chart = new Chart(ctx, ･･･{　で作成した変数 chart を使って

chart.data.labels = ["2000年","2001年","2002年"];
chart.data.datasets[0].data = [41,34,52];

としておいて、 chart.update() で、更新が反映されます。

以下、サンプルです。ボタンをクリックするとデータとラベルを切り替えます。

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/ZEEQQgE?editors=1010

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

こんばんは。アドバイスありがとうございます。
お返事が遅れてしまい、大変申し訳ございません。
とても勉強になります。
もう一つお聞きしたいのですが、例えば、全く繋がりのないグラフを切り替える際は何か良い方法はないでしょうか？
単純にタブやクリックでhtmlを入れ替えるという方法もあるかと思いますが、これだけページを開いた時に、同時に読み込んでしまうため、パフォーマンス的にもよろしくないかと思い質問させて頂きました。

[jun68ykt]

こんにちは

> 全く繋がりのないグラフを切り替える際は何か良い方法はないでしょうか？

とのことですが、おっしゃっている、「全く繋がりのないグラフ」とは、具体的には、
たとえば

一方のグラフはLineチャートで、もう一方はRadarチャートで、データもラベルも全く違う２つのグラフ

というものを想定すればよいでしょうか？

[退会済みユーザー]

返信遅れてしまい申し訳ありません。
その通りでございます。

[jun68ykt]

方法を調べたところ、stackoverflowの以下の投稿

Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
https://stackoverflow.com/questions/36949343/

のベストアンサーになっている下記の回答

https://stackoverflow.com/a/36988676

の回答者が作成した以下のサンプル

https://jsfiddle.net/ta9ogpvj/1/

が参考になるかもしれません。これを参考に、BARチャートと PIEチャートを切り替えるサンプルを作成してみました。以下です。

https://codepen.io/jun68ykt/pen/BaaQWWB

[退会済みユーザー]

アドバイスありがとうございます。とても助かります。
もう一点お聞きしたいのですが、例えば積立グラフのような場合はどのようにして、chart.update()を使えば良いのでしょうか？
参考までにサンプルコードを質問文に載せて起きます。