时间戳

首页 > 解决方案 > chartjs update() 没有更新

javascript - chartjs update() 没有更新

问题描述

更新：

我已经解决了这个问题，原因是这十个图表都命名为“rank_chart”，我发现即使这十个图表都有自己的唯一 ID，但对于图表元素它们是相同的。因此，chart id='rank-1' 到 chart 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();
        }
    }

如果您遇到同样的问题，希望这会有所帮助。

原帖：

我遇到了 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[0].data 和 data.labels，它们都会成功更新。但是，图表不会更新，所以我认为问题可能出在行 rank_chart.update() 上。但是我不知道如何解决这个问题，有人知道如何解决这个问题吗？

标签： javascriptjquerychart.js

解决方案

如果我记得的话，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();
  });
}

推荐阅读