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 回答