Question

我的仪表板中有近32个图表图块，300像素正方形。我在每个人中都显示图表。我正在使用REST Apis以JSON格式将数据提取到这些图表中。

在document.ready（）函数中，我调用函数来填充图表。但最初用户界面将为空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。

为每个图表初始化功能实施延期后，您必须更新进度条。为此，您必须使用通知系统（使用延迟jquery，您可以使用notify / progress）根据图表数量（nbRendred / nbTotal）更新进度条。

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

加载Kendo UI的指标？

1 个答案: