// 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>
Bagaimana saya menghapus padding atau margin dalam contoh ini?
javascript
html
charts
google-visualization
Paul Armdam
sumber
sumber
chartArea: {width: '70%', left: '30%'}
lakukan trik untuk saya. Sumber: code.google.com/p/google-visualization-api-issues/issues/…Jawaban:
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.width
untuk 100% danchartArea.height
untuk 80% dan memindahkanlegend.position
ke bawah :Jika Anda ingin menyetel lebih banyak, coba ubah nilai-nilai ini atau gunakan properti lain dari tautan di atas.
sumber
Saya agak terlambat tetapi setiap pengguna yang mencari ini bisa mendapatkan bantuan darinya. Di dalam opsi, Anda dapat melewatkan parameter baru bernama chartArea .
Opsi kiri dan atas akan menentukan jumlah bantalan dari kiri dan atas. Semoga ini bisa membantu.
sumber
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:
Kuncinya di sini tidak ada hubungannya dengan nilai "kiri" atau "atas". Melainkan bahwa:
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.
sumber
Tidak ada dalam dokumen (Saya menggunakan versi 43), tetapi Anda benar-benar dapat menggunakan properti kanan dan bawah dari area bagan:
Jadi dimungkinkan untuk menggunakan lebar & tinggi responsif penuh dan mencegah label sumbu atau legenda dipotong.
sumber
Ada kemungkinan ini seperti yang disebutkan Aman Virk :
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.
sumber
Ada tema yang tersedia khusus untuk ini
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:
sumber