Gráfico dentro da janela pop-up em Javascript


Respostas:


1

Eu acho que é possível. Vejo este exemplo na página inicial do 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();

Então você pode adicionar marcação como conteúdo. Veja a tag br acima.

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

2

A resposta de @cavila é apenas parte da solução. Você pode colocar a tag div para o gráfico no pop-up, mas o problema surge porque você precisará ouvir o evento ".openPopup ()" para executar o javascript do raphy-carrts. Se você não o fizer nesse evento, quando for executado, não encontrará a tag div porque não foi inserida no DOM. Parece que o folheto suporta a escuta de eventos, então você precisará adicionar algo assim ao código acima:

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

Então o openPopup () é assíncrono? Como o interpretador Javascript não executará a próxima instrução até o retorno anterior, exceto os retornos de chamada que são executados mais tarde. Uma alternativa, se nenhum evento seria executar o pool para a existência desse "div" em um loop window.setTimeout. O retorno de chamada do evento seria muito mais rápido.
Cavila

1

Uma maneira seria ouvir eventos de clique em seus criadores e criar os gráficos em tempo real. Aqui está um exemplo: http://jsfiddle.net/6UJQ4/

Uma coisa que não estava clara para mim até que comecei a brincar é que o bindPopup do Leaflet pode usar uma string ou um nó DOM. O exemplo acima cria um nó DOM, passa para bindPopup e cria o gráfico.


Isso é possível para eventos de polígono? Quando clicado em algum polígono, um pop-up semelhante aparece?
againstflow

Sim, deve ser possível. Meu exemplo é codificado para usar 50 como o valor do gráfico, mas você pode fazer o que quiser dentro da função que cria o gráfico.
Derek Swingley

Você pode escrever um exemplo com polígonos ou dados geojson no jsfiddle assim com marcadores? Eu apreciaria muito.
againstflow
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.