javascript - 移动设备上的图表加载时间和动画缓慢

Question

我有一个使用 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>

零值

加载值

Answer 1

您正在二级循环中更新图表，从那里删除它并在设置所有数据后更新您的图表。并尝试使用迭代 for 循环而不是 forEach，它也可以提高性能。