Javascript 移动设备上的图表加载时间和动画速度慢

我使用chart.js构建了一个以0值开头的图表。单击提交按钮后，数据从外部数据库加载并在图表上更新。这在计算机浏览器上正常工作

从0值到图表上显示的新数据需要不到一秒钟的时间。但当我尝试用手机访问此页面时，它仍然可以工作，但加载时间很长。当点缓慢上升到新位置时，图表更新大约需要10秒钟。有时甚至在中途结冰

我使用固定值进行测试，而不是从数据库中获取它们，并且在手机上加载时间仍然延迟。因此，我认为这与Chart.js选项本身有关

在使用Chart.js时，是否可以减少移动设备上的加载时间？我真的没有看到任何优化选项。有人经历过类似的问题吗？下图显示了0值和加载值的图表

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>

精选赛
精选赛
更新

零值

加载的值

---

您正在第二级循环中更新图表，请将其从该循环中删除，并在设置完所有数据后更新图表。尝试使用迭代for循环代替forEach，它也可以提高性能