Grafik yükleme süresi ve animasyon mobil cihazlarda yavaşlama

0 değerleriyle başlayan Chart.js kullanılarak oluşturulan bir grafiğim var. Gönder düğmesine tıklandığında, veriler harici bir veritabanından yüklenir ve grafikte güncellenir. Bu bir bilgisayar tarayıcısında beklendiği gibi çalışıyor.Grafik yükleme süresi ve animasyon mobil cihazlarda yavaşlama

Grafikteki yeni veri göstergesine 0 değerden ulaşmak için bir saniyeden uzun sürüyor. Ancak bu sayfaya bir cep telefonunda erişmeye çalıştığımda hala çalışıyor ancak yükleme süresi çok uzundur. Grafik, yeni konumlara yavaşça yükseldikçe, haritanın güncellenmesi yaklaşık 10 saniye sürüyor. Bazen bile yarısı donar.

Veritabanından almak yerine sabit değerlerle test ettim ve yükleme süresi cep telefonunda hala gecikmeli. Bu yüzden bunun yerine Chart.js seçenekleri ile ilgili olduğunu düşünüyorum.

Chart.js kullanılırken mobil cihazlarda yükleme süresini azaltmak için var mı? Orada herhangi bir optimizasyon seçeneği görmüyorum. Benzer sorunları olan var mı? Aşağıdaki resimler, grafiğin 0 değerine ve yüklenen değere baktığını göstermektedir.

JavaScript

$(document).ready(function() { 

    var lineData = { 
     labels: ["Lap 1", "Lap 2", "Lap 3", "Lap 4", "Lap 5", "Lap 6", "Lap 7", "Lap 8", "Lap 9", "Lap 10", "Lap 11", "Lap 12"], 
     datasets: [{ 
      fillColor: "rgba(255,255,255,0)", 
      strokeColor: "rgba(63,169,245,1)", 
      pointColor: "rgba(63,169,245,1)", 
      pointStrokeColor: "#fff", 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 
     }, { 
      fillColor: "rgba(255,255,255,0)", 
      strokeColor: "rgba(102,45,145,1)", 
      pointColor: "rgba(102,45,145,1)", 
      pointStrokeColor: "#fff", 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 
     }] 
    } 

    var lineOptions = { 
     responsive: true, 
     animation: true, 
     pointDot: true, 
     scaleOverride : false, 
     scaleShowGridLines : false, 
     scaleShowLabels : true, 
     scaleSteps : 4, 
     scaleStepWidth : 25, 
     scaleStartValue : null 
    }; 

    //Create Line chart 
    var ctx = document.getElementById("lineChart").getContext("2d"); 
    myNewChart = new Chart(ctx).Line(lineData, lineOptions); 

    $("#form").submit(function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var race1 = $("#racename1").val(); 
     var race2 = $("#racename2").val(); 
     var race1Data = []; 
     var race2Data = []; 

     if ((race1.length > 0 && race2.length > 0) && 
       (race1.toLowerCase() != "select race" && race2.toLowerCase() != "select race")) { 

      $.post("updateStatChartServlet", {raceName1 : race1, raceName2 : race2}, function(responseText) { 
       var temp = responseText; 
       var race1Str = temp.substring(0,temp.indexOf("|")); 
       var race2Str = temp.substring(temp.indexOf("|")+1,temp.length); 
       race1Data = race1Str.split(","); 
       race2Data = race2Str.split(","); 

       var count = 0; 

       lineData.datasets.forEach(function(set){ 
        set.data.forEach(function(){ 
         if(race1Data[count].trim() != ""){ 
          myNewChart.datasets[0].points[count].value = race1Data[count]; 
         } 
         else{ 
          myNewChart.datasets[0].points[count].value = 0; 
         } 

         if(race2Data[count].trim() != ""){ 
          myNewChart.datasets[1].points[count].value = race2Data[count]; 
         } 
         else{ 
          myNewChart.datasets[1].points[count].value = 0; 
         } 
         myNewChart.update(); 
         count++; 
        }); 
       }); 
      }); 
     } 
     else{ 
      alert("Fill Both Race Fields with Valid Data"); 
     } 
    }); 

});

HTML

<form id="form"> 
<div class="form-group col-sm-4 col-lg-4"> 
    <select id="drivername1" class="form-control"> 
    </select> 
    <select id="racename1" class="form-control"> 
     <option value="select race">Select Race</option> 
    </select> 
</div> 

<div class="form-group col-sm-4 col-lg-4"> 
    <select id="drivername2" class="form-control"> 
    </select> 
    <select id="racename2" class="form-control"> 
     <option value="select race">Select Race</option> 
    </select> 
</div> 

<div class="form-group col-sm-4 col-lg-4"> 
    <button id="update" type="submit">Update</button> 
</div>

Sıfır Değer