Diagramm im Popup-Fenster in Javascript

Antworten:

1

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';
Cavila
quelle
2

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();
});
Jamie
quelle
OpenPopup () ist also asynchron? Weil der Javascript-Interpreter die nächste Anweisung erst bei der vorherigen Rückgabe ausführt, außer bei Rückrufen, die später ausgeführt werden. Eine Alternative, wenn kein Ereignis das Pooling für das Vorhandensein dieses "div" in einer window.setTimeout-Schleife ausführen würde. Der Ereignisrückruf wäre viel schneller.
Cavila
1

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.

Derek Swingley
quelle
Ist das für Polygonereignisse möglich? Wenn Sie auf ein Polygon klicken, wird ein ähnliches Popup angezeigt.
Gegenstrom
Ja, sollte möglich sein. Mein Beispiel ist fest codiert, um 50 als Wert für das Diagramm zu verwenden, aber Sie können innerhalb der Funktion, mit der das Diagramm erstellt wird, alles tun, was Sie möchten.
Derek Swingley
Können Sie bitte ein Beispiel mit Polygonen oder Geojson-Daten auf jsfiddle wie diesem mit Markern schreiben? Ich würde mich sehr freuen.
Gegenstrom