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

Question

我有这样的图表数据

对于数据

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'
      }
    ]
  }
];

对于 Chartjs

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

如何根据 dataObject 变量更新数据？ 我已经做到了

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

但是数据没有更新而是丢失了，而如果我只使用1个数据而不是一个组，则它已成功更新

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();
}

我这样做，但如果我调用changeData7(0) ，数据不会更改为索引 0

Answer 2

您正在更新每个数据集，并使用新数据集为其提供data 。 此外，还应在图表本身上提供标签，而不是在数据集项上提供。

正确的方法是

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

https://jsfiddle.net/8kzoc6nb/