Javascript 使用导航箭头时，图表JS图表未在ArcGIS弹出窗口中呈现

我在我的积分弹出窗口中放了一张图表。初次单击时，弹出窗口显示图表，如果我使用弹出窗口上的向前导航箭头，则下一个图表将呈现。但是，如果使用返回箭头，图表将不会再次渲染。生成图表的方法似乎不是第二次触发。感谢您的帮助。我的代码如下。弹出窗口：

            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"
            }]
        }

---

我认为您不应该为popuptemplate使用文本内容类型。在您的情况下，使用返回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)
    }
}

函数createPopup（图形）{
试一试{
var location=graphic.getAttribute（“位置”）；
var popupElement=document.createElement（“div”）；
popupElement.innerHTML=“示例位置：”+graphic.getAttribute（“类型”）+”
调查：“+graphic.getAttribute（“调查”）+”
“+getSurveyInfo（位置）+”
变量日期=新日期（）；
var sub=位置子串（0,2）；
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
getData（日期.getFullYear（），[[location]]，函数（数据）{
var maxScale=Math.max（…数据[0].tData）；
变量颜色=[“#34eb58”、“#0000ff”]；
var chartData=buildChartData（名称、最大刻度、数据、颜色、null）；
var图表=新图表（ctx，图表数据）；
}，getChartDataError）；
popupElement.querySelector（“.chartDiv”）.appendChild（画布）；
返回popupElement；
}捕获（错误）{
控制台错误（错误）
}
}

---

请参阅工作演示：

您使用的是什么版本的API？我使用的是4.7版本。它看起来是正确的。当你回击时，你会看到上一张图表还是根本没有图表？当我回击时，根本没有图表，如果我继续前进，图表就消失了。我必须点击“前进”按钮才能转到尚未渲染的图表，以使其显示。最后一件事是更改类的chartDiv id，可能它也需要是唯一的。那么，您能创建一个简单的JSFIDLE来重现这个问题吗？我认为在某一点上也是如此，并尝试在画布ID中添加一些独特的内容，结果保持不变。我尝试了你的代码，图表应该放在文本[object HtmlCanvaElement]的位置。好的，这是因为popuptemplate只需要文本。你可以编辑你的问题来添加你的独特的idI尝试，我可以看到它在JS小提琴工作，但不能让它在我的代码工作。弹出窗口显示在左上角被截断。请验证您是否正确使用了此行：

popupement.querySelector（“.chartDiv”）.appendChild（画布）我以前版本的答案中有错误。删除
[0]
即使这样，我仍然有同样的问题。
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)
    }
}