РЕШЕННАЯ диаграмма js update () не обновляется - PullRequest
Новая
       5

РЕШЕННАЯ диаграмма js update () не обновляется

3 голосов
/ 04 августа 2020

ОБНОВЛЕНИЕ:

Я решил проблему, и причина в том, что все эти десять диаграмм называются 'rank_chart', и я обнаружил, что, хотя эти десять диаграмм имеют свой собственный уникальный идентификатор, но для элемента диаграммы они такие же. Из-за этого обновление данных диаграммы 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();
        }
    }

Надеюсь, это будет полезно, если вы получили та же проблема.

ОРИГИНАЛЬНОЕ ЗАПИСЬ:

У меня проблемы с обновлением диаграммы JS. На одной веб-странице есть 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();
            });

        }

Консольной ошибки не будет, и если я зарегистрирую data.datasets [0] .data и data.labels в веб-консоль, все они успешно обновлены. Однако графики не будут обновляться, поэтому я думаю, что проблема может заключаться в строке rank_chart.update (). Но я понятия не имел, как это решить, кто-нибудь знает, как это исправить?

1 Ответ

1 голос
/ 04 августа 2020

Если я помню, диаграмма. 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();
  });
}
...