文章/答案/技术大牛

发布

社区首页 >问答首页 >InfoVis和Rails

问InfoVis和Rails
EN

Stack Overflow用户

提问于 2011-01-22 05:37:03

回答 1查看 1.4K关注 0票数 4

我将向JavaScript InfoVis工具包谷歌小组提出这个问题，但在我等待该成员资格获得批准的同时，我想我应该在这里提出这个问题。

我正在开发一个Rails应用程序，需要添加数据可视化(以及通过可视化进行操作)。

我做了一些搜索，找到了JavaScript InfoVis Toolkit。这些演示对我很有吸引力，也是我正在寻找的。

我试着慢慢开始，因为我还是个新手。我已经尝试了无数次的代码迭代，但都没有效果。这似乎是我能做的最好的事情了：

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

这是我的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);

};

所以我要做的就是做一个简单的条形图例子。

以下是页面完全加载后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>

所以，我看到的是画布元素被注入，但高度为0px，这就是为什么我看不到它的原因？

当我查看演示的DOM时，<div id="infovis">的内容看起来与mine...the非常相似，唯一的区别是高度不同。

如有任何见解，我们将不胜感激！

javascript

ruby-on-rails

infovis

thejit

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-01-26 11:24:22

最终的答案是容器div需要样式化。很明显，这是一个bug，正在被检查。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4764041

复制

相似问题

问InfoVis和Rails
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问InfoVis和RailsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问InfoVis和Rails
EN