Javascript 第二个弹出窗口表示Highchart不适用于传单
我有传单多边形地图，在那里我计划提供一个弹出式的Highchart表示多边形信息。我面临的问题是，当我单击多边形时，我会使用Highchart弹出一个窗口，但是，如果我单击另一个多边形而不关闭第一个窗口，则会出现一个空窗口（但是如果我关闭第一个窗口并单击另一个多边形，则弹出窗口的格式正确）。唯一的问题是单击另一个多边形而不关闭第一个弹出窗口，第二个弹出窗口结果为空。下面是JavaScript。任何建议都将不胜感激。提前谢谢Javascript 第二个弹出窗口表示Highchart不适用于传单,javascript,jquery,highcharts,leaflet,kendo-dataviz,Javascript,Jquery,Highcharts,Leaflet,Kendo Dataviz,我有传单多边形地图，在那里我计划提供一个弹出式的Highchart表示多边形信息。我面临的问题是，当我单击多边形时，我会使用Highchart弹出一个窗口，但是，如果我单击另一个多边形而不关闭第一个窗口，则会出现一个空窗口（但是如果我关闭第一个窗口并单击另一个多边形，则弹出窗口的格式正确）。唯一的问题是单击另一个多边形而不关闭第一个弹出窗口，第二个弹出窗口结果为空。下面是JavaScript。任何建议都将不胜感激。提前谢谢 $.getJSON('data/Stat_data.json', fun
$.getJSON('data/Stat_data.json', function(dt) {
var geojson,
activeLayer;
$(document).ready(function() {
var map = new L.Map('map-holder', {
center: new L.LatLng(53.3498, -7.2603),
zoom: 6.6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 5,
maxZoom: 15,
noWrap: true,
attribution: 'Data: CSO.ie | Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);
$.getJSON('data/County.geojson', function(data) {
geojson = L.geoJSON(data, {
////////////////////////////////
//// Step 1 - look of the layer
////////////////////////////////
style: function(feature) {
return {
color: '#fff',
weight: 1,
// fillColor: '#FED976',
fillOpacity: 0.6,
fillColor: '#800026'
}
},
////////////////////////////////
//// Step 2 - interaction
////////////////////////////////
onEachFeature: onEachFeature
}).addTo(map);
});
function highlightLayer(e) {
var layer = e.target;
activeLayer = layer;
layer.setStyle({
color: '#fff',
fillColor: '#31a354'
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
function data_pre_process(data) {
var ind = [];
for (var i in dt) {
if (dt[i]['Province County or City'].toLowerCase() === data.toLowerCase()) {
ind.push(dt[i])
}
}
return ind
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightLayer,
mouseout: resetHighlight
})
// console.log(feature.properties.COUNTY.toLowerCase());
//layer.unbindPopup()
var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
layer.bindPopup(div);
layer.on('popupopen', function(e) {
var pop_2011 = []
var pop_2016 = []
var county = e['sourceTarget']['feature']['properties']['COUNTY'].toLowerCase()
data = data_pre_process(county)
for (var i in data) {
if (data[i]['Sex'] === "Both sexes") {
pop_2011[0] = data[i]['Population 2011 (Number)'];
pop_2016[0] = data[i]['Population 2016 (Number)'];
} else if (data[i]['Sex'] === "Female") {
pop_2011[1] = data[i]['Population 2011 (Number)'];
pop_2016[1] = data[i]['Population 2016 (Number)'];
} else {
pop_2011[2] = data[i]['Population 2011 (Number)'];
pop_2016[2] = data[i]['Population 2016 (Number)'];
}
}
Highcharts.chart('popupcontainer', {
chart: {
type: 'column',
inverted: true
},
title: {
text: 'Census, Population in ' + (county[0].toUpperCase() + county.slice(1))
},
xAxis: {
categories: ['2016', '2011']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Population'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Female',
data: [pop_2016[1], pop_2011[1]]
}, {
name: 'Male',
data: [pop_2016[2], pop_2011[2]]
}]
});
});
};
});
});
$.getJSON（'data/Stat_data.json'，函数（dt）{
var geojson，
活性层；
$（文档）.ready（函数（）{
var map=新的L.map（'地图持有者'{
中心：新拉特林（53.3498，-7.2603），
缩放：6.6
});
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
minZoom:5，
最大缩放：15，
诺拉普：没错，
属性：“数据：CSO.ie | Tiles由&mdash；地图数据&mdash；贡献者提供，”
}).addTo（地图）；
$.getJSON（'data/County.geojson'，函数（数据）{
geojson=L.geojson（数据{
////////////////////////////////
////步骤1-图层外观
////////////////////////////////
风格：功能（特征）{
返回{
颜色：“#fff”，
体重：1，
//fillColor:“#FED976”，
填充不透明度：0.6，
填充颜色：“#800026”
}
},
////////////////////////////////
////第2步-互动
////////////////////////////////
onEachFeature:onEachFeature
}).addTo（地图）；
});
功能高亮层（e）{
var层=e.目标；
活动层=层；
layer.setStyle({
颜色：“#fff”，
填充颜色：“#31a354”
});
如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{
层。布氏体（）；
}
}
功能重置突出显示（e）{
geojson.resetStyle（e.target）；
}
功能数据预处理（数据）{
var ind=[]；
用于（dt中的var i）{
if（dt[i]['省、县或市].toLowerCase（）==data.toLowerCase（））{
独立推力（dt[i]）
}
}
返回ind
}
功能onEachFeature（功能，图层）{
分层({
鼠标盖：highlightLayer，
mouseout:resetHighlight
})
//console.log（feature.properties.country.toLowerCase（））；
//layer.unbindpoop（）
var div=L.popup（）.setContent（'Loading…'）；
层绑定弹出窗口（div）；
层上（'popupopen'，函数（e）{
var pop_2011=[]
var pop_2016=[]
var county=e['sourceTarget']['feature']['properties']['county'].toLowerCase（）
数据=数据预处理（县）
用于（数据中的var i）{
if（数据[i]['Sex']==“两性”）{
pop_2011[0]=数据[i][“2011年人口（数量）”；
pop_2016[0]=数据[i][“2016年人口（数量）”；
}else if（数据[i]['Sex']==“女性”）{
pop_2011[1]=数据[i][“2011年人口（数量）”；
pop_2016[1]=数据[i][“2016年人口（数量）”；
}否则{
pop_2011[2]=数据[i][“2011年人口（数量）”；
pop_2016[2]=数据[i][“2016年人口（数量）”；
}
}
Highcharts.chart（'popupcontainer'{
图表：{
键入：“列”，
倒过来：是的
},
标题：{
文本：“+（县[0].toUpperCase（）+县.slice（1））中的人口普查、人口”
},
xAxis：{
类别：[‘2016’、‘2011’]
},
亚克斯：{
allowDecimals:false，
分:0,，
标题：{
正文：“人口”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.x+”
+
this.series.name+'：'+this.y+'
+
“总计：”+this.point.stackTotal；
}
},
打印选项：{
专栏：{
堆叠：“正常”
}
},
系列：[{
姓名：'女'，
数据：[pop_2016[1]，pop_2011[1]]
}, {
姓名：'男'，
数据：[pop_2016[2]，pop_2011[2]]
}]
});
});
};
});
});
divHighcharts.chartid var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
layer.bindPopup(div);
var div=L.popup（）.setContent（'Loading…'）；
层绑定弹出窗口（div）；