Діаграма всередині спливаючого вікна у Javascript

10

Як показати діаграму всередині спливаючого вікна? Я використовую Leaflet JS, який підтримує плагін Raphael http://dynmeth.github.com/RaphaelLayer/ . Чи можливо створити div у спливаючому вікні? Я думав про http://softwarebyjosh.com/raphy-charts/

Якщо з Leaflet це неможливо, я відкритий лише для рішення карти Рафаеля.

Дякую

javascript web-mapping leaflet

— проти течії
джерело

1

Я думаю, це можливо. Я бачу цей приклад на домашній сторінці 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();

Таким чином, ви можете додати розмітку як вміст. Див. Тег br вище.

// 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
джерело

2

Відповідь @cavila - лише частина рішення. Можна поставити тег div для діаграми у спливаючому вікні, але проблема виникає тоді, тому що вам потрібно буде прослухати подію ".openPopup ()", щоб потім виконати Javascript raphy-carts. Якщо ви цього не зробите в цій події, тоді, коли він буде виконаний, він не знайде тег div, оскільки він не був вставлений у DOM. Схоже, листівка підтримує прослуховування подій, тому вам потрібно буде додати щось подібне до коду вище:

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

— Джеймі
джерело

Отже, openPopup () є асинхронним? Тому що інтерпретатор Javascript не буде виконувати наступне твердження до попереднього повернення, за винятком зворотних викликів, які виконуються пізніше. Альтернатива, якщо жодна подія не буде виконувати об'єднання для існування цього "div" у циклі window.setTimeout. Зворотний виклик події був би набагато швидшим.

— cavila

1

Одним із способів було б слухати події кліків на своїх розробників та створювати графіки на льоту. Ось приклад: http://jsfiddle.net/6UJQ4/

Одне, що мені було не зрозуміло, поки я не почав грати, - це те, що bindPopup Leaflet може взяти рядок або вузол DOM. Наведений вище приклад створює вузол DOM, передає його bindPopup, потім створює діаграму.

— Дерек Свінглі
джерело

Чи можливо це для подій полігону? При натисканні на якийсь багатокутник з'являється подібне спливаюче вікно?

— проти потоку

Так, має бути можливо. У моєму прикладі важко кодувати використання 50 як значення для діаграми, але ви можете робити все, що завгодно, всередині функції, яка створює діаграму.

— Дерек Свінглі

Чи можете ви, будь ласка, написати приклад з полігонами або даними geojson на jsfiddle, як це, з маркерами? Я б дуже цінував.

— проти потоку