Supprimer le rembourrage ou les marges de Google Charts

Question

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');

  var myData = {
    'Mushrooms': 3,
    'Onions': 1,
    'Olives': 1,
    'Zucchini': 1,
    'Pepperoni': 2
  };

  var rows = [];
  for (element in myData) {
      rows.push([element + " (" + myData[element] + ")", myData[element]])
  }
  data.addRows(rows);

  // Set chart options
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':450,
                 'height':300};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Exemple de violon

Comment supprimer le rembourrage ou les marges dans cet exemple ?

Answer 1

En ajoutant et en ajustant certaines options de configuration répertoriées dans la section Documentation de l'API vous pouvez créer de nombreux styles différents. Par exemple, voici une version qui supprime la plupart des espaces vides supplémentaires en définissant l'option chartArea.width à 100% et chartArea.height à 80% et de déplacer le legend.position à fond :

// Set chart options
var options = {'title': 'How Much Pizza I Ate Last Night',
               'width': 350,
               'height': 400,
               'chartArea': {'width': '100%', 'height': '80%'},
               'legend': {'position': 'bottom'}
    };

Si vous souhaitez l'affiner davantage, essayez de modifier ces valeurs ou d'utiliser d'autres propriétés du lien ci-dessus.

Answer 2

J'arrive un peu tard, mais n'importe quel utilisateur qui cherche cela peut y trouver de l'aide. Dans les options, vous pouvez passer un nouveau paramètre appelé chartArea .

        var options = {
        chartArea:{left:10,top:20,width:"100%",height:"100%"}
    };

Les options Left et Top définissent la quantité de rembourrage à partir de la gauche et du haut. J'espère que cela vous aidera.

Answer 3

Je suis arrivé ici comme la plupart des gens avec le même problème, et je suis reparti choqué qu'aucune des réponses ne fonctionne, même de loin.

Pour ceux que cela intéresse, voici la solution réelle :

... //rest of options
width: '100%',
height: '350',
chartArea:{
    left:5,
    top: 20,
    width: '100%',
    height: '350',
}
... //rest of options

La clé ici a rien à faire avec les valeurs "left" ou "top". Mais plutôt que le :

Les dimensions des deux graphique et zone de carte sont réglés et fixés à la MÊME VALEUR

Comme amendement à ma réponse. Ce qui précède résoudra effectivement le problème de l'espacement, de la marge et du blanc "excessifs". Cependant, si vous souhaitez inclure des étiquettes d'axes et/ou une légende vous devrez réduire la hauteur et la largeur de la zone du graphique pour qu'elles soient légèrement inférieures à la largeur/hauteur extérieure. Cela permettra de "dire" à l'API graphique qu'il y a suffisamment de place pour afficher ces propriétés. Dans le cas contraire, elle se contentera de les exclure.

Answer 4

C'est absent de la documentation (j'utilise la version 43), mais vous pouvez en fait utiliser la fonction droite et fond de la zone du graphique :

var options = {
  chartArea:{
    left:10,
    right:10, // !!! works !!!
    bottom:20,  // !!! works !!!
    top:20,
    width:"100%",
    height:"100%"
  }
};

Il est donc possible d'utiliser une largeur et une hauteur optimales tout en évitant que les étiquettes ou les légendes des axes ne soient rognées.

Answer 5

Il existe un thème disponible spécifiquement pour cela

options: {
  theme: 'maximized'
}

à partir des documents de la carte Google :

Actuellement, un seul thème est disponible :

maximized' - Maximise la zone du graphique et dessine la légende et toutes les étiquettes à l'intérieur de la zone du graphique. Définit les options suivantes :

chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}