gpt4 book ai didi

javascript - InfoVis 和 Rails

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:51:15 27 4
gpt4 key购买 nike

我打算向 JavaScript InfoVis Toolkit Google Group 提出这个问题,但在等待该成员资格获得批准时,我想我应该在这里提出它。

我正在开发 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>

所以,我看到的是正在注入(inject) Canvas 元素,但高度为 0px,这就是我看不到它的原因?

当我查看演示的 DOM 时,<div id="infovis"> 的内容看起来和我的很相似……我看到的唯一区别是高度。

如有任何见解,我们将不胜感激!

最佳答案

最终的答案是容器 div 需要设置样式。显然这是一个错误,正在研究中。

关于javascript - InfoVis 和 Rails,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4764041/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com