Rimuovi il riempimento o i margini dai grafici di 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>

Esempio di violino

Come rimuovere padding o margini in questo esempio?

Aggiungendo e ottimizzando alcune opzioni di configurazione elencate nella documentazione dell'API , è possibile creare molti stili diversi. Per esempio, qui è una versione che elimina gran parte dello spazio vuoto in più impostando il chartArea.widthal 100% e chartArea.heightal 80% e spostando il legend.positiona fondo :

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

Se vuoi ottimizzarlo di più, prova a cambiare questi valori o usando altre proprietà dal link sopra.

Sono in ritardo, ma qualsiasi utente alla ricerca di questo può ottenere aiuto da esso. All'interno delle opzioni è possibile passare un nuovo parametro chiamato chartArea .

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

Le opzioni sinistra e in alto definiranno la quantità di imbottitura da sinistra e in alto. Spero che questo possa aiutare.

Sono arrivato qui come la maggior parte delle persone con lo stesso problema e sono rimasto scioccato dal fatto che nessuna delle risposte ha funzionato a distanza.

Per chiunque sia interessato, ecco la soluzione effettiva:

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

La chiave qui non ha nulla a che fare con i valori "left" o "top". Ma piuttosto che il:

Le dimensioni del grafico e dell'area del grafico sono impostate e impostate sullo STESSO VALORE

Come emendamento alla mia risposta. Quanto sopra risolverà effettivamente il problema "eccessivo" di riempimento / margine / spazio bianco. Tuttavia, se si desidera includere etichette degli assi e / o una legenda, è necessario ridurre l'altezza e la larghezza dell'area del grafico in modo che sia leggermente inferiore alla larghezza / altezza esterna. Questo "dirà" all'API del grafico che c'è spazio sufficiente per visualizzare queste proprietà. Altrimenti li escluderà felicemente.

Manca nei documenti (sto usando la versione 43), ma in realtà puoi usare la proprietà destra e in basso dell'area del grafico:

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

Quindi è possibile utilizzare la larghezza e l'altezza reattive complete e impedire che vengano ritagliate etichette o legende degli assi.

C'è questa possibilità, come menzionato da Aman Virk :

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

Ma tieni presente che l'imbottitura e il margine non sono lì per disturbarti. Se hai la possibilità di passare tra diversi tipi di grafici come un ColumnChart e quello con colonne verticali, allora hai bisogno di un margine per visualizzare le etichette di quelle linee.

Se togli quel margine, finirai per mostrare solo una parte delle etichette o nessuna etichetta.

Quindi, se hai solo un tipo di grafico, puoi modificare il margine e il riempimento come ha detto Arman. Ma se è possibile cambiare non cambiarli.

C'è un tema disponibile appositamente per questo

options: {
  theme: 'maximized'
}

dai documenti di Google Chart:

Attualmente è disponibile solo un tema:

'massimizzato': ingrandisce l'area del grafico e disegna la legenda e tutte le etichette all'interno dell'area del grafico. Imposta le seguenti opzioni:

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