Javascript chartjs update（）未更新

更新：

我已经解决了这个问题，原因是这十个图表都被命名为“rank_chart”，我发现尽管这十个图表有自己的唯一id，但对于图表元素，它们是相同的。因此，图表id='rank-1'到图表id='rank-9'的更新数据被id='rank-10'的更新数据覆盖

要解决这个问题，只需将所有图表元素放入数组中，然后分别更新它们

JS部分

    var rank_chart;
    var numberIdArr = ['first','second','third','fourth','fifth'];
    var valueArr = [1,2,3,4,5];    
    var chartArr = new Array; //array for all charts

    $('canvas[id^="rank-"]').each(function(){
        rank_chart= new Chart($(this), {
            type: 'bar',
            data: {
                labels: numberIdArr,
                datasets: [{
                    barPercentage: 0.5,
                    barThickness: 6,
                    maxBarThickness: 8,
                    minBarLength: 2,
                    data: valueArr 
                }]
            },
            options: {
                ...
            },
        });
        chartArr.push(shipRank_chart);//push to arr
        return rank_chart;
    });

更新功能

    function update_chart_data(id){
        for (var m = 0 ; m < chartArr.length; m++) {
            var id = chartArr[m]['id'];
            var update_data = data_array2[keyArr2[id]];
            var data = chartArr[m].chart.config.data;
            // unset
            data.datasets[0].data.length = 0;
            data.labels.length = 0;
            // get update data
            for(var i = 0; i < update_data.length ; i++){
                data.labels.push(update_data[i]['numberId']);
                data.datasets[0].data.push(update_data[i]['value']);
            }
            
            // update each chart individually
            chartArr[m].update();
        }
    }

首先，这十个图表将具有相同的数据数组numberIdArr和valueArr。然后，我将在每个图表的函数更新图表数据中对这两个数组进行不同的更改

        function update_chart_data(id){
        
            $('canvas[id^="rank-"]').each(function(){
                var id = parseInt($(this).attr('value'));
                id --;
                var i;
                var update_data = data_array2[keyArr2[id]];//here is to get update data
                var new_numberIdArr = [];
                var new_valueArr = [];
                for(i = 0; i < update_data.length ; i++){
                    update_data[i]['numberId'] = update_data[i]['numberId'];
                    new_numberIdArr.push(update_data[i]['numberId']);
                    new_valueArr.push(update_data[i]['value']);
                }
                
            
                var data = rank_chart.config.data;
                data.datasets[0].data = new_valueArr;
                data.labels = new_numberIdArr;
                
                rank_chart.update();
            });

        }
   

功能更新\u图表\u数据（id）{
$（'canvas[id^=“rank-”）。每个（函数（）{
var id=parseInt（$（this.attr（'value'））；
id--；
var i；
var update_data=data_array2[keyArr2[id]]；//下面是获取更新数据的步骤
var new_numberIdArr=[]；
var new_valueArr=[]；
对于（i=0；i

---

不会出现控制台错误，如果我在web控制台中记录data.dataset[0].data和data.label，它们都会成功更新。但是，图表不会更新，因此我认为问题可能是line rank_chart.update（）。但我不知道如何解决这个问题，有人知道如何解决这个问题吗？

如果我记得，chart.js会将这些对象分配给通过引用传递的自己的变量，所以尝试就地变异，而不是将（=）分配给config属性

function update_chart_data(id){
  $('canvas[id^="rank-"]').each(function(){
      var id = parseInt($(this).attr('value'));
      id --;
      var i;
      var update_data = data_array2[keyArr2[id]];//here is to get update data
      var data = rank_chart.config.data;
      data.datasets[0].data.length = 0;
      data.labels.length = 0
      for(i = 0; i < update_data.length ; i++){
          data.labels.push(update_data[i]['numberId']);
          data.datasets[0].data.push(update_data[i]['value']);
      }

      rank_chart.update();
  });
}

功能更新\u图表\u数据（id）{
$（'canvas[id^=“rank-”）。每个（函数（）{
var id=parseInt（$（this.attr（'value'））；
id--；
var i；
var update_data=data_array2[keyArr2[id]]；//下面是获取更新数据的步骤
var data=rank_chart.config.data；
data.datasets[0]。data.length=0；
data.labels.length=0
对于（i=0；i

谢谢您的回答！我已经解决了这个问题，请在更新部分进行检查。

        function update_chart_data(id){
        
            $('canvas[id^="rank-"]').each(function(){
                var id = parseInt($(this).attr('value'));
                id --;
                var i;
                var update_data = data_array2[keyArr2[id]];//here is to get update data
                var new_numberIdArr = [];
                var new_valueArr = [];
                for(i = 0; i < update_data.length ; i++){
                    update_data[i]['numberId'] = update_data[i]['numberId'];
                    new_numberIdArr.push(update_data[i]['numberId']);
                    new_valueArr.push(update_data[i]['value']);
                }
                
            
                var data = rank_chart.config.data;
                data.datasets[0].data = new_valueArr;
                data.labels = new_numberIdArr;
                
                rank_chart.update();
            });

        }
   

function update_chart_data(id){
  $('canvas[id^="rank-"]').each(function(){
      var id = parseInt($(this).attr('value'));
      id --;
      var i;
      var update_data = data_array2[keyArr2[id]];//here is to get update data
      var data = rank_chart.config.data;
      data.datasets[0].data.length = 0;
      data.labels.length = 0
      for(i = 0; i < update_data.length ; i++){
          data.labels.push(update_data[i]['numberId']);
          data.datasets[0].data.push(update_data[i]['value']);
      }

      rank_chart.update();
  });
}