jquery - jQuery を使用して Raphael が生成したグラフをドキュメントに追加する

Question

raphaeljs を使用して一連のグラフを作成しています。ページが読み込まれたら、それらを特定の div のコンテンツに追加したいと考えています。

これが私のhtmlです：

<div class="chartdiv">
    <span class="A">35</span>
    <div class="charthere"></div>
</div>

<div class="chartdiv">
    <span class="A">25</span>
    <div class="charthere"></div>
</div>

<div class="chartdiv">
    <span class="A">15</span>
    <div class="charthere"></div>
</div>

次の jQuery コードは、クラス chartdiv を使用してすべての div をループし、それぞれについてループする必要があります。

• クラスAでスパンの値を取得し、
• drawChart 関数に渡す
• クラスチャートを使用してdivにsvgを配置しますhere

ここに私のjsスクリプトの関連部分があります:

$(document).ready(function(){

    $('div.chartdiv').each(function(){
        // get the A value
        var A = parseInt($(this).add('span.A').text());

        // substitute the html with the corresponding chart
        drawChart($(this).add('div.charthere'), A);
    });

    function drawChart(element, A) {
        var paper = new Raphael(element, 200, 200);
        var examplePathString = "M20,100 L" + A + ",100";
        var thePath = paper.path(examplePathString);
        thePath.attr({stroke: red,'stroke-width': 5px});
    }
});

代わりに、すべての svg 要素が div の後に作成されます。