Hapus padding atau margin dari Google Charts

151

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

Paul Armdam
sumber
jika ada yang ingin membenarkan karena Anda memiliki pengukuran di sebelah kiri bagan garis, chartArea: {width: '70%', left: '30%'}lakukan trik untuk saya. Sumber: code.google.com/p/google-visualization-api-issues/issues/…
IsmailS

Jawaban:

246

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.

Benar-benar telur
sumber
78

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.

Aman Virk
sumber
chartArea.top melakukan trik untuk div saya yang berukuran dinamis. Terima kasih.
Blamkin86
60

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.

pimbrouwers
sumber
2
Sebagai perubahan atas jawaban saya. Ini memang akan memecahkan 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.
pimbrouwers
1
Saya pikir alasan solusi lain tidak bekerja untuk Anda mungkin karena mereka mengasumsikan bagan tersebut dimasukkan ke dalam DIV yang sudah memiliki atribut width dan height yang telah ditetapkan, tetapi Anda belum melakukannya. Ini adalah ide yang baik untuk mengatur tinggi dan lebar dalam HTML sehingga tata letak halaman tidak berubah ketika grafik terisi. Itu akan mencegah hal-hal dari "melompat-lompat" pada halaman saat memuat.
Dave Burton
@ Terima kasih atas sarannya, tapi saya belum tentu setuju. Ada banyak situasi di mana Anda hanya tidak tahu nilai-nilai apa yang akan terjadi. Dan sepertinya setidaknya 15 orang merasa penawaran saya memadai.
pimbrouwers
1
Saya setuju, Pim. Ketika Anda tidak tahu lebar dan / atau tinggi sebelumnya (mungkin karena Anda ingin halaman beradaptasi secara responsif), Anda tidak dapat mempra-atur lebar & tinggi dalam DIV. Saya baru saja menunjukkan mengapa saya pikir solusi yang diberikan dalam jawaban lain bekerja untuk mereka tetapi tidak berhasil untuk Anda, dan mengapa itu ide yang baik untuk mengatur lebar dan tinggi dalam DIV jika Anda bisa.
Dave Burton
1
Untuk alasan @DaveBurton tunjukkan, ini kemungkinan jawaban yang benar jika bekerja dengan CSS Grid (yang saya)
Stephen R
14

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.

rampok
sumber
Mampu menggunakan benar jelas merupakan tambahan yang bagus, namun dalam kasus bagan kolom yang membutuhkan angka untuk sumbu vertikal itu akan menjadi rumit ketika nilai berfluktuasi dengan bit yang baik - misalnya grafik dengan nilai yang berkisar dari 0 - 100 akan membutuhkan nilai kiri 20 piksel, tetapi 0 - 10 juta akan membutuhkan 100 piksel, dan menggunakan 100 piksel maka akan meninggalkan margin yang cukup besar yang menurut saya kita semua berusaha untuk menyingkirkan :) Kecuali jika ada opsi yang memungkinkan bagan untuk menyesuaikan lebar sendiri yang saya lewatkan. Adakah pemikiran tentang bagaimana seseorang dapat menyelesaikan ini?
user3800174
Sepertinya mereka mendokumentasikannya 2 Oktober 2015, di sini: archive.is/lwbQY#selection-2997.0-3011.1
Dave Burton
13

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.

MmynameStackflow
sumber
11

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'}
Ludo - Tidak direkam
sumber
Ini sepertinya pilihan terbaik. Setelah menetapkan tema: 'maksimal' masih dimungkinkan untuk menyempurnakan penampilan, mis. Tinggi: '90%', textPosisi: 'out', dll.
Jiri Kriz