InfoVis和Rails

我將向JavaScript InfoVis Toolkit Google Group提出這個問題，但在等待該會員資格被批准時，我想我會在此處提出。InfoVis和Rails

我正在開發一個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檢查器（在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>

因此，我看到的是canvas元素被注入，但高度爲0px，這就是爲什麼我沒有看到它？

當我看演示的DOM時，<div id="infovis">的內容看起來與我的非常相似...我看到的唯一區別是身高。

任何見解都將非常感謝！

來源

2011-01-21 Spencer R

答案最終是容器div需要風格。顯然這是一個錯誤，正在被查找。

來源

2011-01-26 03:24:22

你是什麼意思容器div需要風格？ infovis容器？ – Munzilla 2011-06-03 16:24:18

回答

相關問題