0

jQuery モバイル ページに視覚的な統計情報を実装したいと考えています。次のスニペットを埋め込むと、別の *.svg ファイルから埋め込む場合と同じ結果が表示されます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="115" width="100%">
<rect x="0%" y="0" fill="#8cc63f" width="19.2%" height="100" />
    <text x="10%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">A</text>
    <text x="10%" y="15" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">100</text>

<rect x="20.2%" y="50" fill="#8cc63f" width="19.2%" height="50" />
    <text x="30.2%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">B</text>
    <text x="30.2%" y="65" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">50</text>

<rect x="40.4%" y="90" fill="#8cc63f" width="19.2%" height="10" />
    <text x="50.4%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">C</text>
    <text x="50.4%" y="85" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">10</text>

<rect x="60.6%" y="78" fill="#8cc63f" width="19.2%" height="22" />
    <text x="70.6%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">D</text>
    <text x="70.6%" y="73" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">22</text>

<rect x="80.8%" y="40" fill="#8cc63f" width="19.2%" height="60" />
    <text x="90.8%" y="115" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">E</text>
    <text x="90.8%" y="55" font-family="helvetica, sans-serif" font-size="10" style="text-anchor:middle;">60</text>

これらの統計はサイトごとに明らかに変化するため、JavaScript を使用して上記のようなコードを生成します。HTML-Source-Code は同じように見えますが、SVG は表示されません。代わりに、次のようになります。

A 100 B 50 C 10 D 22 E60

本当にただのテキスト行

私の js (backbone_js) は次のようになります。

/* Rendert den Publikumsjoker */
_.extend(KM.Views, {
"StatsPubJoker" : Backbone.View.extend({
    tagName : 'svg:svg',
    attributes:{
        'type':'image/svg+xml',
        'xmlns':"http://www.w3.org/2000/svg",
        //'xmlns:svg':"http://www.w3.org/2000/svg",
        'xmlns:xlink':"http://www.w3.org/1999/xlink",
        'version':'1.1',
        // 'baseProfile':'tiny',
        height:'115',
        width:'100%'
    },
    initialize : function() {
        _.bindAll(this, 'render');
        _.bindAll(this, 'renderSingleBar');

        // Fragenmodel hintelegen
        this.model    = this.options.model;

        // Anzahl an Antwortmöglichkeiten
        var countAnswerOptions = _.keys(this.model.get('stats').pubJoker.prozDistribution).length;


        // Optionen zum  Plotten hinterlegen
        this.plotOptions = {

                // Summe aller gemachten Kreuze hinterlegen (=n)
                n : this.model.get('stats').pubJoker.sumup,

                // Anzahl unterschiedlicher Antwortmöglichkeiten zwischenspeichern
                N : countAnswerOptions,

                // Breiten festlegen (in Prozent)
                barWidth : (99 / countAnswerOptions), // + '%',
                spacerWidth : 1 / (countAnswerOptions-1), // + '%',
                textOffset: 99 / countAnswerOptions * 2
        };

        console.log(this.plotOptions);

        // counter für Balken
        this.barCounter = 0;

        // Das Template laden 
        this.template = _.template($('#stats-pubjoker-singleitem').html());
    },
    render : function() { 

        if(this.plotOptions.n == undefined || this.plotOptions.n == 0 || this.plotOptions.n == 0) return this;

        console.log(this.model.get('stats').pubJoker.prozDistribution);
        _.each(this.model.get('stats').pubJoker.prozDistribution, this.renderSingleBar);

        return this;
    },
    renderSingleBar: function(singleitem,letterkey){

        var singleBarOptions            = {};

        singleBarOptions.xposBar        = (this.plotOptions.barWidth + this.plotOptions.spacerWidth) * this.barCounter;
        singleBarOptions.xposText       =  this.plotOptions.textOffset + singleBarOptions.xposBar;
        singleBarOptions.yposLetter     = 115;
        singleBarOptions.yposBar        = parseFloat(singleitem);
        singleBarOptions.letter         = letterkey;
        singleBarOptions.value          = singleitem;
        singleBarOptions.yposTextNumber = singleBarOptions.yposBar < 25 ? singleBarOptions.yposBar + -15 : singleBarOptions.yposBar +5;
        console.log(singleBarOptions);

        this.$el.append(this.template(_.extend(singleBarOptions, this.plotOptions)));

        this.barCounter++;

        return false;
    }
})

});

何か不足していますか？ご協力ありがとうございました！

4

1 に答える 1

0

として保存する場合は、.svg必ずヘッダーを含めてください。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

または、html ファイルとして保存することもできます。

<html>
<body>
.....
</body>
</html>
于 2012-12-13T17:15:36.127 に答える