web-dev-qa-db-fra.com

Supprimer le remplissage ou les marges de Google Charts

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

javascripthtmlchartsgoogle-visualization
143
Paul Armdam

En ajoutant et en ajustant certaines des 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 des espaces vierges en définissant le chartArea.width sur 100% et chartArea.height à 80% et en déplaçant le legend.position vers en 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 mieux l'accorder, essayez de modifier ces valeurs ou d'utiliser d'autres propriétés à partir du lien ci-dessus.

231
Devourant

Je suis assez en retard, mais tout utilisateur cherchant cette information 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éfinissent la quantité de remplissage à partir de la gauche et du haut. J'espère que cela aidera.

76
Aman Virk

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

Pour les personnes intéressées, 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 a rien à faire avec les valeurs "left" ou "top". Mais plutôt que le:

Les dimensions de chart et de chart-area sont définies et définies sur la même valeur

En tant qu'amendement à ma réponse. Ce qui précède va en effet résoudre le problème "excessif" de remplissage/marge/espace. 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 la carte afin d'obtenir un résultat légèrement inférieur à la largeur/hauteur extérieure. Cela "dira" à l'API de graphique qu'il y a suffisamment d'espace pour afficher ces propriétés. Sinon, ils seront volontiers exclus.

54
pim

Il y a cette possibilité comme mentionné par Aman Virk :

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, tels que ColumnChart et celui avec des colonnes verticales, il vous faut une marge pour afficher les étiquettes de ces lignes.

Si vous enlevez cette marge, vous ne verrez apparaître qu'une partie des étiquettes, voire aucune.

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

13
MmynameStackflow

Il manque dans la documentation (j'utilise la version 43), mais vous pouvez utiliser les propriétés right et en bas 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 de réponse complètes et d'empêcher le recadrage des étiquettes d'axe ou des légendes.

12
Rob

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

options: {
  theme: 'maximized'
}

à partir des documents cartographiques Google:

Actuellement, un seul thème est disponible:

'maximized' - Agrandit la surface 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'}
0
Ludo - Off the record