InfoVis和Rails

Question

I'm going to pose this question to the JavaScript InfoVis Toolkit Google Group, but while I'm waiting for that membership to be approved, I thought I'd pose it here. 我将向JavaScript InfoVis Toolkit Google Group提出这个问题，但在等待会员资格获得批准时，我想我会在这里提出这个问题。

I'm developing a Rails app and am in need of adding data visualization (and manipulation via that visualization). 我正在开发一个Rails应用程序，我需要添加数据可视化（以及通过该可视化进行操作）。

I've done some searching and have come accross the JavaScript InfoVis Toolkit . 我已经完成了一些搜索，并且已经在JavaScript InfoVis Toolkit中进行了搜索。 The demos are very appealing to me and are what I'm looking for. 这些演示对我很有吸引力，也是我正在寻找的。

I'm trying to start slow since I'm still relatively new. 因为我还是比较新的，所以我想慢慢开始。 I've tried numerous iterations of code all to no avail. 我尝试过多次迭代代码都无济于事。 This seems to be the best I can do: 这似乎是我能做的最好的事情：

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

Here's my JavaScript 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);

};

So all I"m trying to do is make a simple bar chart example. 所以我想做的就是制作一个简单的条形图示例。

Here's the relevant part of what the Web Inspector (in Safari) shows after the page has fully loaded: 以下是Web Inspector（在Safari中）在页面完全加载后显示的相关部分：

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

So, what I'm seeing is that the canvas element is being injected but with a height of 0px and that's why I'm not seeing it? 所以，我看到的是画布元素正在被注入，但是高度为0px，这就是为什么我没有看到它？

When I look at the DOM of the demo, the contents of <div id="infovis"> looks very similar to mine...the only difference I see is in the height. 当我看到演示的DOM时， <div id="infovis">看起来与我的非常相似......我看到的唯一区别在于高度。

Any insights would be very much appreciated! 任何见解将非常感谢！

Answer 1

The answer ended up being that the container div needed to be styled. 答案最终是容器div需要设计样式。 Apparently it's a bug and is being looked in to. 显然这是一个错误，正在被关注。

InfoVis和Rails

问题描述

1 个解决方案

解决方案1
4 已采纳 2011-01-26 03:24:22

InfoVis和Rails

问题描述

1 个解决方案

解决方案1 4 已采纳 2011-01-26 03:24:22

解决方案1
4 已采纳 2011-01-26 03:24:22