我在要点的弹出窗口中放置了一个图表。首次单击时,弹出窗口将显示图表,如果我在弹出窗口上使用前向导航箭头,则会呈现下一个图表。但是,如果我使用后退箭头,该图表将不会再次呈现。生成图表的方法似乎没有第二次触发。任何帮助表示赞赏。我的代码如下。弹出窗口:
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)
}
答案 0 :(得分:0)
我认为您不应将文本内容类型用于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)
}
}