Frage

Ich werde diese Frage für die Google Group von JavaScript Infovis Toolkit stellen, aber während ich darauf warte, dass diese Mitgliedschaft genehmigt wird, dachte ich, ich würde sie hier darstellen.

Ich entwickle eine Rails -App und muss Datenvisualisierung (und Manipulation über diese Visualisierung) hinzufügen.

Ich habe einige gesucht und bin gekommen JavaScript Infovis Toolkit. Die Demos sind für mich sehr ansprechend und sind das, wonach ich suche.

Ich versuche langsam zu beginnen, da ich noch relativ neu bin. Ich habe zahlreiche Code -Iterationen ausprobiert, die alle ohne Erfolg haben. Dies scheint das Beste zu sein, was ich tun kann:

#HTML source
<!DOCTYPE html>
<html>
<head>
  <title>Special</title>
  <link href="/stylesheets/BarChart.css?1281492364" media="screen" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/fileuploader.css?1287396350" media="screen" rel="stylesheet" type="text/css" />
  <script src="/javascripts/prototype.js?1291059294" type="text/javascript"></script>
  <script src="/javascripts/effects.js?1291059294" type="text/javascript"></script>
  <script src="/javascripts/dragdrop.js?1291059294" type="text/javascript"></script>
  <script src="/javascripts/controls.js?1291059294" type="text/javascript"></script>
  <script src="/javascripts/rails.js?1291059294" type="text/javascript"></script>
  <script src="/javascripts/fileuploader.js?1287396350" type="text/javascript"></script>
  <script src="/javascripts/info-vis.js?1295643295" type="text/javascript"></script>
  <script src="/javascripts/jit.js?1281492366" type="text/javascript"></script>
  <script src="/javascripts/application.js?1295548407" type="text/javascript"></script>
  <meta name="csrf-param" content="authenticity_token"/>
  <meta name="csrf-token" content="1yF3pZmI7eUDbIipP66exagwkAGljlU0LlCjaW+ZoaI="/>
</head>
<body onload="init();">

<a href="/">Home</a> | <a href="/mailing_lists/list">List Overview</a><br>


<div id="infovis">
</div>

</body>
</html>

Hier ist meine JavaScript -Datei:

#info-vis.js
    var init = function() {
    var json = {
        'label': ['label A', 'label B', 'label C', 'label D'],
        'values': [
            {
                'label': 'date A',
                'values': [20, 40, 15, 5]
            },
            {
                'label': 'date B',
                'values': [30, 10, 45, 10]
            },
            {
                'label': 'date E',
                'values': [38, 20, 35, 17]
            },
            {
                'label': 'date F',
                'values': [58, 10, 35, 32]
            },
            {
                'label': 'date D',
                'values': [55, 60, 34, 38]
            },
            {
                'label': 'date C',
                'values': [26, 40, 25, 40]
            }]

    };

    var barChart= new $jit.BarChart({
        injectInto: "infovis",
        width: 900,
        height: 500,
        backgroundColor: "#222",
        animate: true,
        barsOffset: 10,
        type: 'stacked:gradient'
    });

    barChart.loadJSON(json);

};

Ich versuche also nur ein einfaches Beispiel für ein Balkendiagramm zu machen.

Hier ist der relevante Teil dessen, was der Webinspektor (in Safari) nach der vollständigen Seite zeigt:

#DOM Inspection
<div id="infovis">
  <div id="infovis-canvaswidget" style="position: relative; width: 800px; height: 0px; ">
    <canvas id="infovis-canvas" width="800" height="0" style="position: absolute; top: 0px; left 0px; width:800px; height: 0px; ">
    <div id="infovis-label" style="overflow-x: visible; overflow-y: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px; "></div>
  </div>
</div>
<div style="visibility: hidden; position: absolute; width: auto; height: auto; " class="jit-autoadjust-label"></div>

Ich sehe also, dass das Canvas -Element injiziert wird, aber mit einer Höhe von 0px und deshalb sehe ich es nicht?

Wenn ich mir das Dom der Demo ansehe, den Inhalt von <div id="infovis"> Sieht meinem sehr ähnlich aus ... der einzige Unterschied, den ich sehe, ist in der Höhe.

Alle Erkenntnisse wären sehr geschätzt!

War es hilfreich?

Lösung

Die Antwort war, dass das Container -Div gestylt werden musste. Anscheinend ist es ein Fehler und wird hineingeschaut.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top