javascript - Kendo UI 的加载指示器？

Question

我的仪表板中有近 32 个图表图 block ，300 像素的方 block 。我在每一个中都展示了图表。我正在使用 REST API 以 JSON 格式将数据提取到这些图表中。

在 document.ready() 函数中，我调用函数来填充图表。但最初 UI 将空白 10 秒，然后显示所有图表。

然后我将所有函数移至 window.load() 函数中。但在这种方法中，它显示了所有 div，但直到 10 秒才显示图表。

我需要做的是在完成加载时一张一张地显示图表，并显示正在加载的所有其他图表的加载指示器。

有办法做到这一点吗？

    $(window).load(function () {


    GetHistoricGoals();
    GetActivityGoals();
    GetWaterGoals();

    stepsChart("#Steps", "Steps", "week", null);

    distanceChart("#Distance", "Distance", "week", null);
    floorChart("#Floors", "Floors", "week", null);
    caloriesChart("#Calories", "Calories Out", "week", null);

    sedentaryActivityChart("#SedentaryActivity", "Sedentary Minutes", "week", null);
    lightlyActivityChart("#LightlyActivity", "Lightly Active Minutes", "week", null);
    fairlyActivityChart("#FairlyActivity", "Fairly Active Minutes", "week", null);
    veryActivityChart("#VeryActivity", "Very Active Minutes", "week", null);

    ActivityChart("#Activity", "Active Minutes", "week", null);

    weightsChart("#Weights", "Weight", "week", null);
    bmiChart("#BMI", "BMI", "week", null);

    sleepActualChart("#SleepActual", "Minutes Sleep", "week", null);
    sleepInBedChart("#SleepInBed", "Minutes In Bed", "week", null);
    sleepChart("#Sleep", "Sleep", "week", null);

    foodChart("#Food", "Food", "week", null);
    waterChart("#Water", "Water", "week", null);

 -----------------
------------------
    heartRateChart("#HeartRate", "Heart Rate", "week", null);

    IntraDayChart("steps", kendo.toString(new Date(), "MM/dd/yyyy"), "orangered");

    deviceDetails("summary");
    profileDetails("#MainContent");
    friendsDetails("Friends", 4);
    badgesDetails("Badge", 4);

    DeviceAlarm();
    OrderCharts();

});

下面的这个功能只是显示“步骤图”的一个功能。这样的函数有32个。

function stepsChart(container, title, period1, period2) {

            var dSource = getJsonData("ActivitySummary", period1, period2, "<% = Session["FitbitUserId1"] %>");

            dSource.one("change", function () {
                if (container == "#Steps_Detailed") {
                    var _data = dSource.data();
                    ShowSummary("Steps_Figures", _data, "steps");

                    $("#Steps_Data").kendoGrid({
                        dataSource: {
                            data: AddGoalsToGrid("Steps", _data)
                        },
                        sortable: true,
                        columns: [{
                            field: "createddate",
                            title: "Date",
                            type: "date",
                            format: "{0:MM/dd/yyyy}"
                        },
                        {
                            field: "steps",
                            title: "Steps",
                            format: "{0:n0}",
                            attributes: { style: "text-align:right;" }
                        },
                        {
                            field: "goal",
                            title: "Goal",
                            format: "{0:n0}",
                            attributes: { style: "text-align:right;" }
                        },
                        {
                            field: "percentage",
                            title: "Percentage",
                            format: "{0:n2}%",
                            attributes: { style: "text-align:right;" }
                        }]
                    });
                }
                dSource.data(MergeSeriesData(dSource.data(), GetEndPoints("activity", period1, period2)));

                var chart = $("#Steps_Detailed").data("kendoChart");
                if (chart) { chart.redraw(); }

            });

            $(container).kendoChart({

                dataBound: chart_dataBound,                

                dataSource: dSource,
                seriesColors: ["SteelBlue"],
                chartArea: {
                    background: ""
                },
                title: {
                    text: title,
                    font: "14px Arial,Helvetica,sans-serif bold",
                    color: "SteelBlue"
                },
                legend: {
                    visible: false,
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "column",
                    gap: .5,
                    overlay: {
                        gradient: "none"
                    }
                },
                series: [{
                    name: "steps",
                    field: "steps",
                    categoryField: "createddate",
                    aggregate: "sum",
                    color: GetColor,
                    tooltip:
                        {
                            visible: true,
                            template: GetToolTip
                        }
                }],
                categoryAxis: {
                    type: "date",
                    baseUnit: getBaseUnit(),
                    labels: {
                        rotation: -45,
                        dateFormats: {
                            days: getDateFormat(),
                            weeks: getDateFormat(),
                            years: getDateFormat()
                        },
                        step: getSteps()
                    },
                    majorGridLines: {
                        visible: false
                    },
                    majorTicks: {
                        visible: false
                    }
                },
                valueAxis: {
                    majorGridLines: {
                        visible: true
                    },
                    line: {
                        visible: false
                    },

                    labels: {
                        template: "#= kendo.format('{0}',value/1000)#K"
                    }
                },             

            });
        }

我试过了

 requestStart: function () {
                    kendo.ui.progress($("#loading"), true);
                },
                requestEnd: function () {
                    kendo.ui.progress($("#loading"), false);

                }

但这并没有什么区别...

Answer 1

首先要做的事情；如果您希望 UI 保持响应能力，则必须异步加载图表。然后你必须找到一种方法来管理这些异步函数。为此，我强烈推荐jquery的deferred。

一旦您实现了每个图表初始化函数的延迟，您就必须更新进度条。为此，您必须使用通知系统(使用 jquery deferred，您可以使用通知/进度)根据图表数量(nbRendred/nbTotal)更新进度栏。

Kendo 有一个进度条小部件，但与每个 UI 组件一样，如果您将它与从主线程调用的同步函数一起使用，它不会很好地工作。