Leaflet use popup not display

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