[Google Chart] Réduire la marge

Version imprimable

08/12/2012, 10h47
Ceubex

[Google Chart] Réduire la marge

Bonjour,

Je souhaite afficher une multitude de graphiques Google Chart l'un à côté de l'autre dans un petit espace. Mon soucis est que par défaut il y a des "marges" importantes sur les côté de l'élément svg créé par l'API de Google (on le voit en faisant clique droit > Examiner l'élément sous Firefox).

Je ne parviens pas à trouver comment réduire ces marges. Pourriez vous m'aider ?

Merci
08/12/2012, 14h20
NoSmoking

Bonjour,
as tu essayé de jouer sur les paramètres de chartArea

Code:

chartArea:{left:50, top:10}, // par exemple à ajuster suivant besoin
10/12/2012, 22h00
Ceubex

En fait cela ne fait que décaller le graphique à l'interieur de l'élément SVG. Mais le "contenant" à toujours la même taille, simplement le graph est positionné ailleurs à l'interieur

Citation:

Mais le "contenant" à toujours la même taille, simplement le graph est positionné ailleurs à l'interieur

Il te faut jouer sur le conteneur en en réduisant la taille.

un exemple simple

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
 
function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Valeurs'],
    ['A', 1], ['B', 2], ['C', 4], ['D', 8], ['E', 7], ['F', 7], ['G', 8], ['H', 4], ['I', 2], ['J', 3.5], ['K', 3], ['L', 3.5], ['M', 1], ['N', 1]
  ]);
  // Create and draw the visualization.
  var oVisu = new google.visualization.LineChart(document.getElementById('visu_2'));
  oVisu.draw(data, {
    curveType: "function",
    width: 500, height: 400,
    chartArea: { left: 50, top: 25 },// par exemple à ajuster suivant besoin
    vAxis: { maxValue: 10 }
  });
  //
  oVisu = new google.visualization.LineChart(document.getElementById('visu_1'));
  oVisu.draw(data, {
    curveType: "function",
    width: 500, height: 400,
    vAxis: { maxValue: 10 }
  });
}
google.setOnLoadCallback( drawVisualization);
</script>
</head>
<body>
<h2>Version standard</h2>
<div id="visu_1" style="margin-left:50px;width:500px;height:400px;border:1px solid #DDD;overflow:hidden"></div>
<h2>Version tronquée</h2>
<div id="visu_2" style="margin-left:50px;width:450px;height:300px;border:1px solid #DDD;overflow:hidden"></div>
</body>
</html>

13/12/2012, 00h14
Ceubex

1 pièce(s) jointe(s)

Désolé d'être aussi chiant mais voici les bordures données par l'inspecteur l'élément Firefox, ça reste les mêmes. :oops:
13/12/2012, 00h19
Ceubex

Méa maxima coulpa. Même si l'inspecteur Firefox s'amuse à dire des betises, ton truc marche quand même :D

Merci pour ton aide !
13/12/2012, 19h18
NoSmoking

Il était possible de le faire avec un peu de javascript en jouant sur le scrollLeft/Top du conteneur.