向传单弹出窗口添加高图答案

【问题标题】：Adding a highchart to a Leaflet Popup向传单弹出窗口添加高图
【发布时间】：2016-03-05 01:02:03
【问题描述】：

我目前正在开展一个项目，我创建的地图显示 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]]
        }]
      });
    }

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

参考信息链接：
http://leafletjs.com/reference.html
http://www.highcharts.com/docs

【问题讨论】：

您可能会发现this 很有帮助。如果您将i 的值存储为_arrayIndex，例如addMarker 函数中的每个标记，您可以在onPopUpOpen 函数中使用e.popup._source._arrayIndex 引用该值。

标签： javascript jquery highcharts leaflet

【解决方案1】：

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

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 电话。它不仅被弃用，而且会导致糟糕的用户体验，在这里完全没有必要。

Complete code sample is runnable here.

【讨论】：