Ringkasan
Diagram batang Google dirender di browser menggunakan SVG atau VML, mana saja yang sesuai untuk browser pengguna. Seperti semua diagram Google, diagram batang menampilkan tooltip saat pengguna mengarahkan kursor ke data. Untuk versi vertikal diagram ini, lihat diagram kolom.
Contoh
Panel mewarnai
Mari kita gambar kepadatan empat logam mulia:
Di atas, semua warna adalah biru default. Ini karena semuanya merupakan bagian dari rangkaian yang sama; jika ada rangkaian kedua, seri akan diberi warna merah. Kita dapat menyesuaikan warna ini dengan peran gaya:
Ada tiga cara untuk memilih warna, dan tabel data kami menampilkan semuanya: nilai RGB, nama warna dalam bahasa Inggris, dan deklarasi seperti CSS:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Gaya batang
Peran gaya memungkinkan Anda mengontrol beberapa aspek tampilan batang dengan deklarasi seperti CSS:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Kami tidak merekomendasikan Anda untuk mencampur gaya terlalu bebas di dalam diagram—pilih gaya dan tetap menggunakannya—tetapi untuk menunjukkan semua atribut gaya, berikut adalah sampel:
Dua batang pertama masing-masing menggunakan color
tertentu (yang pertama dengan nama bahasa Inggris, yang kedua dengan nilai RGB). Tidak ada opacity
yang dipilih, sehingga versi default 1.0
(sepenuhnya tidak tembus pandang) digunakan; itulah sebabnya panel kedua mengaburkan
gridline di belakangnya. Di panel ketiga, opacity
0,2
digunakan, yang menampilkan garis petak. Pada panel keempat, tiga atribut
gaya digunakan: stroke-color
dan stroke-width
untuk menggambar batas, dan fill-color
untuk menentukan warna persegi panjang di dalamnya. Panel paling kanan juga menggunakan stroke-opacity
dan fill-opacity
untuk memilih opasitas batas dan pengisian:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Memberi label pada batang
Diagram memiliki beberapa jenis label, seperti label centang, label legenda, dan label di tooltip. Di bagian ini, kita akan melihat cara menempatkan label di dalam (atau di dekat) batang dalam diagram batang.
Misalnya kita ingin menganotasi setiap batang dengan simbol kimia yang sesuai. Kita dapat melakukannya dengan peran annotation:
Dalam tabel data, kita menentukan kolom baru dengan { role:
'annotation' }
untuk menyimpan label batang:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Meskipun pengguna dapat mengarahkan kursor ke batang untuk melihat nilai data, Anda mungkin ingin menyertakannya pada batang itu sendiri:
Ini sedikit lebih rumit daripada yang seharusnya, karena kita membuat DataView
untuk menentukan anotasi untuk setiap batang.
<script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } </script> <div id="barchart_values" style="width: 900px; height: 300px;"></div>
Jika ingin memformat nilai secara berbeda, kita dapat menentukan pemformat dan menggabungkannya ke dalam fungsi seperti ini:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Kemudian, kita dapat memanggilnya dengan calc: getValueAt.bind(undefined, 1)
.
Jika label terlalu besar untuk muat sepenuhnya di dalam batang, label akan ditampilkan di luar:
Diagram batang bertumpuk
Diagram batang bertumpuk adalah diagram batang yang menempatkan nilai terkait di atas satu sama lain. Jika ada nilai negatif, nilai tersebut akan ditumpuk dalam urutan terbalik di bawah garis dasar sumbu diagram. Diagram batang bertumpuk biasanya digunakan saat kategori secara alami terbagi menjadi komponen. Misalnya, pertimbangkan beberapa penjualan buku hipotetis, dibagi berdasarkan genre, dan dibandingkan dari waktu ke waktu:
Anda membuat diagram batang bertumpuk dengan menetapkan
opsi isStacked
ke true
:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true };
Diagram batang bertumpuk juga mendukung penumpukan 100%, dan tumpukan elemen pada setiap nilai domain diskalakan ulang sehingga berjumlah hingga 100%. Opsi untuk ini adalah
isStacked: 'percent'
, yang memformat setiap nilai sebagai persentase 100%, dan
isStacked: 'relative'
, yang memformat setiap nilai sebagai pecahan 1. Ada juga opsi isStacked: 'absolute'
, yang secara fungsional setara dengan isStacked: true
.
Perhatikan bahwa pada diagram tumpuk 100% di sebelah kanan, nilai centang didasarkan pada skala 0-1 relatif sebagai pecahan 1, tetapi nilai sumbu ditampilkan sebagai persentase. Ini karena
tick sumbu persentase adalah hasil penerapan format "#.##%" ke nilai skala 0-1 relatif. Saat menggunakan isStacked: 'percent'
, pastikan untuk menentukan tick menggunakan skala 0-1 relatif.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Membuat diagram batang Material
Pada tahun 2014, Google mengumumkan pedoman yang dimaksudkan untuk mendukung tampilan dan nuansa yang sama di seluruh properti dan aplikasinya (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya Desain Material. Kami akan menyediakan versi "Material" dari semua diagram inti kami; Anda dapat menggunakannya jika Anda menyukai tampilannya.
Membuat Diagram Batang Material mirip dengan membuat diagram yang sekarang kita sebut Diagram Batang "Klasik". Anda memuat Google Visualization API (meskipun dengan paket 'bar'
, bukan paket 'corechart'
), tentukan tabel data, lalu buat objek (tetapi bukan class google.charts.Bar
, bukan google.visualization.BarChart
).
Catatan: Diagram Material tidak akan berfungsi di Internet Explorer versi lama. (IE8 dan versi sebelumnya tidak mendukung SVG, yang memerlukan Diagram Material.)
Diagram Batang Material memiliki banyak peningkatan kecil dibandingkan Diagram Batang Klasik, termasuk palet warna yang lebih baik, sudut membulat, pemformatan label yang lebih jelas, spasi default yang lebih sempit antar-seri, gridline dan judul yang lebih lembut (dan penambahan subtitel).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="barchart_material" style="width: 900px; height: 500px;"></div> </body> </html>
Diagram Material tersedia dalam versi beta. Tampilan dan interaktivitas sebagian besar bersifat final, tetapi banyak opsi yang tersedia di Diagram Klasik belum tersedia di dalamnya. Anda dapat menemukan daftar opsi yang belum didukung dalam
masalah ini.
Selain itu, cara deklarasi opsi belum final. Jadi, jika Anda menggunakan salah satu
opsi klasik, Anda harus mengonversinya menjadi opsi material dengan mengganti baris ini:
chart.draw(data, options);
...dengan ini:
chart.draw(data, google.charts.Bar.convertOptions(options));
Penggunaan google.charts.Bar.convertOptions()
memungkinkan Anda memanfaatkan fitur-fitur tertentu, seperti opsi preset hAxis/vAxis.format
.
Diagram ganda-X
Catatan: Sumbu Dual-X hanya tersedia untuk
Diagram material (yaitu yang memiliki paket bar
).
Terkadang, Anda mungkin ingin menampilkan dua seri dalam diagram batang, dengan dua sumbu x independen: sumbu atas untuk satu rangkaian, dan sumbu bawah untuk seri lainnya:
Perlu diperhatikan bahwa dua sumbu x tidak hanya diberi label secara berbeda ("parsec" versus "magnitudo semu"), tetapi masing-masing memiliki skala dan garis kisi tersendiri. Jika Anda ingin menyesuaikan perilaku ini, gunakan opsi hAxis.gridlines
.
Pada kode di bawah, opsi axes
dan series
bersama-sama menentukan tampilan dual-X
diagram. Opsi series
menentukan sumbu yang akan digunakan untuk
masing-masing ('distance'
dan 'brightness'
; keduanya
tidak harus ada hubungannya dengan nama kolom di
data). Opsi axes
kemudian menjadikan diagram ini sebagai diagram dual-X, dengan menempatkan sumbu 'apparent magnitude'
di bagian atas dan sumbu 'parsecs'
di bagian bawah.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Diagram Teratas
Catatan: Sumbu Top-X hanya tersedia untuk
Diagram material (yaitu yang memiliki paket bar
).
Jika Anda ingin menempatkan label dan judul sumbu X di bagian atas
diagram, bukan bagian bawah, Anda dapat melakukannya di diagram Material dengan
opsi axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="top_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Memuat
Nama paket google.charts.load
adalah "corechart"
.
Nama class visualisasinya adalah google.visualization.BarChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
Untuk Diagram Batang Material, nama paket google.charts.load
adalah "bar"
.
Nama class visualisasinya
adalah google.charts.Bar
.
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Format data
Baris: Setiap baris dalam tabel mewakili grup batang.
Kolom:
Kolom 0 | Kolom 1 | ... | Kolom N | |
---|---|---|---|---|
Tujuan: |
|
Nilai batang 1 dalam grup ini | ... | Nilai N batang di grup ini |
Jenis Data: |
|
angka | ... | angka |
Peran: | domain | data | ... | data |
Peran kolom opsional: | ... |
Opsi konfigurasi
Name | |
---|---|
animasi.durasi |
Durasi animasi, dalam milidetik. Untuk mengetahui detailnya, lihat dokumentasi animasi. Jenis: angka
Default: 0
|
animasi.easing |
Fungsi easing diterapkan pada animasi. Tersedia opsi-opsi berikut:
Jenis: string
Default: 'linear'
|
animasi.mulai |
Menentukan apakah diagram akan dianimasikan pada gambar awal. Jika Jenis: boolean
Default false
|
anotasi.selaluDi Luar |
Dalam diagram Batang
dan
Kolom, jika ditetapkan ke Jenis: boolean
Default: false (salah)
|
anotasi.datum |
Untuk diagram yang mendukung anotasi, objek
annotations.datum memungkinkan Anda mengganti pilihan Google Chart untuk anotasi yang disediakan untuk elemen data individual (seperti nilai yang ditampilkan dengan setiap batang pada diagram batang). Anda dapat mengontrol warna
dengan annotations.datum.stem.color , panjang batang
dengan annotations.datum.stem.length , dan gaya dengan annotations.datum.style .
Objek Type:
Default: warna "black"; panjangnya 12; gaya adalah "point".
|
anotasi.domain |
Untuk diagram yang mendukung
anotasi,
objek
annotations.domain memungkinkan Anda mengganti
pilihan Google Chart untuk anotasi yang disediakan untuk domain (sumbu utama
diagram, seperti sumbu X pada diagram garis
standar). Anda dapat mengontrol warna
dengan annotations.domain.stem.color , panjang batang
dengan annotations.domain.stem.length , dan gaya dengan annotations.domain.style .
Objek Type:
Default: warna "hitam"; panjangnya 5; gaya adalah "titik".
|
annotation.boxStyle |
Untuk diagram yang mendukung anotasi, objek var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Opsi ini saat ini didukung untuk diagram area, batang, kolom, kombinasi, garis, dan sebar. Ini tidak didukung oleh Diagram Anotasi. Objek Type:
Default: null
|
anotasi.highContrast |
Untuk diagram yang mendukung
anotasi,
boolean
annotations.highContrast memungkinkan Anda mengganti pilihan
warna anotasi di Google Chart. Secara default, annotations.highContrast disetel ke benar (true), yang menyebabkan
Diagram memilih warna anotasi dengan kontras yang baik: warna terang pada latar belakang gelap, dan
gelap pada terang. Jika Anda menyetel annotations.highContrast ke false dan tidak menentukan warna anotasi Anda sendiri, Google Chart akan menggunakan warna seri default untuk anotasi tersebut:
Jenis: boolean
Default: true (benar):
|
anotasi.stem |
Untuk diagram yang mendukung anotasi, objek
annotations.stem memungkinkan Anda mengganti pilihan Google Chart untuk gaya stem. Anda dapat mengontrol warna
dengan annotations.stem.color dan panjang batang
dengan annotations.stem.length . Perhatikan bahwa opsi panjang stem tidak berpengaruh pada anotasi dengan gaya 'line' : untuk anotasi datum 'line' , panjang stem selalu sama dengan teks, dan untuk anotasi domain 'line' , stem memanjang di seluruh diagram.
Objek Type:
Default: warna "black"; panjangnya adalah 5 untuk anotasi domain dan 12 untuk anotasi datum.
|
anotasi.gaya |
Untuk diagram yang mendukung
anotasi,
opsi
annotations.style memungkinkan Anda mengganti
pilihan jenis anotasi di Google Chart. Ini dapat berupa 'line' atau 'point' .
Jenis: string
Default: 'point'
|
annotation.textStyle |
Untuk diagram yang mendukung anotasi, objek
annotations.textStyle mengontrol tampilan teks anotasi:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Opsi ini saat ini didukung untuk diagram area, batang, kolom, kombinasi, garis, dan sebar. Ini tidak didukung oleh Diagram Anotasi . Objek Type:
Default: null
|
axeTitlesPosition |
Tempat untuk menempatkan judul sumbu, dibandingkan dengan area diagram. Nilai yang didukung:
Jenis: string
Default: 'keluar'
|
backgroundColor |
Warna latar belakang untuk area utama diagram. Dapat berupa string warna HTML sederhana, misalnya: Jenis: string atau objek
Default: 'putih'
|
backgroundColor.stroke |
Warna garis batas diagram, sebagai string warna HTML. Jenis: string
Default: '#666'
|
backgroundColor.strokeWidth |
Lebar pembatas, dalam piksel. Jenis: angka
Default: 0
|
backgroundColor.fill |
Warna pengisi diagram, sebagai string warna HTML. Jenis: string
Default: 'putih'
|
lebar bar.grup |
Lebar grup batang, yang ditentukan dalam salah satu format berikut:
Jenis: angka atau string
Default: Rasio emas, sekitar '61,8%'.
|
bar |
Apakah batang dalam Bahan Bagan Batang vertikal atau horizontal. Opsi ini tidak berpengaruh pada Diagram Batang Klasik atau Diagram Kolom Klasik. Jenis: 'horizontal' atau 'vertical'
Default: 'vertikal'
|
diagramArea |
Objek dengan anggota untuk mengonfigurasi penempatan dan ukuran area diagram (tempat diagram itu sendiri digambar, tidak termasuk sumbu dan legenda). Dua format didukung: angka, atau
angka diikuti %. Angka sederhana adalah nilai dalam piksel; angka yang diikuti oleh % adalah
persentase. Contoh: Objek Type:
Default: null
|
chartArea.backgroundColor |
Warna latar belakang area diagram. Jika digunakan, string dapat berupa string hex (mis., '#fdc') atau nama warna dalam bahasa Inggris. Ketika sebuah objek digunakan, properti berikut dapat
disediakan:
Jenis: string atau objek
Default: 'putih'
|
chartArea.left |
Seberapa jauh gambar dari batas kiri. Jenis: angka atau string
Default: otomatis
|
baganArea.atas |
Seberapa jauh gambar dari batas atas. Jenis: angka atau string
Default: otomatis
|
chartArea.width |
Lebar area diagram. Jenis: angka atau string
Default: otomatis
|
chartArea.height |
Tinggi area diagram. Jenis: angka atau string
Default: otomatis
|
subjudul.diagram |
Untuk Diagram Material, opsi ini menentukan subtitel. Hanya Diagram Material yang mendukung subtitel. Jenis: string
Default: null
|
chart.title |
Untuk Diagram Material, opsi ini menentukan judul. Jenis: string
Default: null
|
warna |
Warna yang akan digunakan untuk elemen diagram. Array string, dengan setiap elemen adalah string warna HTML, misalnya: Jenis: Array string
Default: warna default
|
DataOpacity |
Transparansi titik data, dengan 1,0 menjadi sepenuhnya buram dan 0,0 sepenuhnya transparan. Di diagram sebar, histogram, batang, dan kolom, data ini mengacu pada data yang terlihat: titik di diagram sebar dan persegi panjang di diagram lainnya. Dalam diagram dengan memilih data akan menghasilkan titik, seperti diagram garis dan area, ini merujuk pada lingkaran yang muncul saat kursor diarahkan atau dipilih. Diagram kombinasi menunjukkan kedua perilaku tersebut, dan opsi ini tidak berpengaruh pada diagram lainnya. (Untuk mengubah opasitas garis tren, lihat Opasitas garis tren .) Jenis: angka
Default: 1.0
|
aktifkanInteraktivitas |
Apakah diagram menampilkan peristiwa berbasis pengguna atau bereaksi terhadap interaksi pengguna. Jika salah, diagram tidak akan menampilkan peristiwa 'pilih' atau peristiwa berbasis interaksi lainnya (tetapi akan menampilkan peristiwa siap atau error), dan tidak akan menampilkan pengarahan teks atau mengubah bergantung pada input pengguna. Jenis: boolean
Default: true (benar):
|
explorer |
Opsi Fitur ini bersifat eksperimental dan dapat berubah dalam rilis mendatang. Catatan: Penjelajah hanya berfungsi dengan sumbu berkelanjutan (seperti angka atau tanggal). Objek Type:
Default: null
|
explorer.actions |
Penjelajah Google Chart mendukung tiga tindakan:
Jenis: Array string
Default: ['dragToPan', 'rightClickToReset']
|
explorer.axe |
Secara default, pengguna dapat menggeser secara horizontal dan vertikal saat opsi Jenis: string
Default: pergeseran horizontal dan vertikal
|
explorer.keepInBounds |
Secara default, pengguna dapat menggeser di mana pun data berada. Untuk memastikan pengguna tidak menggeser melampaui diagram asli, gunakan Jenis: boolean
Default: false (salah)
|
explorer.maxZoomIn |
Jumlah maksimum yang dapat diperbesar oleh penjelajah. Secara default, pengguna dapat memperbesar cukup
sehingga hanya akan melihat 25% dari tampilan asli. Menetapkan
Jenis: angka
Default: 0,25
|
explorer.maxZoomOut |
Jumlah maksimum yang dapat dijelajahi oleh penjelajah. Secara default, pengguna akan dapat memperkecil cukup jauh sehingga diagram hanya akan menggunakan 1/4 dari ruang yang tersedia. Menetapkan
Jenis: angka
Default: 4
|
explorer.zoomDelta |
Saat pengguna memperbesar atau memperkecil, Jenis: angka
Default: 1,5
|
targetTarget |
Jenis entitas yang menerima fokus saat kursor diarahkan ke kursor. Juga memengaruhi entity mana yang dipilih oleh klik mouse, dan elemen tabel data mana yang terkait dengan peristiwa. Dapat berupa salah satu dari hal berikut:
Dalam FocusTarget 'category', tooltip menampilkan semua nilai kategori. Tindakan ini mungkin berguna untuk membandingkan nilai rangkaian yang berbeda. Jenis: string
Default: 'datum'
|
ukuranFont |
Ukuran font default, dalam piksel, dari semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu. Jenis: angka
Default: otomatis
|
NamaFont |
Tampilan font default untuk semua teks dalam diagram. Anda dapat menggantinya menggunakan properti untuk elemen diagram tertentu. Jenis: string
Default: 'chromebook'
|
forceIFrame |
Menggambar diagram di dalam frame inline. (Perhatikan bahwa di IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.) Jenis: boolean
Default: false (salah)
|
hAx |
Menentukan properti untuk sumbu horizontal individual, jika diagram memiliki beberapa sumbu horizontal. Setiap objek turunan adalah objek
Untuk menentukan diagram dengan beberapa sumbu horizontal, pertama-tama tentukan sumbu baru menggunakan
Properti ini dapat berupa objek atau array: objek adalah kumpulan objek, masing-masing dengan label numerik yang menentukan sumbu yang ditentukannya - ini adalah format yang ditampilkan di atas; array adalah array objek, satu per sumbu. Misalnya, notasi gaya array berikut identik dengan objek hAxes: { {}, // Nothing specified for axis 0 { title:'Losses', textStyle: { color: 'red' } } // Axis 1 Jenis: Array objek, atau objek dengan objek turunan
Default: null
|
Sumbu h |
Objek dengan anggota untuk mengonfigurasi berbagai elemen sumbu horizontal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Objek Type:
Default: null
|
hAxis.baseline |
Garis dasar untuk sumbu horizontal. Jenis: angka
Default: otomatis
|
hAxis.baselineColor |
Warna garis dasar untuk sumbu horizontal. Dapat berupa string warna HTML apa pun, misalnya: Jenis: angka
Default: 'hitam'
|
hAxis.direction |
Arah pertumbuhan nilai di sepanjang sumbu horizontal. Tentukan Jenis: 1 atau -1
Default: 1
|
hAxis.format |
String format untuk label sumbu numerik. Ini adalah subset dari
kumpulan pola ICU
. Misalnya,
Format sebenarnya yang diterapkan pada label berasal dari lokalitas API yang telah dimuat. Untuk detail selengkapnya, lihat memuat diagram dengan lokalitas tertentu .
Dalam menghitung nilai centang dan garis kisi, beberapa kombinasi alternatif dari semua opsi garis kisi yang relevan akan dipertimbangkan dan alternatif akan ditolak jika label centang yang diformat akan diduplikasi atau tumpang-tindih.
Jadi, Anda dapat menentukan Jenis: string
Default: otomatis
|
hAxis.gridline |
Objek dengan properti untuk mengonfigurasi garis kisi pada sumbu horizontal. Perhatikan bahwa garis kisi sumbu horizontal digambar secara vertikal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: {color: '#333', minSpacing: 20} Objek Type:
Default: null
|
hAxis.gridlines.color |
Warna garis kisi horizontal di dalam area diagram. Tentukan string warna HTML yang valid. Jenis: string
Default: '#CCC'
|
hAxis.gridlines.count |
Perkiraan jumlah garis kisi horizontal di dalam area diagram.
Jika Anda menentukan angka positif untuk Jenis: angka
Default: -1
|
hAxis.gridlines.units |
Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan garis kisi yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik. Format umumnya adalah: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Informasi tambahan dapat ditemukan di Tanggal dan Waktu. Objek Type:
Default: null
|
hAxis.minorGridlines |
Objek dengan anggota untuk mengonfigurasi garis petak kecil pada sumbu horizontal, mirip dengan opsi hAxis.gridlines. Objek Type:
Default: null
|
hAxis.minorGridlines.color |
Warna garis petak kecil horizontal di dalam area diagram. Tentukan string warna HTML yang valid. Jenis: string
Default: Gabungan antara warna petak dan latar belakang
|
hAxis.minorGridlines.count |
Opsi Jenis: angka
Default:1
|
hAxis.minorGridlines.units |
Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan minorGridlines yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik. Format umumnya adalah: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Informasi tambahan dapat ditemukan di Tanggal dan Waktu. Objek Type:
Default: null
|
hAxis.logScale |
Properti Jenis: boolean
Default: false (salah)
|
Jenis hAxis.scaleType |
Properti
Jenis: string
Default: null
|
hAxis.textStyle |
Objek yang menentukan gaya teks sumbu horizontal. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Objek Type:
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.textPosition |
Posisi teks sumbu horizontal, relatif terhadap area diagram. Nilai yang didukung: 'out', 'in', 'none'. Jenis: string
Default: 'keluar'
|
hAxis.ticks |
Mengganti tick sumbu X yang dibuat secara otomatis dengan array yang ditentukan. Setiap elemen array harus berupa nilai tick yang valid (seperti angka, tanggal, tanggal/waktu), atau objek. Jika berupa objek, properti tersebut harus memiliki properti
ViewWindow akan otomatis diperluas untuk menyertakan tick minimum dan maksimum, kecuali jika Anda menentukan Contoh:
Jenis: Array elemen
Default: otomatis
|
hAxis.title |
Properti Jenis: string
Default: null
|
hAxis.titleTextStyle |
Objek yang menentukan gaya teks judul sumbu horizontal. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Objek Type:
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
Memindahkan nilai maksimum sumbu horizontal ke nilai yang ditentukan; nilai ini akan berada tepat di sebagian besar diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih kecil dari nilai x maksimum data.
Jenis: angka
Default: otomatis
|
hAxis.minValue |
Memindahkan nilai min sumbu horizontal ke nilai yang ditentukan; nilai ini akan ke kiri di sebagian besar diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih besar dari nilai x minimum data.
Jenis: angka
Default: otomatis
|
hAxis.viewWindowMode |
Menentukan cara menskalakan sumbu horizontal untuk merender nilai dalam area diagram. Nilai string berikut didukung:
Jenis: string
Default: Setara dengan 'pretty', tetapi
haxis.viewWindow.min dan haxis.viewWindow.max lebih diutamakan jika digunakan.
|
hAxis.viewWindow |
Menentukan rentang pemangkasan sumbu horizontal. Objek Type:
Default: null
|
hAxis.viewWindow.max |
Nilai data horizontal maksimum yang akan dirender. Diabaikan saat Jenis: angka
Default: otomatis
|
hAxis.viewWindow.min |
Nilai data horizontal minimum yang akan dirender. Diabaikan saat Jenis: angka
Default: otomatis
|
tinggi |
Tinggi diagram, dalam piksel. Jenis: angka
Default: tinggi elemen penampung
|
Ditumpuk |
Jika disetel ke benar (true), tumpukan elemen untuk semua seri di setiap nilai domain. Catatan: Pada diagram Kolom, Area, dan SteppedArea, Google Chart membalik urutan item legenda agar lebih sesuai dengan tumpukan elemen seri (misalnya, seri 0 akan menjadi item legenda paling bawah). Ini tidak berlaku untuk Diagram Batang.
Opsi Opsi untuk
Untuk penumpukan 100%, nilai yang dihitung untuk setiap elemen akan muncul di tooltip setelah nilai yang sebenarnya.
Sumbu target akan ditetapkan secara default ke nilai skala berdasarkan skala 0-1 relatif sebagai pecahan 1 untuk
Penumpukan 100% hanya mendukung nilai data jenis Jenis: boolean/string
Default: false (salah)
|
legenda |
Objek dengan anggota untuk mengonfigurasi berbagai aspek legenda. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Objek Type:
Default: null
|
legend.pageIndex |
Awal indeks halaman berbasis nol yang dipilih untuk legenda. Jenis: angka
Default: 0
|
legenda.posisi |
Posisi legenda. Dapat berupa salah satu dari hal berikut:
Jenis: string
Default: 'kanan'
|
legenda.penyelarasan |
Penyelarasan legenda. Dapat berupa salah satu dari hal berikut:
Awal, tengah, dan akhir relatif terhadap gaya -- vertikal atau horizontal -- legenda. Misalnya, pada legenda 'right', 'start' dan 'end' berturut-turut berada di bagian atas dan bawah; untuk legenda 'top', masing-masing 'start' dan 'end' akan berada di kiri dan kanan area. Nilai defaultnya bergantung pada posisi legenda. Untuk legenda 'bottom', defaultnya adalah 'center'; legenda lainnya ditetapkan secara default ke 'start'. Jenis: string
Default: otomatis
|
legenda.teksGaya |
Objek yang menentukan gaya teks legenda. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Objek Type:
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
reverseKategori |
Jika disetel ke benar, akan menggambar rangkaian dari bawah ke atas. Defaultnya adalah menggambar atas ke bawah. Jenis: boolean
Default: false (salah)
|
orientasi |
Orientasi diagram. Jika ditetapkan ke Jenis: string
Default: 'horizontal'
|
serial |
Array objek, yang masing-masing menjelaskan format seri yang sesuai dalam diagram. Untuk menggunakan nilai default untuk suatu rangkaian, tentukan objek kosong {}. Jika rangkaian atau nilai tidak ditentukan, nilai global akan digunakan. Setiap objek mendukung properti berikut:
Anda bisa menentukan array objek, yang masing-masingnya berlaku untuk rangkaian dalam urutan yang diberikan, atau Anda dapat menentukan objek dengan setiap turunan memiliki kunci numerik yang menunjukkan rangkaian mana yang diterapkan padanya. Misalnya, dua deklarasi berikut identik, dan mendeklarasikan rangkaian pertama sebagai hitam dan tidak ada dalam legenda, serta yang keempat berwarna merah dan tidak ada dalam legenda: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Jenis: Array objek, atau objek dengan objek bertingkat
Default: {}
|
tema |
Tema adalah sekumpulan nilai opsi yang telah ditetapkan sebelumnya dan berfungsi bersama untuk mencapai perilaku diagram atau efek visual tertentu. Saat ini hanya tersedia satu tema:
Jenis: string
Default: null
|
judul |
Teks yang akan ditampilkan di atas diagram. Jenis: string
Default: tanpa judul
|
titlePosition |
Tempat untuk menempatkan judul diagram, dibandingkan dengan area diagram. Nilai yang didukung:
Jenis: string
Default: 'keluar'
|
titleTextStyle |
Objek yang menentukan gaya teks judul. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Objek Type:
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip |
Objek dengan anggota untuk mengonfigurasi berbagai elemen tooltip. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: {textStyle: {color: '#FF0000'}, showColorCode: true} Objek Type:
Default: null
|
tooltip.ignoreBounds |
Jika ditetapkan ke Catatan: Ini hanya berlaku untuk tooltip HTML. Jika ini diaktifkan dengan tooltip SVG, setiap overflow di luar batas diagram akan dipangkas. Lihat Menyesuaikan Konten Tooltip untuk detail selengkapnya. Jenis: boolean
Default: false (salah)
|
tooltip.isHtml |
Jika disetel ke benar (true), gunakan tooltip yang dirender HTML (bukan yang dirender SVG). Lihat Menyesuaikan Konten Tooltip untuk detail selengkapnya. Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Diagram Balon. Jenis: boolean
Default: false (salah)
|
tooltip.showColorCode |
Jika true, tampilkan kotak berwarna di samping informasi seri dalam tooltip. Defaultnya adalah true jika Jenis: boolean
Default: otomatis
|
tooltip.teksGaya |
Objek yang menentukan gaya teks tooltip. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Objek Type:
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.pemicu |
Interaksi pengguna yang menyebabkan tooltip ditampilkan:
Jenis: string
Default: 'fokus'
|
garis tren |
Menampilkan
garis tren
pada diagram yang mendukungnya. Secara default, garis tren linear digunakan, tetapi ini dapat disesuaikan dengan opsi
Garis tren ditentukan berdasarkan per seri, sehingga biasanya opsi Anda akan terlihat seperti ini: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Objek Type:
Default: null
|
trendsline.n.warna |
Warna garis tren , yang dinyatakan sebagai nama warna Inggris atau string heksadesimal. Jenis: string
Default: warna seri default
|
trenline.n.derajat |
Untuk
garis tren
dari Jenis: angka
Default: 3
|
trenlines.n.labelInLegend |
Jika disetel, garis tren akan muncul dalam legenda sebagai string ini. Jenis: string
Default: null
|
trendinglines.n.lineWidth |
Lebar garis garis tren , dalam piksel. Jenis: angka
Default: 2
|
trenlines.n.opacity |
Transparansi garis tren , dari 0.0 (transparan) ke 1.0 (buram). Jenis: angka
Default: 1.0
|
trenlines.n.pointSize |
Garis tren
disusun dengan memberi tanda titik pada diagram; opsi yang jarang diperlukan ini memungkinkan Anda
menyesuaikan ukuran titik. Opsi Jenis: angka
Default: 1
|
trenlines.n.pointsVisible |
Garis tren
disusun dengan memberi tanda titik pada diagram. Opsi Jenis: boolean
Default: true (benar):
|
trenlines.n.showR2 |
Apakah akan menampilkan koefisien determinasi dalam tooltip legenda atau garis tren. Jenis: boolean
Default: false (salah)
|
trenlines.n.type |
Apakah
garis tren
adalah Jenis: string
Default: linear
|
trenlines.n.visibleInLegend |
Apakah persamaan garis tren muncul dalam legenda. (Label ini akan muncul di tooltip garis tren.) Jenis: boolean
Default: false (salah)
|
Sumbu V |
Objek dengan anggota untuk mengonfigurasi berbagai elemen sumbu vertikal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Objek Type:
Default: null
|
vXx.baseline |
Properti
Opsi ini hanya didukung untuk sumbu
Jenis: angka
Default: otomatis
|
vAxis.baselineColor |
Menentukan warna dasar pengukuran untuk sumbu vertikal. Dapat berupa string warna HTML apa pun, misalnya:
Opsi ini hanya didukung untuk sumbu
Jenis: angka
Default: 'hitam'
|
vAxis.direction |
Arah pertumbuhan nilai di sepanjang sumbu vertikal. Secara default, nilai rendah
berada di bagian bawah diagram. Tentukan Jenis: 1 atau -1
Default: 1
|
format vAxis |
String format untuk label sumbu tanggal atau numerik.
Untuk label sumbu angka, ini adalah subset dari pemformatan desimal kumpulan pola ICU.
Misalnya,
Untuk label sumbu tanggal, ini adalah subset dari pemformatan tanggal kumpulan pola ICU.
Misalnya, Format sebenarnya yang diterapkan pada label berasal dari lokalitas API yang telah dimuat. Untuk detail selengkapnya, lihat memuat diagram dengan lokalitas tertentu .
Dalam menghitung nilai centang dan garis kisi, beberapa kombinasi alternatif dari semua opsi garis kisi yang relevan akan dipertimbangkan dan alternatif akan ditolak jika label centang yang diformat akan diduplikasi atau tumpang-tindih.
Jadi, Anda dapat menentukan
Opsi ini hanya didukung untuk sumbu
Jenis: string
Default: otomatis
|
baris vAxis.grid |
Objek dengan anggota untuk mengonfigurasi garis kisi pada sumbu vertikal. Perhatikan bahwa garis kisi sumbu vertikal digambar secara horizontal. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditunjukkan di sini: {color: '#333', minSpacing: 20}
Opsi ini hanya didukung untuk sumbu
Objek Type:
Default: null
|
vAxis.gridlines.color |
Warna garis kisi vertikal di dalam area diagram. Tentukan string warna HTML yang valid. Jenis: string
Default: '#CCC'
|
vAxis.gridlines.count |
Perkiraan jumlah garis kisi horizontal di dalam area diagram.
Jika Anda menentukan angka positif untuk Jenis: angka
Default: -1
|
vAxis.gridlines.units |
Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan garis kisi yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik. Format umumnya adalah: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Informasi tambahan dapat ditemukan di Tanggal dan Waktu. Objek Type:
Default: null
|
Garis Vektor Axis.minorGrid |
Objek dengan anggota untuk mengonfigurasi garis petak kecil pada sumbu vertikal, mirip dengan opsi vAxis.gridlines.
Opsi ini hanya didukung untuk sumbu
Objek Type:
Default: null
|
vAxis.minorGridlines.color |
Warna garis petak vertikal vertikal di dalam area diagram. Tentukan string warna HTML yang valid. Jenis: string
Default: Gabungan antara warna petak dan latar belakang
|
vAxis.minorGridlines.count |
Opsi minorGridlines.count sebagian besar tidak digunakan lagi, kecuali untuk menonaktifkan garis petak minor dengan menetapkan jumlahnya ke 0. Jumlah garis petak kecil bergantung pada interval antara garis kisi utama (lihat vAxis.gridlines.interval) dan ruang minimum yang diperlukan (lihat vAxis.minorGridlines.minSpacing). Jenis: angka
Default: 1
|
vAxis.minorGridlines.units |
Mengganti format default untuk berbagai aspek jenis data tanggal/tanggal/waktu ketika digunakan dengan minorGridlines yang dihitung diagram. Memungkinkan pemformatan untuk tahun, bulan, hari, jam, menit, detik, dan milidetik. Format umumnya adalah: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Informasi tambahan dapat ditemukan di Tanggal dan Waktu. Objek Type:
Default: null
|
Skala vAxis.log |
Jika true, membuat sumbu vertikal menjadi skala logaritmik. Catatan: Semua nilai harus positif.
Opsi ini hanya didukung untuk sumbu
Jenis: boolean
Default: false (salah)
|
Jenis vAxis.scale |
Properti
Jenis: string
Default: null
|
vAxis.textPosition |
Posisi teks sumbu vertikal, relatif terhadap area diagram. Nilai yang didukung: 'out', 'in', 'none'. Jenis: string
Default: 'keluar'
|
vAxis.textStyle |
Objek yang menentukan gaya teks sumbu vertikal. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Objek Type:
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Mengganti tick sumbu Y yang dibuat secara otomatis dengan array yang ditentukan. Setiap elemen array harus berupa nilai tick yang valid (seperti angka, tanggal, tanggal/waktu), atau objek. Jika berupa objek, properti tersebut harus memiliki properti
ViewWindow akan otomatis diperluas untuk menyertakan tick minimum dan maksimum, kecuali jika Anda menentukan Contoh:
Opsi ini hanya didukung untuk sumbu
Jenis: Array elemen
Default: otomatis
|
vAxis.title |
Properti Jenis: string
Default: tanpa judul
|
vAxis.titleTextStyle |
Objek yang menentukan gaya teks judul sumbu vertikal. Objek memiliki format ini: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Objek Type:
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
NilaiVaxis.max |
Memindahkan nilai maksimum sumbu vertikal ke nilai yang ditentukan; nilai ini akan naik ke sebagian besar
diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih kecil dari nilai y maksimum data.
Opsi ini hanya didukung untuk sumbu
Jenis: angka
Default: otomatis
|
NilaiVvx.minNilai |
Memindahkan nilai min sumbu vertikal ke nilai yang ditentukan; ini akan ke bawah di sebagian besar diagram. Diabaikan jika nilai ini ditetapkan ke nilai yang lebih besar dari nilai y minimum data.
Opsi ini hanya didukung untuk sumbu
Jenis: angka
Default: null
|
vAxis.viewWindowMode |
Menentukan cara menskalakan sumbu vertikal untuk merender nilai dalam area diagram. Nilai string berikut didukung:
Opsi ini hanya didukung untuk sumbu
Jenis: string
Default: Setara dengan 'pretty', tetapi
vaxis.viewWindow.min dan vaxis.viewWindow.max lebih diutamakan jika digunakan.
|
vAxis.viewWindow |
Menentukan rentang pemangkasan sumbu vertikal. Objek Type:
Default: null
|
vAxis.viewWindow.maks |
Diabaikan saat Jenis: angka
Default: otomatis
|
vAxis.viewWindow.min |
Diabaikan saat Jenis: angka
Default: otomatis
|
lebar |
Lebar diagram, dalam piksel. Jenis: angka
Default: lebar elemen yang memuatnya
|
Metode
Metode | |
---|---|
draw(data, options) |
Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa Jenis Hasil: tidak ada
|
getAction(actionID) |
Menampilkan objek tindakan tooltip dengan Return Type:
|
getBoundingBox(id) |
Menampilkan objek yang berisi kiri, atas, lebar, dan tinggi elemen diagram
Nilai relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Return Type:
|
getChartAreaBoundingBox() |
Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi konten diagram (yaitu, tidak termasuk label dan legenda):
Nilai relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Return Type:
|
getChartLayoutInterface() |
Menampilkan objek yang berisi informasi tentang penempatan di layar diagram dan elemennya. Metode berikut dapat dipanggil pada objek yang ditampilkan:
Panggil ini setelah diagram digambar. Return Type:
|
getHAxisValue(xPosition, optional_axis_index) |
Menampilkan nilai data horizontal pada Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
getImageURI() |
Menampilkan diagram yang diserialisasi sebagai URI gambar. Panggil ini setelah diagram digambar. Lihat Mencetak Diagram PNG. Jenis Hasil: string
|
getSelection() |
Menampilkan array entitas diagram yang dipilih.
Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori.
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu.
Jenis Hasil: Array elemen pilihan
|
getVAxisValue(yPosition, optional_axis_index) |
Menampilkan nilai data vertikal di Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
getXLocation(dataValue, optional_axis_index) |
Menampilkan koordinat x piksel Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
getYLocation(dataValue, optional_axis_index) |
Menampilkan koordinat y piksel Contoh: Panggil ini setelah diagram digambar. Jenis Hasil: angka
|
removeAction(actionID) |
Menghapus tindakan tooltip dengan Jenis Hasil:
none |
setAction(action) |
Menetapkan tindakan tooltip yang akan dijalankan saat pengguna mengklik teks tindakan.
Metode
Setiap dan semua tindakan tooltip harus ditetapkan sebelum memanggil metode Jenis Hasil:
none |
setSelection() |
Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya.
Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori.
Untuk diagram ini, hanya satu entitas yang dapat dipilih sekaligus.
Jenis Hasil: tidak ada
|
clearChart() |
Menghapus diagram, dan melepaskan semua resource yang dialokasikan. Jenis Hasil: tidak ada
|
Acara
Untuk informasi selengkapnya tentang cara menggunakan peristiwa ini, lihat Interaktivitas Dasar, Menangani Peristiwa, dan Peristiwa Pengaktifan.
Name | |
---|---|
animationfinish |
Diaktifkan saat animasi transisi selesai. Properti: tidak ada
|
click |
Diaktifkan saat pengguna mengklik di dalam diagram. Dapat digunakan untuk mengidentifikasi kapan judul, elemen data, entri legenda, sumbu, garis petak, atau label diklik. Properti: targetID
|
error |
Dipicu jika terjadi error saat mencoba merender diagram. Properties: ID, pesan
|
legendpagination |
Dipicu jika pengguna mengklik panah penomoran halaman legenda. Meneruskan indeks halaman berbasis nol legenda saat ini dan jumlah total halaman. Properti: currentPageIndex, totalPage
|
onmouseover |
Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris bernilai null), dan kategori ke baris (indeks kolom bernilai null). Properti: baris, kolom
|
onmouseout |
Diaktifkan saat pengguna mouse menjauh dari entitas visual. Meneruskan kembali indeks baris dan kolom dari elemen tabel data yang sesuai. Batang berkorelasi dengan sel dalam tabel data, entri legenda ke kolom (indeks baris bernilai null), dan kategori ke baris (indeks kolom bernilai null). Properti: baris, kolom
|
ready |
Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode Properti: tidak ada
|
select |
Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil Properti: tidak ada
|
Kebijakan data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.