Supprimer le remplissage ou les marges des graphiques Google


151

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


si quelqu'un veut justifier à droite parce que vous avez des mesures à gauche du graphique en courbes, a chartArea: {width: '70%', left: '30%'}fait l'affaire pour moi. Source: code.google.com/p/google-visualization-api-issues/issues/…
IsmailS

Réponses:


246

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.


78

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.


le chartArea.top a fait l'affaire pour mon div de taille dynamique. Merci.
Blamkin86

60

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.


2
Comme amendement à ma réponse. Cela 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.
pimbrouwers

1
Je pense que la raison pour laquelle les autres solutions n'ont pas fonctionné pour vous est probablement qu'elles ont supposé que le graphique était inséré dans un DIV qui avait déjà des attributs de largeur et de hauteur prédéfinis, mais vous ne l'aviez pas fait. C'est une bonne idée de prédéfinir la hauteur et la largeur dans le HTML afin que la mise en page de la page ne change pas lorsque le graphique est rempli. Cela empêchera les choses de "sauter" sur la page lors de son chargement.
Dave Burton

@Dave merci pour la suggestion, mais je ne suis pas nécessairement d'accord. Il existe de nombreuses situations où vous ne savez tout simplement pas quelles seront ces valeurs. Et il semble qu'au moins 15 autres personnes ont l'impression que mon offre est adéquate.
pimbrouwers

1
Je suis d'accord, Pim. Lorsque vous ne connaissez pas la largeur et / ou la hauteur à l'avance (peut-être parce que vous voulez que la page s'adapte de manière réactive), vous ne pouvez pas prédéfinir la largeur et la hauteur dans le DIV. Je voulais juste souligner pourquoi je pense que les solutions données dans les autres réponses ont fonctionné pour eux mais n'ont pas fonctionné pour vous, et pourquoi c'est une bonne idée de prédéfinir la largeur et la hauteur dans le DIV si vous le pouvez.
Dave Burton

1
Pour les raisons que @DaveBurton souligne, c'est probablement la bonne réponse si vous travaillez avec CSS Grid (ce que je suis)
Stephen R

14

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.


Pouvoir utiliser right est certainement un ajout intéressant, mais dans le cas d'un histogramme qui nécessite des nombres pour l'axe vertical, cela deviendra délicat lorsque les valeurs fluctuent un peu - par exemple un graphique avec des valeurs comprises entre 0 - 100 nécessiterait une valeur gauche de 20 pixels, mais 0 à 10 mil nécessiterait 100 pixels, et utiliser 100 pixels laisserait alors une marge assez grande, ce dont je pense que nous essayons tous de nous débarrasser :) À moins qu'il n'y en ait une option qui permet au graphique d'ajuster sa propre largeur qui me manque. Des réflexions sur la façon dont on pourrait résoudre ce problème?
user3800174

On dirait qu'ils l'ont documenté le 2 octobre 2015, ici: archive.is/lwbQY#selection-2997.0-3011.1
Dave Burton

13

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.


12

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

Cela semble la meilleure option. Après avoir défini le thème: 'maximisé', il est toujours possible d'ajuster l'apparence, par exemple hauteur: '90%', textPosition: 'out', etc.
Jiri Kriz
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.