Диаграмма Диаграмма JS не отображается во всплывающем окне ArcGIS при использовании стрелок навигации - PullRequest
Новая
       62

Диаграмма Диаграмма JS не отображается во всплывающем окне ArcGIS при использовании стрелок навигации

0 голосов
/ 28 ноября 2018

Я ставлю график во всплывающих окнах моих очков.При первом щелчке всплывающие окна отображают диаграмму, и, если я использую стрелку прямого перемещения во всплывающем окне, отображается следующая диаграмма.Однако, если я использую стрелку назад, диаграмма не будет отображаться сноваМетод, который генерирует графики, похоже, не срабатывает во второй раз.Любая помощь приветствуется.Мой код ниже.Всплывающее окно: 

            popupTemplate: {
            title: "{Location}",
            content: [{
                type: "text",
                text: "Sample Location: {Type} </br> Survey: {Survey} </br> {Location:getSurveyInfo} <div id='chartDiv'><canvas id='chartArea{Location}'>{Location:createChart}</canvas></div>"
            },
            {
                type: "attachments"
            }]
        }

Диаграмма: 

    createChart = function (location) {
    var date = new Date();
    var chartArea = "chartArea" + location;
    var sub = location.substring(0, 2);

    getData(date.getFullYear(), [[location]], function (data) {
        var maxScale = Math.max(...data[0].tData);
        var colors = [["#34eb58", "#0000ff"]];
        var chartData = buildChartData(name, maxScale, data, colors, null);
        var ctx = document.getElementById(chartArea);
        var chart = new Chart(ctx, chartData);

    }, getChartDataError)



}

1 Ответ

0 голосов
/ 28 ноября 2018

Я думаю, что вы не должны использовать тип текстового содержимого для всплывающего шаблона.Использование функции, возвращающей HTML-элемент, было бы проще в вашем случае. 

    popupTemplate: {
        title: "{Location}",
        content: createPopup
    }

здесь вы создадите свой popupElement и вставите в него диаграмму: 

function createPopup(graphic) {
    try {
        var location = graphic.getAttribute("Location");
        var popupElement = document.createElement("div");
        popupElement.innerHTML = "Sample Location: " + graphic.getAttribute("Type") + "</br> Survey: " + graphic.getAttribute("Survey") + "</br>" + getSurveyInfo(location) + "<div class='chartDiv'></div>"
        var date = new Date();
        var sub = location.substring(0, 2);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        getData(date.getFullYear(), [[location]], function(data) {
            var maxScale = Math.max(...data[0].tData);
            var colors = [["#34eb58", "#0000ff"]];
            var chartData = buildChartData(name, maxScale, data, colors, null);
            var chart = new Chart(ctx, chartData);
         }, getChartDataError);

         popupElement.querySelector(".chartDiv").appendChild(canvas);
         return popupElement;
    } catch(error) {
        console.error(error)
    }
}

См. Рабочую демонстрацию: http://jsfiddle.net/bspa906m/3/

...