Grafico all'interno della finestra pop-up in Javascript

10

Come mostrare un grafico nella finestra pop-up? Sto usando Leaflet JS, che ha il supporto per il plugin raphael http://dynmeth.github.com/RaphaelLayer/ . È possibile creare un div all'interno della finestra popup? Stavo pensando a http://softwarebyjosh.com/raphy-charts/

Se non è possibile con Leaflet, sono aperto solo alla soluzione cartografica di Raffaello.

Grazie

javascript web-mapping leaflet

— againstflow
fonte

1

Immagino sia possibile. Vedo questo esempio nella home page di 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();

Quindi puoi aggiungere markup come contenuto. Vedi il tag br sopra.

// 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
fonte

2

La risposta di @cavila è solo una parte della soluzione. È possibile inserire il tag div per il grafico nel popup, ma il problema sorge quindi perché sarà necessario ascoltare l'evento ".openPopup ()" per far eseguire il javascript raphy-carts. Se non lo fai su quell'evento, quando verrà eseguito non troverà il tag div perché non è stato inserito nel DOM. Sembra che il volantino supporti l'ascolto di eventi, quindi dovrai aggiungere qualcosa del genere al codice sopra:

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
fonte

Quindi openPopup () è asincrono? Poiché l'interprete Javascript non eseguirà l'istruzione successiva fino al ritorno precedente, ad eccezione dei callback eseguiti in un secondo momento. Un'alternativa se nessun evento eseguirà il pooling per l'esistenza di quel "div" in un ciclo window.setTimeout. Il callback dell'evento sarebbe molto più veloce.

— cavila,

1

Un modo sarebbe quello di ascoltare gli eventi click sui tuoi produttori e creare le classifiche al volo. Ecco un esempio: http://jsfiddle.net/6UJQ4/

Una cosa che non mi era chiara fino a quando non ho iniziato a giocare è che bindPopup di Leaflet può prendere una stringa o un nodo DOM. L'esempio sopra crea un nodo DOM, lo passa a bindPopup e quindi crea il grafico.

— Derek Swingley
fonte

È possibile per eventi poligonali? Quando si fa clic su un poligono, viene visualizzato un popup simile?

— Counterflow

Sì, dovrebbe essere possibile. Il mio esempio è hardcoded per usare 50 come valore per il grafico ma potresti fare tutto ciò che ti piace all'interno della funzione che crea il grafico.

— Derek Swingley,

Puoi per favore scrivere un esempio con poligoni o dati geojson su jsfiddle in questo modo con marcatori? Gradirei così tanto.

— Counterflow