Pregunta

Me voy a plantear esta cuestión al grupo de Google JavaScript InfoVis Toolkit, pero mientras estoy esperando a que la pertenencia a ser aprobado, pensé que planteo aquí.

Estoy desarrollando una aplicación Rails y estoy en necesidad de la adición de visualización de datos (a través de la manipulación y que la visualización).

He hecho algunas búsquedas y han llegado al otro lado de la JavaScript InfoVis Toolkit . Las demostraciones son muy atractivos para mí y son lo que yo estoy buscando.

Estoy intentando comenzar lento ya que soy todavía relativamente nuevo. He intentado numerosas repeticiones de código de todo en vano. Esto parece ser lo mejor que puedo hacer: 

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

Aquí está mi archivo 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);

};

Así que todo lo que "estoy tratando de hacer es un ejemplo sencillo gráfico de barras.

Esta es la parte relevante de lo que el inspector web (en Safari) muestra después de que la página se ha cargado completamente: 

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

Por lo tanto, lo que estoy viendo es que se está inyectando el elemento canvas, pero con una altura de 0px y es por eso que no estoy viendo?

Cuando miro el DOM de la demo, el contenido de miradas <div id="infovis"> muy similares a la mía ... la única diferencia que veo es en la altura.

Cualquier ideas sería muy apreciado!

¿Fue útil?

Solución

La respuesta resultó ser que el contenedor div necesitaba ser labrado. Al parecer es un error y se está mirando a.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top