Hapus padding atau margin dari 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>

Contoh biola

Bagaimana saya menghapus padding atau margin dalam contoh ini?

Dengan menambahkan dan menyetel beberapa opsi konfigurasi yang tercantum dalam dokumentasi API , Anda dapat membuat banyak gaya berbeda. Sebagai contoh, di sini adalah versi yang menghilangkan sebagian besar ruang kosong ekstra dengan menetapkan chartArea.widthuntuk 100% dan chartArea.heightuntuk 80% dan memindahkan legend.positionke bawah :

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

Jika Anda ingin menyetel lebih banyak, coba ubah nilai-nilai ini atau gunakan properti lain dari tautan di atas.

Saya agak terlambat tetapi setiap pengguna yang mencari ini bisa mendapatkan bantuan darinya. Di dalam opsi, Anda dapat melewatkan parameter baru bernama chartArea .

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

Opsi kiri dan atas akan menentukan jumlah bantalan dari kiri dan atas. Semoga ini bisa membantu.

Saya tiba di sini seperti kebanyakan orang dengan masalah yang sama, dan pergi dengan kaget karena tidak ada jawaban yang bekerja dari jarak jauh.

Bagi siapa pun yang tertarik, inilah solusinya:

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

Kuncinya di sini tidak ada hubungannya dengan nilai "kiri" atau "atas". Melainkan bahwa:

Dimensi grafik dan area grafik adalah SET dan diatur ke NILAI SAMA

Sebagai perubahan atas jawaban saya. Hal di atas memang akan menyelesaikan masalah padding / margin / whitespace "berlebihan". Namun, jika Anda ingin menyertakan label sumbu dan / atau legenda Anda perlu mengurangi ketinggian & lebar area bagan sehingga sesuatu sedikit di bawah lebar / tinggi luar. Ini akan "memberi tahu" grafik API bahwa ada cukup ruang untuk menampilkan properti ini. Kalau tidak, itu akan dengan senang hati mengecualikan mereka.

Tidak ada dalam dokumen (Saya menggunakan versi 43), tetapi Anda benar-benar dapat menggunakan properti kanan dan bawah dari area bagan:

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

Jadi dimungkinkan untuk menggunakan lebar & tinggi responsif penuh dan mencegah label sumbu atau legenda dipotong.

Ada kemungkinan ini seperti yang disebutkan Aman Virk :

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

Tetapi perlu diingat bahwa bantalan dan margin tidak ada di sana untuk mengganggu Anda. Jika Anda memiliki kemungkinan untuk beralih di antara berbagai jenis bagan seperti ColumnChart dan yang dengan kolom vertikal, maka Anda memerlukan margin untuk menampilkan label garis tersebut.

Jika Anda mengambil margin itu maka Anda hanya akan menunjukkan sebagian label atau tidak ada label sama sekali.

Jadi jika Anda hanya memiliki satu jenis grafik maka Anda dapat mengubah margin dan bantalan seperti yang dikatakan Arman. Tetapi jika mungkin untuk beralih, jangan mengubahnya.

Ada tema yang tersedia khusus untuk ini

options: {
  theme: 'maximized'
}

dari Google chart docs:

Saat ini hanya satu tema yang tersedia:

'memaksimalkan' - Memaksimalkan area grafik, dan menggambar legenda dan semua label di dalam area grafik. Atur opsi berikut:

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