Discussion :

[jayce23]

Bonjour, j'affiche un graphique sur une page Html et ce graphique possède une partie "info".

Vous pouvez voir un exemple ici :

Le problème est que je vroudrais afficher cette partie "info" juste à coté du graphique, mais comme je change de données, le graphique peut varier de taille et alors ma partie "info" vient parfois déborder sur le graphique.

Voici le css de mon graphique (ligne 7 le css pour la partie "info") :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*plugin styles*/
.visualize { border: 1px solid #888; position: relative; background: #fafafa; bottom : 60px; }
.visualize canvas { position: absolute; }
.visualize ul,.visualize li { margin: 0; padding: 0;}
 
/*table title, key elements*/
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; opacity: 1; left:378px;}
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px;  font-size: 1.1em; }
.visualize ul.visualize-key { list-style: none;  }
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px;  }
.visualize ul.visualize-key .visualize-key-label { color: #000; }
 
/*line,bar, area labels*/
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555; }
.visualize-labels-x li span.line, .visualize-labels-y li span.line {  position: absolute; border: 0 solid #ccc; }
.visualize-labels-x li { height: 100%; }
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; }
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
.visualize-labels-y li { width: 100%;  }
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }

Comment faire ?

Merci.

[rodolphebrd]

Bonjour,

Il faudrait voir le code HTML.

[jayce23]

Dans mon firebug, pour l'html généré j'ai ceci :



et ma sélection sur l'image correspond bien à la partie "info" de mon graphique :



Et dans ma page Html de base, je place mon graphique dans une balise div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="right"></div>

avec comme appel javascript ceci:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#table').visualize({ type: 'line' }).appendTo('#right');