Bagan di dalam jendela pop up dalam Javascript

10

Bagaimana cara menunjukkan grafik di dalam jendela pop up? Saya menggunakan Leaflet JS, yang memiliki dukungan untuk plugin raphael http://dynmeth.github.com/RaphaelLayer/ . Apakah mungkin membuat div di dalam jendela popup? Saya sedang memikirkan http://softwarebyjosh.com/raphy-charts/

Jika tidak memungkinkan dengan Leaflet, saya terbuka hanya untuk solusi peta Raphael.

Terima kasih

javascript web-mapping leaflet

— melawan arus
sumber

1

Saya kira itu mungkin. Saya melihat contoh ini di beranda 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();

Jadi, Anda dapat menambahkan markup sebagai konten. Lihat label br di atas.

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

2

Jawaban oleh @cavila hanyalah sebagian dari solusi. Anda dapat meletakkan tag div untuk bagan di popup, tetapi masalah muncul kemudian karena Anda harus mendengarkan acara ".openPopup ()" untuk kemudian menjalankan javascript raphy-carts. Jika Anda tidak melakukannya pada acara itu, maka ketika dijalankan tidak akan menemukan tag div karena belum dimasukkan ke DOM. Sepertinya leaflet mendukung acara mendengarkan sehingga Anda perlu menambahkan sesuatu seperti ini ke kode di atas:

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
sumber

Jadi openPopup () asinkron? Karena penerjemah Javascript tidak akan menjalankan pernyataan berikutnya sampai pengembalian sebelumnya kecuali panggilan balik yang dieksekusi nanti. Alternatif jika tidak ada acara akan mengeksekusi pooling untuk keberadaan "div" di loop window.setTimeout. Event callback akan jauh lebih cepat.

— cavila

1

Salah satu caranya adalah dengan mendengarkan acara klik pada pembuat Anda dan membuat grafik dengan cepat. Berikut ini contohnya: http://jsfiddle.net/6UJQ4/

Satu hal yang tidak jelas bagi saya sampai saya mulai bermain-main adalah bindPopup Leaflet dapat mengambil string atau simpul DOM. Contoh di atas membuat simpul DOM, meneruskannya ke bindPopup kemudian membuat bagan.

— Derek Swingley
sumber

Apakah itu mungkin untuk acara poligon? Ketika diklik beberapa poligon, popup serupa muncul?

— terhadap arus

Ya, harus dimungkinkan. Contoh saya adalah hardcoded untuk menggunakan 50 sebagai nilai untuk bagan tetapi Anda bisa melakukan apa pun yang Anda suka di dalam fungsi yang membuat bagan.

— Derek Swingley

Bisakah Anda menulis contoh dengan data poligon atau geojson pada jsfiddle seperti ini dengan spidol? Saya akan sangat menghargai.

— terhadap arus