wake-up-neo.com

Entfernen Sie Auffüllungen 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 Abstände oder Ränder?

143
Paul Armdam

Durch Hinzufügen und Optimieren einiger Konfigurationsoptionen, die in API-Dokumentation aufgeführt sind, können Sie viele verschiedene Stile erstellen. Zum Beispiel hier ist eine Version , das den größten Teil des zusätzlichen Leerzeichens entfernt, indem das chartArea.width bis 100% und chartArea.height zu 80% und bewegen Sie den legend.position nach 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.

231
Devourant

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

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

Die Optionen "Links" und "Oben" definieren den Abstand zwischen "Links" und "Oben". Hoffe das wird helfen.

76
Aman Virk

Ich kam hierher wie die meisten Leute mit demselben Problem und war schockiert, dass keine der Antworten auch nur aus der Ferne funktionierte.

Für alle Interessierten ist hier die aktuelle 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 von Diagramm und Diagrammbereich werden auf den GLEICHEN WERT gesetzt

Als Ergänzung zu meiner Antwort. Das oben Genannte löst in der Tat das "übermäßige" Problem der Auffüllung/des Randes/der Leerzeichen. Wenn Sie jedoch Achsenbeschriftungen und/oder eine Legende einschließen 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 für die Anzeige dieser Eigenschaften vorhanden ist. Andernfalls werden sie gerne ausgeschlossen.

54
pim

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

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

Denken Sie jedoch 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 Diagramm mit vertikalen Spalten zu wechseln, benötigen Sie einen gewissen Rand für die Anzeige der Beschriftungen dieser Zeilen.

Wenn Sie diesen Rand entfernen, werden nur ein Teil der Etiketten oder überhaupt keine Etiketten angezeigt.

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

13

Es fehlt in den Dokumenten (ich verwende Version 43), aber Sie können tatsächlich die rechts und nten -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 reaktionsschnelle Breite und Höhe zu nutzen und zu verhindern, dass Achsenbeschriftungen oder Legenden beschnitten werden.

12
Rob

Dafür gibt es ein spezielles Thema

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