Question

我可以将静态html代码添加到Leaflet弹出窗口，但无法将Dygraph图表加载到弹出窗口中。这是一个简单的jsfiddle图形和地图。 https://jsfiddle.net/scottgeowork/pybvvo27/1/ HTML代码

<p>graph</p>
<div id="graphdiv" style="width:200px; height:100px;"></div>
<p>map</p>
<div id="mapid"></div>

css代码

#mapid { width: 400px; height: 300px; }

的javascript

//graph code
gSimple = new Dygraph(
    // containing div
    document.getElementById("graphdiv"),
    // CSV or path to a CSV file.
    //"Date,Depth\n" +
    "2014-06-12,-10.57\n" +  "2014-06-13,-10.74\n" +  "2014-06-14,-11.57\n" +  "2014-06-15,-11.74\n" +    "2014-06-24,-16.86\n",
    {
        //valueRange: [-180,-179],
      showRangeSelector : false,
      period      : "p6d", // past 1000 days
      date_window : 2,       
        labels: ['Date', 'Value']
    }
  );

//map code
var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 10,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    var marker = L.marker([51.5, -0.09]).addTo(mymap);
  var popupStatic = '<p style="height:200px; width:200px">static content</p>';
    var popupDynamic = '<div id="graphdiv" style="width:200px; height:100px;"></div>';

    marker.bindPopup(popupStatic);
  //marker.bindPopup(popupDynamic);

Leaflet弹出窗口中的Dygraph

0 个答案: