Загрузка графиков панели инструментов после загрузки других данных - PullRequest
0 голосов
/ 10 мая 2019

У меня есть панель управления, в которой несколько отчетов, которые я отображал, используя графики плагинов 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 для извлечения динамических данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...