1

jQuery を使用して SVG 棒グラフを作成しようとしていますが、他のライブラリを使用していませんが、長方形を作成すると、html に入力されたものと同じものは表示されますが、ブラウザーには表示されません。

var data = [4, 8, 15, 16, 23, 42];
var chart = jQuery("#chart");
jQuery.each(data, function(index, value) {
    var bar = jQuery("<rect/>");
    chart.append(bar);
    bar.attr("y", index * 20)
        .attr("width", value * 10)
        .attr("height", 20);
});

そしてhtml：

<svg id="chart" class="chart" width=420 height=120 style="display: block;">
    <rect y="0" width="40" height="20"></rect> <!--added to test-->
</svg>

入力された rect タグは問題なく表示され、Chrome の開発者ツールを使用すると、コードによって生成された最初のタグと同じように見えますが、コードによって生成されたタグは表示されません。

4

2 に答える 2

7 
$(document).ready(function() {
    var data = [4, 8, 15, 16, 23, 42];
    var chart = jQuery("#chart2");
    jQuery.each(data, function(index, value) {
        var bar = $(document.createElementNS("http://www.w3.org/2000/svg", "rect")).attr({
            x: 0,
            y: index * 20,
            width: value * 10,
            height: 20,
            stroke: "red",
            fill: "white"
        });
        chart.append(bar);
    });
});​

http://jsfiddle.net/26ybf/

編集：明らかに、ストロークと塗りつぶしの属性を削除できます。正しく機能していることを確認するために、そこに配置しました。乾杯！

于 2012-12-05T21:08:27.063 に答える
1

要素をリフレッシュしてみてください:

jQuery.each(data, function(index, value) {
    ...
}    
chart.html(function(){return this.innerHTML});

jsFiddleを見る

于 2012-12-05T21:06:58.750 に答える