Gráfico dentro de la ventana emergente en Javascript

10

¿Cómo mostrar un gráfico dentro de una ventana emergente? Estoy usando Leaflet JS, que tiene soporte para el complemento raphael http://dynmeth.github.com/RaphaelLayer/ . ¿Es posible crear un div dentro de una ventana emergente? Estaba pensando en http://softwarebyjosh.com/raphy-charts/

Si no es posible con Leaflet, estoy abierto solo a la solución de mapa Raphael.

Gracias

javascript web-mapping leaflet

— contraflujo
fuente

1

Supongo que es posible. Veo este ejemplo en la página de inicio de 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();

Para que pueda agregar marcado como contenido. Vea la etiqueta br arriba.

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

2

La respuesta de @cavila es solo una parte de la solución. Puede colocar la etiqueta div para el gráfico en la ventana emergente, pero el problema surge porque necesitará escuchar el evento ".openPopup ()" para que se ejecute el javascript de raphy-carts. Si no lo hace en ese evento, cuando se ejecute no encontrará la etiqueta div porque no se ha insertado en el DOM. Parece que el folleto admite la escucha de eventos, por lo que deberá agregar algo como esto al código anterior:

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
fuente

Entonces, ¿openPopup () es asíncrono? Debido a que el intérprete de Javascript no ejecutará la siguiente declaración hasta la devolución anterior, excepto para las devoluciones de llamada que se ejecutan más adelante. Una alternativa si no se ejecutara ningún evento agrupando la existencia de ese "div" en un bucle window.setTimeout. La devolución de llamada del evento sería mucho más rápida.

— cavila

1

Una forma sería escuchar los eventos de clic en sus creadores y crear los gráficos sobre la marcha. Aquí hay un ejemplo: http://jsfiddle.net/6UJQ4/

Una cosa que no estaba clara para mí hasta que comencé a jugar es que bindPopup de Leaflet puede tomar una cadena o un nodo DOM. El ejemplo anterior crea un nodo DOM, lo pasa a bindPopup y luego crea el gráfico.

— Derek Swingley
fuente

¿Es eso posible para los eventos poligonales? Cuando se hace clic en algún polígono, aparece una ventana emergente similar.

— contraflujo

Sí, debería ser posible. Mi ejemplo está codificado para usar 50 como valor para el gráfico, pero podría hacer lo que quiera dentro de la función que crea el gráfico.

— Derek Swingley

¿Puede escribir un ejemplo con polígonos o datos de geojson en jsfiddle como este con marcadores? Agradecería mucho

— contraflujo