Diagramm im Popup-Fenster in Javascript

Wie zeige ich ein Diagramm im Popup-Fenster? Ich verwende Leaflet JS, das das Raphael-Plugin http://dynmeth.github.com/RaphaelLayer/ unterstützt . Ist es möglich, ein Div im Popup-Fenster zu erstellen? Ich habe über http://softwarebyjosh.com/raphy-charts/ nachgedacht.

Wenn es mit Leaflet nicht möglich ist, bin ich nur für die Raphael-Kartenlösung geöffnet.

Vielen Dank

Ich denke es ist möglich. Ich sehe dieses Beispiel auf der Homepage von 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();

So können Sie Markup als Inhalt hinzufügen. Siehe das br-Tag oben.

// 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';

Die Antwort von @cavila ist nur ein Teil der Lösung. Sie können das div-Tag für das Diagramm in das Popup einfügen, aber das Problem tritt dann auf, weil Sie das Ereignis ".openPopup ()" abhören müssen, damit das Raphy-Carts-Javascript ausgeführt wird. Wenn Sie dies bei diesem Ereignis nicht tun, wird das div-Tag bei der Ausführung nicht gefunden, da es nicht in das DOM eingefügt wurde. Es sieht so aus, als ob die Broschüre das Abhören von Ereignissen unterstützt, daher müssen Sie dem obigen Code Folgendes hinzufügen:

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();
});

Eine Möglichkeit wäre, auf Klickereignisse Ihrer Macher zu warten und die Diagramme im laufenden Betrieb zu erstellen. Hier ist ein Beispiel: http://jsfiddle.net/6UJQ4/

Eine Sache, die mir nicht klar war, bis ich anfing herumzuspielen , ist, dass Leaflets bindPopup eine Zeichenfolge oder einen DOM-Knoten aufnehmen kann. Im obigen Beispiel wird ein DOM-Knoten erstellt, an bindPopup übergeben und anschließend das Diagramm erstellt.