JavaScriptのポップアップウィンドウ内のグラフ

ポップアップウィンドウ内にグラフを表示する方法 私は、Raphaelプラグインhttp://dynmeth.github.com/RaphaelLayer/をサポートするLeaflet JSを使用しています。ポップアップウィンドウ内にdivを作成することは可能ですか？私はhttp://softwarebyjosh.com/raphy-charts/について考えていました

Leafletでそれができない場合、私はRaphaelマップソリューションのみに開かれます。

ありがとう

それは可能だと思います。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による回答はソリューションの一部にすぎません。グラフのdivタグをポップアップに配置できますが、「。openPopup（）」イベントをリッスンしてraphy-carts JavaScriptを実行する必要があるため、問題が発生します。そのイベントでそれを行わないと、DOMに挿入されていないため、実行時にdivタグが見つかりません。リーフレットはイベントのリスニングをサポートしているように見えるため、上記のコードに次のようなものを追加する必要があります。

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

1つの方法は、メーカーのクリックイベントをリッスンし、その場でチャートを作成することです。次に例を示します。http： //jsfiddle.net/6UJQ4/

私がいじり始めるまで私にははっきりしていなかったことの1つは、LeafletのbindPopupが文字列または DOMノードを取得できることです。上記の例では、DOMノードを作成し、それをbindPopupに渡して、グラフを作成しています。