chartjs update()未更新

Question

更新：

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

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

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

如果你遇到同样的问题，希望这篇文章能对你有所帮助。

原文：

我有一个关于ChartJS更新的问题。在一个网页中有10个图表共享相同的图表选项。

<canvas id="rank-1" value="1"></canvas>
<canvas id="rank-2" value="2"></canvas>
<canvas id="rank-3" value="3"></canvas>
<canvas id="rank-4" value="4"></canvas>
<canvas id="rank-5" value="5"></canvas>
<canvas id="rank-6" value="6"></canvas>
<canvas id="rank-7" value="7"></canvas>
<canvas id="rank-8" value="8"></canvas>
<canvas id="rank-9" value="9"></canvas>
<canvas id="rank-10" value="10"></canvas>

和JS部分

    var rank_chart;
    var numberIdArr = ['first','second','third','fourth','fifth'];
    var valueArr = [1,2,3,4,5];

    $('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: {
                title: {
                    display: false,
                    text: "rank"
                },
                responsive: true,
            },
            
        });
        
        return rank_chart;
    });

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

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

        }

不会出现控制台错误，如果我在web控制台中登录data.datasets.data和data.labels，它们都会成功更新。但是，图表不会更新，所以我认为问题可能出在行rank_chart.update()上。但我不知道怎么解决这个问题，有人知道怎么解决吗？

Answer 1

如果我没记错的话，chart.js会将这些对象赋值给自己的通过引用传递的变量，所以尝试在适当的地方进行变异，而不是将(=)赋值给配置属性。

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