Javascript弹出窗口中的图表

如何在弹出窗口中显示图表？我使用的是Leaflet JS，它支持raphael插件http://dynmeth.github.com/RaphaelLayer/。是否可以在弹出窗口中创建div？我在考虑http://softwarebyjosh.com/raphy-charts/

如果使用Leaflet无法实现，那么我只能使用Raphael地图解决方案。

谢谢

我想有可能。我在Leaflet的主页上看到以下示例：

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.').openPopup();

因此，您可以将标记添加为内容。请参见上面的br标签。

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <div class="popup_custom_div"></div> Easily customizable.').openPopup();
//retrieve the div by class name take care if more then one maybe opened
var mydiv = document.getElementsByClassName( 'popup_custom_div' )[0];
mydiv.innerHTML = 'I am here';

@cavila的答案只是解决方案的一部分。您可以将图表的div标签放在弹出窗口中，但随后会出现问题，因为您需要侦听“ .openPopup（）”事件，然后执行raphy-carts javascript。如果您未在该事件上执行此操作，则在执行该事件时将找不到div标记，因为尚未将其插入DOM。传单似乎支持事件侦听，因此您需要在上面的代码中添加以下内容：

map.on('popup', function(e) {
    //Run the chart code here like this
    var chart = new Charts.LineChart('chart1');
     chart.add_line({
        data: [[1, 828906, {tooltip: "my special point"}],[2, 566933],[3, 584150],[4,  
                 1072143],[5, 1622455],[6, 2466746],[7, 2427789]]
        });

     chart.draw();
});

一种方法是侦听制造商的点击事件并即时创建图表。这是一个示例：http : //jsfiddle.net/6UJQ4/

在我开始玩之前，对我尚不清楚的一件事是Leaflet的bindPopup可以接受字符串或 DOM节点。上面的示例创建一个DOM节点，将其传递给bindPopup然后创建图表。