Graphique dans une fenêtre contextuelle en Javascript

10

Comment afficher un graphique dans une fenêtre contextuelle? J'utilise Leaflet JS, qui prend en charge le plugin raphael http://dynmeth.github.com/RaphaelLayer/ . Est-il possible de créer une fenêtre contextuelle div à l'intérieur? Je pensais à http://softwarebyjosh.com/raphy-charts/

Si ce n'est pas possible avec Leaflet, je suis ouvert à la seule solution de carte Raphael.

Merci

javascript web-mapping leaflet contre-courant
la source

Réponses:

1

Je suppose que c'est possible. Je vois cet exemple sur la page d'accueil de 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();

Vous pouvez donc ajouter du balisage en tant que contenu. Voir la balise br ci-dessus.

// 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
la source
2

La réponse de @cavila n'est qu'une partie de la solution. Vous pouvez mettre la balise div pour le graphique dans la fenêtre contextuelle, mais le problème se pose alors car vous devrez écouter l'événement ".openPopup ()" pour ensuite exécuter le raphy-carts javascript. Si vous ne le faites pas sur cet événement, alors lors de son exécution, il ne trouvera pas la balise div car elle n'a pas été insérée dans le DOM. Il semble que le dépliant supporte l'écoute des événements, vous devrez donc ajouter quelque chose comme ceci au code ci-dessus:

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
la source
L'openPopup () est donc asynchrone? Parce que l'interpréteur Javascript n'exécutera pas l'instruction suivante avant le retour précédent, sauf pour les rappels qui sont exécutés plus tard. Une alternative si aucun événement ne serait exécuté en pool pour l'existence de ce "div" dans une boucle window.setTimeout. Le rappel de l'événement serait beaucoup plus rapide.
cavila
1

Une façon serait d'écouter les événements de clic sur vos créateurs et de créer les graphiques à la volée. Voici un exemple: http://jsfiddle.net/6UJQ4/

Une chose qui n'était pas claire pour moi jusqu'à ce que je commence à jouer est que le bindPopup de Leaflet peut prendre une chaîne ou un nœud DOM. L'exemple ci-dessus crée un nœud DOM, le transmet à bindPopup puis crée le graphique.

Derek Swingley
la source
Est-ce possible pour les événements polygonaux? Lorsque vous cliquez sur un polygone, une fenêtre contextuelle similaire apparaît?
contre
Oui, cela devrait être possible. Mon exemple est codé en dur pour utiliser 50 comme valeur pour le graphique, mais vous pouvez faire tout ce que vous voulez dans la fonction qui crée le graphique.
Derek Swingley
Pouvez-vous écrire un exemple avec des polygones ou des données geojson sur jsfiddle comme celui-ci avec des marqueurs? J'apprécierais tellement.
contre