将高图表添加到传单弹出窗口

Adding a highchart to a Leaflet Popup

本文关键字：单弹出 窗口 高图表 添加      更新时间：2023-09-26

我目前正在从事一个项目，其中我创建的地图显示了akdatagateway跟踪的所有社区，当单击标记时，会打开一个弹出窗口，显示人口随时间变化的高图表字符以及其他一些数据。我已经得到了所有要显示的标记，并且能够通过网站的API获取所需的数据。问题在于在弹出窗口中生成高图表。我不知道如何将数组传入或获取到 onPopupOpen（） 以进行后续函数调用。

敬畏的功能： 

  function addMarker(array){
            for (i in array){
                var communityData = array[i] 
                L.marker([array[i].latitude,array[i].longitude], {bounceOnAdd: true, bounceOnAddOptions: {duration: 250, height: 50}}).addTo(map).on('popupopen', onPopUpOpen)
                .bindPopup('<p style="font-size:130%;"><b>'+ array[i].name +'</b></p><div id="container" style="min-width: 300px; height: 200px; margin: 0 auto"></div><p><br />PCE for Electricity: ' + pcePrice + '<br />EIA for Electricity: ' + eiaPrice + '</p>').addTo(community);
            }
        }
  function getPopulationData(array){
        var id = array.id
        var years = ""
        var populations = ""
        var populationData = []
        var community_pop = $.ajax({type: "GET", url: "/api/models/population/?community=" + id  +"", async: false}).responseText
        community_pop = JSON.parse(community_pop)
        community_pop = community_pop.results
        for ( i = 0; i < community_pop.length; i++){
            years += "'" + community_pop[i].year + "',";
            populations += community_pop[i].total_population +",";
        }
        populationData[0] = years
        populationData[1] = populations
        return populationData;
    }
    function onPopUpOpen (e) {
        //some code to get the community id from popup to use the function.
        // getPopulationData()
        $('#container').highcharts({
        chart: {
            type: 'line'
        },
        title: {
          text: 'Population Over Time'
        },
        subtitle: {
          text: 'Source: AEDG'
        },
        xAxis: {
          categories: [popData[0]]
        },
        yAxis: {
          title: {
            text: 'Population'
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: false
            },
            enableMouseTracking: true
          }
        },
        series: [{
          name: '',
          data: [popData[1]]
        }]
      });
    }

我已经在 Community 数组的元素上测试了函数，它们确实产生了正确的数据，我只是不知道如何在弹出窗口中调用它们从而生成 highchart。任何评论都值得赞赏！

参考信息链接：

http://leafletjs.com/reference.htmlhttp://www.highcharts.com/docs

看起来您的代码应该可以工作，因此如果没有完整的可重现示例，则很难进行故障排除。因此，我将提供一个工作示例：

var popup = L.popup().setContent('<p style="font-size:130%;"><b>Some Name</b></p><div id="container" style="min-width: 300px; height: 200px; margin: 0 auto">Loading...</div>');
L.circle([51.49, -0.09], 500, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5
}).addTo(map).bindPopup(popup);

map.on('popupopen', function(e) {
  $.ajax({
      type: "GET",
      url: "data.json"
    })
    .done(function(data) {
      $('#container').highcharts({
        chart: {height: 175, width: 295},
        title: {text: ''},
        series: data
      });
    });
});
map.on('popupclose', function(e){
  $('#container').html("Loading...");
});

另外，我警告你不要打async: false电话。 它不仅被弃用，而且可能会导致糟糕的用户体验，在这里完全没有必要。

可在此处运行完整的代码示例。

相关文章：