[英]InfoVis and Rails
我將向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>
所以,我看到的是畫布元素正在被注入,但是高度為0px,這就是為什么我沒有看到它?
當我看到演示的DOM時, <div id="infovis">
看起來與我的非常相似......我看到的唯一區別在於高度。
任何見解將非常感謝!
答案最終是容器div需要設計樣式。 顯然這是一個錯誤,正在被關注。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.