chart.jsでボタンをクリックしてチャートの中身を変える方法

Chart.jsでボタンをクリックするとデータラベルと数値を変更したい場合、どのように実現すべきでしょうか。現在、他のサンプルコードを元に同じボタンをクリックするとラベルと中身が更新できるようになりました。

この場合には、同じボタンでクリックするこでデータが更新されますが、このボタンを３つに分け、ボタン１, ボタン２，ボタン３でそれぞれ該当データが表示されるようにしたいです。

３種類のデータ

document.addEventListener('DOMContentLoaded', function() {
var myData = [
  { labels: ["1月","2月","3月"],
  data: [2000,500,150] },
  { labels: ["2010年","2011年","2012年"],
  data: [500,2000,500] },
  { labels: ["月曜日","火曜日","水曜日"],
  data: [200,12000,3000] }
];
var selectedIndex = 0;

データのスイッチ

// Bar Chart Switch
var ctx = document.getElementById("BarChart").getContext("2d");
var chart = new Chart(ctx, {
  type: 'bar',
  data:{
  labels: myData[selectedIndex].labels,
  datasets:[{
    data: myData[selectedIndex].data
  }]

},

  options: {}
});

ボタンのクリックアクション

// Bar Chart Switch button
 document.getElementById('button')
         .addEventListener('click',function()
         {
                 selectedIndex = (selectedIndex+1) % 3;
                 chart.data.labels = myData[selectedIndex].labels;
                 chart.data.datasets[0].data = myData[selectedIndex].data;
                 chart.update();
             }
         );
});

行動規範の内容に同意します

回答1件

ベストアンサー

提示されたコードではボタンを押すごとにselectedIndexを書き換えることで描画するデータを切り替えています。
ご希望の動作を実現するには、ボタンごとに対応するデータを固定してしまえば良いです。

ボタンを三つ用意します。

html
1<button id="button1">1</button>
2<button id="button2">2</button>
3<button id="button3">3</button>

button1をmyData[0]、button2をmyData[1]、button3をmyData[2]に対応させます。

js
1document.getElementById('button1').addEventListener('click', function() {
2  const selectedData = myData[0] // ここでデータを選ぶ
3  chart.data.labels = selectedData.labels;
4  chart.data.datasets[0].data = selectedData.data;
5  chart.update();
6});

こんな感じでそれぞれのボタンにイベントを登録していけば良いのですが、
同じようなコードが重複するのでupdateChart()にまとめます。

js
1const updateChart = (selectedData) => {
2  chart.data.labels = selectedData.labels;
3  chart.data.datasets[0].data = selectedData.data;
4  chart.update();
5}
6
7document.getElementById('button1').addEventListener('click', function() {
8  updateChart(myData[0])
9});
10
11document.getElementById('button2').addEventListener('click', function() {
12  updateChart(myData[1])
13});
14
15document.getElementById('button3').addEventListener('click', function() {
16  updateChart(myData[2])
17});