Domanda

ho intenzione di porre questa domanda al gruppo Google JavaScript InfoVis Toolkit, ma mentre sto aspettando che l'adesione deve essere approvato, ho pensato di pongo qui.

Sto sviluppando un'applicazione Rails e sono nel bisogno di aggiungere la visualizzazione dei dati (e la manipolazione via che la visualizzazione).

Ho fatto qualche ricerca e sono venuti dall'altra parte della JavaScript InfoVis Toolkit . Le demo sono molto attraente per me e sono quello che sto cercando.

sto cercando di iniziare lento visto che sono ancora relativamente nuovo. Ho provato numerose iterazioni di codice tutto inutile. Questo sembra essere il meglio che posso fare: 

#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>

Ecco il mio file JavaScript: 

#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);

};

Quindi tutto quello che "m cercando di fare è fare un semplice esempio grafico a barre.

Ecco la parte rilevante di ciò che il Web Inspector (in Safari) spettacoli dopo che la pagina è a pieno carico: 

#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>

Quindi, quello che sto vedendo è che l'elemento canvas viene iniettata ma con un'altezza di 0px e per questo non sto vedendo?

Quando guardo il DOM della demo, il contenuto di sguardi <div id="infovis"> molto simili alle mie ... l'unica differenza che vedo è in piena.

Tutte le comprensioni sarebbe molto apprezzato!

È stato utile?

Soluzione

La risposta che ha finito per essere il div contenitore doveva essere designato. A quanto pare si tratta di un bug e viene guardato a.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top