Diagramm Ladezeit und Animation langsam auf Mobilgerät

Question

Ich habe ein Diagramm mit Chart.js erstellt, die mit 0 beginnt. Nach dem Klicken auf eine Senden-Schaltfläche werden Daten aus einer externen Datenbank geladen und im Diagramm aktualisiert. Dies funktioniert wie erwartet auf einem Computer-Browser.

Wird weniger als eine Sekunde benötigt, um von 0 Werten zur neuen Datenanzeige im Diagramm zu gelangen. Aber wenn ich versuche, auf diese Seite auf einem Handy zuzugreifen, funktioniert es immer noch, aber die Ladezeit ist sehr lang. Es dauert etwa 10 Sekunden, bis sich das Diagramm aktualisiert hat, da die Punkte langsam auf neue Positionen steigen. Manchmal erstarrt es sogar in der Mitte.

Ich habe mit festen Werten getestet, anstatt sie aus der Datenbank zu bekommen und die Ladezeit ist immer noch auf dem Handy verzögert. Also ich denke, es hat stattdessen mit den chart.js Optionen selbst zu tun.

Gibt es trotzdem eine Verringerung der Ladezeit auf mobilen Geräten bei Verwendung von Chart.js? Ich sehe dort keine Optimierungsmöglichkeiten. Hat jemand ähnliche Probleme erlebt? Die folgenden Bilder zeigen das Diagramm mit dem Wert 0 und dem geladenen Wert.

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> 

Nullwert

Werte Loaded

Answer 1

Du Diagramm in der 2. Ebene Schleife zu aktualisieren, entfernen Sie es von dort und das Diagramm aktualisieren, nachdem alle Daten festgelegt wurde. Und versuchen Sie es mit iterierter for-Schleife anstelle von forEach, es kann auch die Leistung erhöhen.