Dolguları veya kenar boşluklarını Google Charts'tan kaldırın

// 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>

Örnek keman

Bu örnekte dolgu veya kenar boşluklarını nasıl kaldırabilirim?

API belgelerinde listelenen bazı yapılandırma seçeneklerini ekleyerek ve ayarlayarak birçok farklı stil oluşturabilirsiniz. Örneğin, burada bir sürümüdür olduğunu belirleyerek en fazladan boş alan kaldırır chartArea.widthiçin % 100 ve chartArea.heightiçin % 80 ve hareketli legend.positioniçin alt :

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

Daha fazla ayarlamak istiyorsanız, bu değerleri değiştirmeyi veya yukarıdaki bağlantıdan diğer özellikleri kullanmayı deneyin.

Oldukça geç kaldım ama bunu arayan herhangi bir kullanıcı yardım alabilir. Seçeneklerin içinde chartArea adlı yeni bir parametre iletebilirsiniz .

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

Sol ve üst seçenekler soldan ve üstten dolgu miktarını tanımlar. Umarım bu yardımcı olur.

Bu sorun ile çoğu insan gibi buraya geldi ve hiçbir cevap uzaktan bile çalıştı şok bıraktı.

İlgilenen herkes için asıl çözüm:

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

Buradaki anahtarın "sol" veya "üst" değerlerle ilgisi yoktur. Ama bunun yerine:

Her iki boyutları grafik ve grafik-alana aynı değere ayarlanır ve kümesidir

Cevabımda bir değişiklik olarak. Yukarıdakiler gerçekten de "aşırı" dolgu / marj / boşluk sorununu çözecektir. Bununla birlikte, eksen etiketleri ve / veya bir gösterge eklemek istiyorsanız, grafik alanının yüksekliğini ve genişliğini, dış genişliğin / yüksekliğin biraz altında bir şekilde azaltmanız gerekir. Bu, grafik API'sine bu özellikleri görüntülemek için yeterli alan olduğunu "söyleyecektir". Aksi takdirde onları mutlu bir şekilde hariç tutacaktır.

Belgelerde eksik (sürüm 43 kullanıyorum), ancak aslında grafik alanının sağ ve alt özelliğini kullanabilirsiniz :

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

Bu nedenle, tam duyarlı genişlik ve yükseklik kullanmak ve eksen etiketlerinin veya açıklamaların kırpılmasını önlemek mümkündür.

Aman Virk gibi bu olasılık var :

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

Ancak, dolgu ve kenar boşluğunun sizi rahatsız etmek için orada olmadığını unutmayın. Bir ColumnChart ve dikey sütunları olan grafikler gibi farklı grafik türleri arasında geçiş yapma olanağınız varsa, bu satırların etiketlerini görüntülemek için biraz kenar boşluğuna ihtiyacınız vardır.

Bu kenar boşluğunu alırsanız, etiketlerin yalnızca bir kısmını gösterir veya hiç etiket göstermezsiniz.

Yani sadece bir grafik türünüz varsa, o zaman Arman'ın dediği gibi kenar boşluğunu ve dolguyu değiştirebilirsiniz. Ancak geçiş yapmak mümkünse bunları değiştirmeyin.

Bunun için özel olarak kullanılabilecek bir tema var

options: {
  theme: 'maximized'
}

Google grafik belgelerinden:

Şu anda yalnızca bir tema mevcut:

'maksimize' - Grafiğin alanını en üst düzeye çıkarır ve açıklamaları ve tüm etiketleri grafik alanı içine çizer. Aşağıdaki seçenekleri ayarlar:

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