Usuń dopełnienie lub marginesy z 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>

Przykładowe skrzypce

Jak usunąć dopełnienie lub marginesy w tym przykładzie?

Dodając i dostrajając niektóre opcje konfiguracyjne wymienione w dokumentacji API , można tworzyć wiele różnych stylów. Na przykład, tutaj jest wersja , że usuwa większość dodatkowego pustego miejsca przez ustawienie chartArea.widthna 100% i chartArea.heightdo 80% i przesunięcie legend.positiondo dołu :

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

Jeśli chcesz go bardziej dostroić, spróbuj zmienić te wartości lub użyć innych właściwości z linku powyżej.

Jestem dość spóźniony, ale każdy użytkownik szukający tego może uzyskać pomoc. Wewnątrz opcji możesz przekazać nowy parametr o nazwie chartArea .

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

Opcje Left i Top będą definiować ilość wypełnienia od lewej i od góry. Mam nadzieję, że to pomoże.

Przybyłem tutaj jak większość ludzi z tym samym problemem i wyszedłem zszokowany, że żadna z odpowiedzi nie zadziałała nawet zdalnie.

Dla wszystkich zainteresowanych, oto rzeczywiste rozwiązanie:

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

Klucz tutaj nie ma nic wspólnego z wartościami „left” lub „top”. Ale raczej:

Wymiary zarówno wykresu, jak i obszaru wykresu są USTAWIONE i ustawione na SAMEJ WARTOŚĆ

Jako poprawka do mojej odpowiedzi. Powyższe rzeczywiście rozwiązuje problem „nadmiernego” dopełnienia / marginesu / białych znaków. Jeśli jednak chcesz dołączyć etykiety osi i / lub legendę , będziesz musiał zmniejszyć wysokość i szerokość obszaru wykresu, tak aby znajdował się nieco poniżej zewnętrznej szerokości / wysokości. To „powie” interfejsowi API wykresu, że jest wystarczająco dużo miejsca na wyświetlenie tych właściwości. W przeciwnym razie z radością je wykluczy.

Brakuje go w dokumentach (używam wersji 43), ale w rzeczywistości możesz użyć prawej i dolnej właściwości obszaru wykresu:

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

Możliwe jest więc użycie pełnej responsywnej szerokości i wysokości oraz zapobieganie przycinaniu etykiet osi lub legend.

Istnieje taka możliwość, jak wspomniał Aman Virk :

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

Pamiętaj jednak, że wyściółka i margines nie przeszkadzają. Jeśli masz możliwość przełączania się między różnymi typami wykresów, takimi jak ColumnChart i ten z pionowymi kolumnami, potrzebujesz marginesu do wyświetlania etykiet tych linii.

Jeśli usuniesz ten margines, w końcu zobaczysz tylko część etykiet lub nie zobaczysz ich wcale.

Więc jeśli masz tylko jeden typ wykresu, możesz zmienić margines i wypełnienie, jak powiedział Arman. Ale jeśli jest to możliwe, nie zmieniaj ich.

Dostępny jest motyw specjalnie do tego celu

options: {
  theme: 'maximized'
}

z dokumentów wykresu Google:

Obecnie dostępny jest tylko jeden motyw:

„zmaksymalizowany” - maksymalizuje obszar wykresu i rysuje legendę oraz wszystkie etykiety wewnątrz obszaru wykresu. Ustawia następujące opcje:

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