InfoVis et Rails
https://stackoverflow.com/questions/4764041
-
16-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je vais poser cette question au JavaScript InfoVis Toolkit groupe Google, mais alors que je suis en attente pour que l'adhésion à approuver, je pensais que je pose ici.
Je développe une application Rails et je suis dans le besoin d'ajouter la visualisation des données (et la manipulation par cette visualisation).
Je l'ai fait quelques recherches et je suis venu accross JavaScript InfoVis Toolkit . Les démos sont très attrayants pour moi et sont ce que je cherche.
Je suis en train de commencer lentement depuis que je suis encore relativement nouveau. J'ai essayé de nombreuses itérations de code en vain. Cela semble être le meilleur que je peux faire:
#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>
Voici mon fichier 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);
};
Alors tout ce que je "m essayer de faire est un exemple simple de graphique à barres.
Voici la partie pertinente de ce que l'inspecteur Web (Safari) montre après que la page soit complètement chargée:
#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>
Alors, ce que je vois est que l'élément de toile est injecté, mais avec une hauteur de 0px et qui est la raison pour laquelle je ne le vois pas?
Quand je regarde les DOM de la démo, le contenu des regards <div id="infovis"> très semblables à la mienne ... la seule différence que je vois est la hauteur.
Les idées serait très apprécié!
La solution
La réponse a fini par être que le conteneur div devait être de style. Apparemment, il est un bug et est regardé pour.
