Диаграмма внутри всплывающего окна в Javascript

10

Как показать график внутри всплывающего окна? Я использую Leaflet JS, который поддерживает плагин Raphael http://dynmeth.github.com/RaphaelLayer/ . Можно ли создать div внутри всплывающего окна? Я думал о http://softwarebyjosh.com/raphy-charts/

Если это невозможно с Leaflet, я открыт только для решения карты Рафаэля.

Спасибо

javascript web-mapping leaflet

— againstflow
источник

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. Обратный вызов события будет намного быстрее.

— кавила

1

Одним из способов будет прослушивание событий кликов на ваших создателях и создание диаграмм на лету. Вот пример: http://jsfiddle.net/6UJQ4/

Одна вещь, которая мне не была понятна, пока я не начал играться, это то, что bindPopup Leaflet может принимать строку или DOM-узел. Приведенный выше пример создает DOM-узел, передает его в bindPopup, а затем создает диаграмму.

— Дерек Суингли
источник

Это возможно для событий многоугольника? При нажатии на какой-либо полигон появляется похожее всплывающее окно?

— против потока

Да, должно быть возможно. Мой пример жестко запрограммирован на использование 50 в качестве значения для диаграммы, но вы можете делать все что угодно внутри функции, которая создает диаграмму.

— Дерек Суингли

Можете ли вы написать пример с полигонами или данными геойсон на jsfiddle, как это с маркерами? Я был бы очень признателен.

— против потока