加载其他数据后加载仪表板图

Question

我有一个仪表板，其中已经使用Chartsjs插件图形显示了多个报告，但是我面临的问题是加载仪表板页面需要花费大量时间，我正在调用php函数来加载图形数据。 现在我想要的是首先要加载静态html数据，即显示页面，然后在运行时将显示图形数据内容功能，进度条将显示 共享图像

在此图像中您可以看到我访问了一个URL，该页面已加载，但内容仍在后台加载

在相同情况下，我希望仪表板也为每个图形函数显示进度条之后也加载html静态内容

我尝试使用这些功能，但没有成功

jQuery(window).bind("load", function () {

});

这是我的jquery图形代码

var Dashboard = function() {
    var e = function(e, t, a, r) {
            if (0 != e.length) {

            }
        },
    return {
        init: function() {
            var a, r;
            function() {
                    if (0 != $("#m_chart_sales_stats").length) {
                        var e = {
                            type: "line",
                            data: {
                                labels: ['June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December',
                'January',
                'February',
                'March',
                'April',
                'May'],
                                datasets: [{
                                    label: "Redemptions",
                                    borderColor: mApp.getColor("brand"),
                                    borderWidth: 3,
                                    pointBackgroundColor: mApp.getColor("brand"),
                                    backgroundColor: mApp.getColor("accent"),
                                    pointHoverBackgroundColor: mApp.getColor("danger"),
                                    pointHoverBorderColor: Chart.helpers.color(mApp.getColor("danger")).alpha(.2).rgbString(),
                                    data: <?php echo $this->dashboard_model->redemptionsMonthlyMerchant();?>           }]
                            },
                            options: {
                                title: {
                                    display: !1
                                },
                                tooltips: {
                                    intersect: !1,
                                    mode: "nearest",
                                    xPadding: 10,
                                    yPadding: 10,
                                    caretPadding: 10
                                },
                                legend: {
                                    display: !1,
                                    labels: {
                                        usePointStyle: !1
                                    }
                                },
                                responsive: !0,
                                maintainAspectRatio: !1,
                                hover: {
                                    mode: "index"
                                },
                                scales: {
                                    xAxes: [{
                                        display: !1,
                                        gridLines: !1,
                                        scaleLabel: {
                                            display: !0,
                                            labelString: "Month"
                                        }
                                    }],
                                    yAxes: [{
                                        display: !1,
                                        gridLines: !1,
                                        scaleLabel: {
                                            display: !0,
                                            labelString: "Value"
                                        }
                                    }]
                                },
                                elements: {
                                    point: {
                                        radius: 3,
                                        borderWidth: 0,
                                        hoverRadius: 8,
                                        hoverBorderWidth: 2
                                    }
                                }
                            }
                        };
                        new Chart($("#m_chart_sales_stats"), e)
                    }
                }()
        }
    }
}();


jQuery(document).ready(function() {
    Dashboard.init();

});

我正在使用codeigniter来获取动态数据。