Entfernen Sie Auffüllungen oder Ränder aus Google Charts

Lesezeit: 6 Minuten

Benutzer-Avatar
Paul Armdam

// 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 Auffüllungen oder Ränder?

  • Wenn jemand rechts begründen möchte, weil Sie Messungen auf der linken Seite des Liniendiagramms haben, chartArea: {width: '70%', left: '30%'} hat es mir angetan. Quelle: code.google.com/p/google-visualization-api-issues/issues/…

    – IsmailS

    21. November 2014 um 6:53 Uhr

  • @IsmailS, was wäre, wenn ich eine Auffüllung oder einen Rand zwischen Diagramm und Text wie hier sehen möchte – prnt.sc/8Sxqrp270e9-

    – vishal

    18. Februar um 11:20 Uhr

Benutzer-Avatar
0eigenau

Durch Hinzufügen und Optimieren einiger Konfigurationsoptionen, die in der aufgeführt sind API-Dokumentation, können Sie viele verschiedene Stile erstellen. Zum Beispiel, hier ist eine variante Dadurch wird der größte Teil des zusätzlichen Leerzeichens entfernt, indem die chartArea.width zu 100% und chartArea.height zu 80% und Bewegen der legend.position zu Unterseite:

// 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 aus dem obigen Link zu verwenden.

Benutzer-Avatar
Aman Virk

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 übergeben Diagrammbereich.

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

Die Optionen „Links“ und „Oben“ definieren die Füllmenge von links und oben. Hoffe, das wird helfen.

  • die chartArea.top hat den Trick für mein div mit dynamischer Größe gemacht. Vielen Dank.

    – Blamkin86

    12. Juni 2015 um 14:45 Uhr

Benutzer-Avatar
pim

Ich kam wie die meisten Leute mit demselben Problem hier an und ging schockiert, dass keine der Antworten auch nur im Entferntesten funktionierte.

Für alle Interessierten 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 “linken” oder “oberen” Werten zu tun. Sondern dass die:

Abmessungen der beiden Diagramm und Diagrammbereich sind SET und auf den GLEICHEN WERT gesetzt

Als Ergänzung zu meiner Antwort. Das obige wird in der Tat das “übermäßige” Polsterungs-/Rand-/Leerzeichenproblem lösen. Allerdings, wenn Sie möchten enthalten Achsenbeschriftungen und/oder eine Legende Sie müssen die Höhe und Breite des Diagrammbereichs auf etwas unterhalb der äußeren Breite/Höhe reduzieren. Dadurch wird der Diagramm-API mitgeteilt, dass genügend Platz vorhanden ist, um diese Eigenschaften anzuzeigen. Sonst schließt es sie gerne aus.

  • Als Ergänzung zu meiner Antwort. Dies wird in der Tat das “übermäßige” Problem mit Polsterung/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 auf etwas unterhalb der äußeren Breite/Höhe reduzieren. Dadurch wird der Diagramm-API mitgeteilt, dass genügend Platz vorhanden ist, um diese Eigenschaften anzuzeigen. Sonst schließt es sie gerne aus.

    – pim

    29. Mai 2015 um 13:03 Uhr

  • Ich denke, der Grund, warum die anderen Lösungen für Sie nicht funktionierten, ist wahrscheinlich, dass sie davon ausgingen, dass das Diagramm in ein DIV eingefügt wurde, das bereits voreingestellte Breiten- und Höhenattribute hatte, aber Sie hatten das nicht getan. Es ist eine gute Idee, die Höhe und Breite im HTML voreinzustellen, damit sich das Layout der Seite nicht ändert, wenn der Graph sie füllt. Dadurch wird verhindert, dass Dinge beim Laden auf der Seite “herumspringen”.

    – David Burton

    30. März 2016 um 17:08 Uhr


  • @Dave danke für den Vorschlag, aber ich stimme nicht unbedingt zu. Es gibt viele Situationen, in denen Sie einfach nicht wissen, was diese Werte sein werden. Und es sieht so aus, als ob mindestens 15 andere Leute das Gefühl haben, dass mein Angebot angemessen ist.

    – pim

    30. März 2016 um 18:23 Uhr

  • Ich stimme zu, Pim. Wenn Sie die Breite und/oder Höhe nicht im Voraus kennen (vielleicht weil Sie möchten, dass sich die Seite responsiv anpasst), können Sie die Breite und Höhe nicht im DIV voreinstellen. Ich habe nur darauf hingewiesen, warum ich denke, dass die in den anderen Antworten angegebenen Lösungen für sie funktionierten, aber nicht für Sie funktionierten, und warum es eine gute Idee ist, die Breite und Höhe im DIV voreinzustellen, wenn Sie können.

    – David Burton

    31. März 2016 um 21:54 Uhr

  • Aus Gründen, auf die @DaveBurton hinweist, ist dies wahrscheinlich die richtige Antwort, wenn Sie mit CSS Grid arbeiten (was ich bin).

    – Stefan R

    31. Juli 2018 um 15:49 Uhr

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

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

So ist es möglich, die volle responsive Breite und Höhe zu nutzen und zu verhindern, dass Achsenbeschriftungen oder Legenden abgeschnitten werden.

Dafür gibt es ein spezielles Theme

options: {
  theme: 'maximized'
}

aus den Google-Diagrammdokumenten:

Derzeit ist nur ein Thema verfügbar:

‘maximized’ – 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'}

  • Dies scheint die beste Option zu sein. Nach Einstellung von theme: ‘maximized’ ist es noch möglich, das Erscheinungsbild zu optimieren, zB height: ‘90%’, textPosition: ‘out’, etc.

    – Jiri Kriz

    29. April 2020 um 9:54 Uhr

Benutzer-Avatar
Nathan Arthur

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

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 sollen. Wenn Sie die Möglichkeit haben, zwischen verschiedenen Arten von Diagrammen wie einem Säulendiagramm und dem Diagramm mit vertikalen Säulen zu wechseln, benötigen Sie etwas Spielraum, um die Beschriftungen dieser Linien anzuzeigen.

Wenn Sie diesen Rand wegnehmen, wird 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, sie zu wechseln, ändern Sie sie nicht.

  • Dies scheint die beste Option zu sein. Nach Einstellung von theme: ‘maximized’ ist es noch möglich, das Erscheinungsbild zu optimieren, zB height: ‘90%’, textPosition: ‘out’, etc.

    – Jiri Kriz

    29. April 2020 um 9:54 Uhr

1282150cookie-checkEntfernen Sie Auffüllungen oder Ränder aus Google Charts

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy