Supprimer le remplissage ou les marges des graphiques Google

// 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 remplissage ou les marges dans cet exemple?

En ajoutant et en ajustant certaines options de configuration répertoriées dans la documentation de l' API , vous pouvez créer de nombreux styles différents. Par exemple, voici une version qui supprime la plupart de l'espace vide supplémentaire en définissant le chartArea.widthsur 100% et chartArea.heightsur 80% et en déplaçant le legend.positionvers le bas :

// 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'ajuster davantage, essayez de modifier ces valeurs ou d'utiliser d'autres propriétés du lien ci-dessus.

Je suis assez en retard, mais tout utilisateur qui recherche cela peut obtenir 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 de gauche et du haut définiront la quantité de remplissage à partir de la gauche et du haut. J'espère que cela aidera.

Je suis arrivé ici comme la plupart des gens avec le même problème, et je suis resté choqué qu'aucune réponse ne fonctionnait même à distance.

Pour toute personne intéressée, voici la solution actuelle:

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

La clé ici n'a rien à voir avec les valeurs «gauche» ou «supérieure». Mais plutôt que le:

Les dimensions du graphique et de la zone de graphique sont définies et définies sur la même valeur

Comme amendement à ma réponse. Ce qui précède résoudra en effet le problème de remplissage / marge / espace "excessif". 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 de graphique afin de quelque chose légèrement en dessous de la largeur / hauteur extérieure. Cela "indiquera" à l'API du graphique qu'il y a suffisamment de place pour afficher ces propriétés. Sinon, il les exclura volontiers.

Il manque dans la documentation (j'utilise la version 43), mais vous pouvez en fait utiliser la propriété right et bottom de la zone de graphique:

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

Il est donc possible d'utiliser la largeur et la hauteur réactives complètes et d'empêcher les étiquettes ou légendes d'axes d'être rognées.

Il y a cette possibilité comme Aman Virk l'a mentionné :

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

Mais gardez à l'esprit que le rembourrage et la marge ne sont pas là pour vous déranger. Si vous avez la possibilité de basculer entre différents types de graphiques comme un ColumnChart et celui avec des colonnes verticales, vous avez besoin d'une marge pour afficher les étiquettes de ces lignes.

Si vous supprimez cette marge, vous finirez par n'afficher qu'une partie des étiquettes ou aucune étiquette du tout.

Donc, si vous n'avez qu'un seul type de graphique, vous pouvez modifier la marge et le remplissage comme l'a dit Arman. Mais s'il est possible de changer, ne les changez pas.

Il y a un thème disponible spécifiquement pour cela

options: {
  theme: 'maximized'
}

à partir de la documentation Google Chart:

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