Leaflet use popup not display - highcharts

Question

I use highchart chart to present in popup.
It can be presented when the marker is clicked for the first time.
But opening another popup cannot display the chart.
If I close the original one and open a new one, it can be displayed.
What is the problem?
Turn on for the first time
When opening another
Code:
function onEachFeature(feature, layer) {
var popupContent = '<p style="font-size:130%;">' + feature.properties.id + "<br>PM2.5: " + air + '</p><div class="d-flex"> <button class="day-button">24 hr</button> <button class="week-button">7 Days</button> <button class="mon-button ">30 Days</button></div>' + '</p><div id="container" style="min-width: 350px; height: 190px; margin: 0 auto"></div> <p> ';
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent, { minWidth: 370 }).on("popupopen", function(e) {
var id1 = feature.properties.id;
Highcharts.setOptions({ global: { useUTC: false } });
var chart = null;
test(id1);
}
}
Highchart:
function test (station){
var ob = [];
var json_hour ="data.csv";
var count_nul = 0;
d3.csv(json_hour, function (error, result) {
function date_to_epoch(key) {
var epoch_seconds = new Date(key).getTime();
return Math.floor(epoch_seconds);
}
for (var i = 0; i < result.length; i++) {
var apoche = date_to_epoch(result[i]['date']).toString();
apoche = parseFloat(apoche);
if (parseFloat(result[i]['pm25']).toString() == 'NaN') {
count_nul++;
} else {
var miles = parseFloat(result[i]['pm25']);
}
ob.push([apoche, miles]);
}
if (count_nul >= 24) {
$("#con").text("no data");
}
else {
$("#con").empty();
console.log((ob));
new Highcharts.Chart({
chart: {
renderTo: 'con',
type: 'line'
},
title: { text: '' },
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
day: '%Y<br/>%m%d',
week: '%Y<br/>%m-%d',
month: '%Y<br/>%m',
year: '%Y'
}
, crosshair: true,
},
tooltip: {
split: false,
shared: true,
animation: true,
xDateFormat: '%Y-%m-%d %H:%M',
valueSuffix: ' µm'
},
series: [{
name: "PM2.5",
data: ob,
showInLegend: true
}
],
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
line: {
connectNulls: true,
}
},
responsive: {
rules: [{
condition: {
maxWidth: 330
},
}]
}
});
}
});
}

Answer 1

Change your code to:
function onEachFeature(feature, layer) {
var popupContent = '<p style="font-size:130%;">' + feature.properties.id + "<br>PM2.5: " + air + '</p><div class="d-flex"> <button class="day-button">24 hr</button> <button class="week-button">7 Days</button> <button class="mon-button ">30 Days</button></div>' + '</p><div id="container" style="min-width: 350px; height: 190px; margin: 0 auto"></div> <p> ';
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent, { minWidth: 370 }).on("popupopen", function(e) {
var id1 = e.popup._source.feature.properties.id;
Highcharts.setOptions({ global: { useUTC: false } });
var chart = null;
test(id1);
}
}
With e.popup._source.feature.properties.id you are sure that the id is from the current open layer