Entfernen Sie Polster oder Ränder aus 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>

Beispiel Geige

Wie entferne ich in diesem Beispiel Polster oder Ränder?

Durch Hinzufügen und Optimieren einiger Konfigurationsoptionen, die in der API-Dokumentation aufgeführt sind , können Sie viele verschiedene Stile erstellen. Zum Beispiel, hier ist eine Version , dass entfernt die größten Teil des zusätzlichen Leerraumes , der durch die Einstellung chartArea.widthauf 100% und chartArea.heightauf 80% und die Bewegungs legend.positionnach unten :

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

Wenn Sie es weiter optimieren möchten, versuchen Sie, diese Werte zu ändern oder andere Eigenschaften über den obigen Link zu verwenden.

Ich bin ziemlich spät dran, aber jeder Benutzer, der danach sucht, kann Hilfe bekommen. Innerhalb der Optionen können Sie einen neuen Parameter namens chartArea übergeben .

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

Die Optionen für links und oben definieren den Umfang der Polsterung von links und oben. Hoffe das wird helfen.

Ich kam hier an wie die meisten Leute mit dem gleichen Problem und war schockiert, dass keine der Antworten auch nur aus der Ferne funktionierte.

Für alle Interessierten ist hier die eigentliche Lösung:

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

Der Schlüssel hier hat nichts mit den Werten "left" oder "top" zu tun. Sondern dass die:

Die Abmessungen sowohl des Diagramms als auch des Diagrammbereichs werden auf den gleichen Wert gesetzt

Als Ergänzung zu meiner Antwort. Das Obige wird in der Tat das "übermäßige" Problem mit Auffüllen / Rand / Leerzeichen lösen. Wenn Sie jedoch Achsenbeschriftungen und / oder eine Legende einfügen möchten, müssen Sie die Höhe und Breite des Diagrammbereichs so verringern, dass sie geringfügig unter der äußeren Breite / Höhe liegen. Dadurch wird der Diagramm-API mitgeteilt, dass genügend Platz zum Anzeigen dieser Eigenschaften vorhanden ist. Andernfalls werden sie gerne ausgeschlossen.

Es fehlt in den Dokumenten (ich verwende Version 43), aber Sie können tatsächlich die rechte und untere Eigenschaft des Diagrammbereichs verwenden:

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

So ist es möglich, die volle Reaktionsbreite und -höhe zu verwenden und zu verhindern, dass Achsenbeschriftungen oder Legenden beschnitten werden.

Es gibt diese Möglichkeit wie Aman Virk erwähnt :

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

Aber denken Sie daran, dass die Polsterung und der Rand Sie nicht stören. Wenn Sie die Möglichkeit haben, zwischen verschiedenen Diagrammtypen wie einem ColumnChart und einem mit vertikalen Spalten zu wechseln, benötigen Sie einen gewissen Rand für die Anzeige der Beschriftungen dieser Linien.

Wenn Sie diesen Rand entfernen, werden am Ende nur ein Teil der Etiketten oder gar keine Etiketten angezeigt.

Wenn Sie also nur einen Diagrammtyp haben, können Sie den Rand und die Auffüllung ändern, wie Arman sagte. Aber wenn es möglich ist zu wechseln, ändern Sie sie nicht.

Es gibt ein spezielles Thema dafür

options: {
  theme: 'maximized'
}

aus den Google Chart-Dokumenten:

Derzeit ist nur ein Thema verfügbar:

'maximiert' - Maximiert den Bereich des Diagramms und zeichnet die Legende und alle Beschriftungen innerhalb des Diagrammbereichs. Legt die folgenden Optionen fest:

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