подождите, пока графики Кендо будут полностью нарисованы - PullRequest
Новая
       6

подождите, пока графики Кендо будут полностью нарисованы

0 голосов
/ 11 октября 2018

У меня есть много диаграмм Кендо, нарисованных на странице (каждая диаграмма является частичным представлением).Когда все они полностью отрисованы, мне нужно создать из них изображения и записать данные изображения в базу данных.Хотя все диаграммы записаны в базу данных, некоторые из них не имеют данных, только оси и условные обозначения и т. Д.

Изначально я использовал onRender до getKendoChart, но теперь понимаю, что это означает готов к визуализации .Вместо этого я просто использую onRender для сбора идентификаторов для диаграмм. 

function onRender(e) {      // "Fired when the chart is ready to render on screen."
    var elementId = e.sender.element[0].id;
    // e.g. chartTargetPrice43
    var id = elementId.substring("chartTargetPrice".length); // 43

    renderedCharts.push({ id: id }); //, chart: $('#' + elementId).getKendoChart() });

    renderedTotal += 1;
}

Затем я опрашиваю с интервалом в 2 секунды, чтобы дождаться, пока все идентификаторы не будут собраны.Затем я соберу данные изображений для всех графиков и использую exportImage, чтобы сохранить их в базе данных.Полная функция приведена ниже для справки.

Как проверить, что диаграмма полностью отрисована, без необходимости произвольных задержек с setTimeout s? 

function exportRenderedCompany(idArray) {
    // idArray is an array, but could just have one element

    var countRequests = idArray.length;

    while (idArray.length > 0) {
        var id = idArray.shift();

        // renderedCharts.find(x => x.id == id)... IE11 does not recognise 'find', so
        var foundChart;

        for (var i = 0; i < renderedCharts.length; i++) {
            if (renderedCharts[i].id == id) {
                //foundChart = renderedCharts[i].chart;
                foundChart = $('#chartTargetPrice' + id).getKendoChart();
                break;
            }
        }

        foundChart.exportImage({ width: 694, height: 250 }).done(function (data) {

            // split 'image/png,xxxyyy=' into two
            var dataParts = data.split(',', 2);
            // TODO: need to strip from 'data:image/png;base64'
            dataParts[0] = 'image/png';

            $.ajax({
                url: "@Url.Action("Export_TargetPrice", "Charts")",
                type: 'POST',
                data: { contentType : dataParts[0], base64 : dataParts[1], companyID: id }
            }).done(function () {
                countRequests--;
                if (countRequests <= 0) {
                    window.location.href = "@Url.Action("Recommendations","Charts", new { page = page + 1 })#autoOnRender";
                }
            });
        });
    }
}
...