Wykres w wyskakującym oknie w JavaScript

Jak wyświetlić wykres w wyskakującym oknie? Używam Leaflet JS, który obsługuje wtyczkę Rafaela http://dynmeth.github.com/RaphaelLayer/ . Czy można utworzyć div w wyskakującym oknie? Myślałem o http://softwarebyjosh.com/raphy-charts/

Jeśli nie jest to możliwe dzięki Ulotce, jestem otwarty tylko na rozwiązanie z mapą Raphaela.

Dzięki

Myślę, że to możliwe. Widzę ten przykład na stronie głównej Ulotki:

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

Możesz więc dodać znaczniki jako treść. Zobacz tag br powyżej.

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

Odpowiedź @cavila jest tylko częścią rozwiązania. Możesz umieścić tag div dla wykresu w wyskakującym okienku, ale problem pojawia się wtedy, ponieważ będziesz musiał odsłuchać zdarzenie „.openPopup ()”, aby następnie wykonać javascript raphy-carts. Jeśli nie zrobisz tego w tym zdarzeniu, to po uruchomieniu nie znajdzie znacznika div, ponieważ nie został wstawiony do DOM. Wygląda na to, że ulotka obsługuje nasłuchiwanie zdarzeń, więc musisz dodać coś takiego do powyższego kodu:

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

Jednym ze sposobów byłoby nasłuchiwanie zdarzeń kliknięć u twórców i tworzenie wykresów w locie. Oto przykład: http://jsfiddle.net/6UJQ4/

Jedną z rzeczy, które nie były dla mnie jasne, dopóki nie zacząłem się bawić, jest to, że bindPopup Leafleta może pobrać ciąg znaków lub węzeł DOM. Powyższy przykład tworzy węzeł DOM, przekazuje go do bindPopup, a następnie tworzy wykres.