在传单弹出窗口中添加图表 [英] Adding a highchart to a Leaflet Popup

问题描述

我目前正在一个项目中，在该项目中，我创建的地图将显示akdatagateway跟踪的所有社区，并且当单击标记时，将打开一个弹出窗口，显示一段时间内char的高位图表以及一些其他数据.我已经显示了所有标记，并且能够通过网站的API获得所需的数据.问题在于在弹出窗口中生成高位图.我无法弄清楚如何传入或获取数组到onPopupOpen()来进行后续的函数调用.

I'm currently working on a project where the map I create displays all communities the akdatagateway tracks and when a marker is clicked a popup opens displaying a highchart of the population over time char along with some other data. I've gotten all markers to display and was able to get the desired data through the website's API. The problem lies in the generating the highchart in the popup. I cant figure out how to pass in or get the array to the onPopupOpen() to make the subsequent function calls.

重要功能:

Reverent Functions:

  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数组的元素上的功能，它们确实产生了正确的数据，只是我不知道如何在弹出窗口中调用它们并因此生成高位图表.任何评论表示赞赏！

I've tested the functions on elements of the Community array and they do produce the correct data I just can't figure out how to make call them on the pop up and thus generate the highchart. Any commentary is appreciated!

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

推荐答案

看起来您的代码应该可以正常工作，因此，如果没有完整的可复制示例，很难进行故障排除.因此，我将提供一个工作示例:

It looks like your code should work, so without a full reproducible example, it's tough to troubleshoot. So, instead I'll offer a working example:

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 调用.不但弃用了它，而且还可能导致糟糕的用户体验，在这里完全没有必要.

Also, I'd warn you not to make async: false calls. Not only is it deprecated, but it can make for a poor user experience and it's totally unnecessary here.

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

这篇关于在传单弹出窗口中添加图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！