分组条形图动态数据更新按按钮功能 ChartJS

Question

I have Data For My Chart Like This

For Data

var dataObject = [
  {
    label: ['1 Mouth', '2 Mouth', '3 Mouth', '4 Mouth', '5 Mouth', '6 Mouth', '7 Mouth'],
    datachart: [
      {
       label: 'Good',
       data: [1,2,3,4,5,6,7],
       backgroundColor: '#f56954'
      },
      {
       label: 'Middle',
       data: [1,2,3,4,5,6,7],
       backgroundColor: '#3c8dbc'
      },
      {
       label: 'Not Good',
       data: [1,2,3,4,5,6,7],
       backgroundColor: '#74b32d'
      }
    ]
  },
  {
    label: ['1 Mouth', '2 Mouth', '3 Mouth', '4 Mouth', '5 Mouth', '6 Mouth', '7 Mouth'],
    datachart: [
      {
       label: 'Good',
       data: [11,12,13,14,15,16,71],
       backgroundColor: '#f56954'
      },
      {
       label: 'Middle',
       data: [1,12,31,4,5,16,7],
       backgroundColor: '#3c8dbc'
      },
      {
       label: 'Not Good',
       data: [1,2,3,4,5,61,7],
       backgroundColor: '#74b32d'
      }
    ]
  }
];

For Chartjs

var data = {
      labels: dataObject[0].label,
      datasets: dataObject[0].datachart
};

How to update data according to dataObject variable? I've done this

function changeData7(index) {
  chart7.data.datasets.forEach(function(dataset) {
    dataset.label = dataObject[index].label;
    dataset.data = dataObject[index].datachart;
  });
  chart7.update();
}

but the data is not updated instead it is lost, whereas if I only use 1 data not a group, it is successfully updated

Answer 1

function changeData7(index) {
  chart7.data.datasets.forEach(function(item, indexs) {
    item.label = dataObject[index].datachart[indexs].label;
    item.data = dataObject[index].datachart[indexs].data;
  });
  chart7.update();
}

I do this but if i call changeData7(0) , data doesnt change to index 0

Answer 2

You're updating each dataset, and feeding it's data with the new dataset. Also, the labels should also be provided on the chart itself, instead of the dataset items.

The correct way would be

function changeData(index) {
    var data = dataObject[index];
    chart.data.labels = data.label;
    chart.data.datasets = data.datachart;
    chart.update();
}

https://jsfiddle.net/8kzoc6nb/