[Google Chart] Réduire la marge

**Ceubex** · 08/12/2012, 10h47

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

**NoSmoking** · 08/12/2012, 14h20

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

Code :

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

chartArea:{left:50, top:10},  // par exemple à ajuster suivant besoin

**Ceubex** · 10/12/2012, 22h00

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

**NoSmoking** · 12/12/2012, 18h57

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 html :

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
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>