Ringkasan
Diagram lilin interaktif.
Diagram batang lilin digunakan untuk menampilkan nilai pembukaan dan penutupan yang ditempatkan di atas total varians. Diagram batang lilin sering digunakan untuk menunjukkan perilaku nilai saham. Dalam diagram ini, item dengan nilai pembukaan kurang dari nilai penutupan (keuntungan) digambar sebagai kotak terisi, dan item dengan nilai buka lebih dari nilai penutupan (kerugian) digambar sebagai kotak kosong.
Contoh
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] // Treat first row as data as well. ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Diagram air terjun
Dengan kumpulan opsi yang tepat, diagram lilin dapat dibuat agar menyerupai diagram waterfall sederhana.
Pada kode di bawah, kita menghapus wick teratas dengan memiliki nilai yang sama di kolom pertama dan kedua, serta wick bawah dengan memiliki nilai yang sama di kolom ketiga dan keempat. Kita
menetapkan bar.groupWidth
ke '100%'
untuk menghapus
spasi di antara batang.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 28, 28, 38, 38], ['Tue', 38, 38, 55, 55], ['Wed', 55, 55, 77, 77], ['Thu', 77, 77, 66, 66], ['Fri', 66, 66, 22, 22] // Treat the first row as data. ], true); var options = { legend: 'none', bar: { groupWidth: '100%' }, // Remove space between bars. candlestick: { fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green } }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Saat ini tidak ada cara yang mudah untuk memberi label pada batang. Opsi terbaik adalah menggunakan overlay.
Memuat
Nama paket google.charts.load
adalah "corechart"
.
google.charts.load('current', {packages: ['corechart']});
Nama class visualisasinya adalah
google.visualization.CandlestickChart.
var visualization = new google.visualization.CandlestickChart(container);
Format data
Lima atau beberapa kolom, dengan kolom pertama menentukan nilai sumbu X atau label grup, dan masing-masing dari empat kolom data setelah menentukan rangkaian yang berbeda.
- Kol 0: String (terpisah) digunakan sebagai label grup pada sumbu X, atau angka, tanggal, tanggal/waktu, atau waktu (bersambung) digunakan sebagai nilai pada sumbu X.
- Kol 1: Angka yang menentukan nilai rendah/minimum penanda ini. Ini adalah dasar garis tengah lilin. Label kolom digunakan sebagai label rangkaian dalam legenda (sedangkan label kolom lainnya diabaikan).
- Kol 2: Angka yang menentukan nilai awal/awal penanda ini. Ini adalah satu batas vertikal lilin. Jika kurang dari nilai kolom 3, lilin akan terisi; jika tidak, saluran akan berlubang.
- Kol 3: Angka yang menentukan nilai penutupan/final penanda ini. Ini adalah batas vertikal kedua lilin. Jika kurang dari nilai kolom 2, lilin akan berlubang; jika tidak, lilin akan terisi.
- Kol 4: Angka yang menentukan nilai tinggi/maksimum penanda ini. Ini adalah bagian atas garis tengah lilin.
- Kolom 5 [Opsional]: Kolom tooltip atau gaya untuk kandil.
Opsi konfigurasi
Name | |
---|---|
targetagregasi |
Cara beberapa pilihan data digabungkan menjadi tooltip:
aggregationTarget akan sering digunakan bersama-sama dengan selectionMode
dan tooltip.trigger , misalnya:
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Jenis: string
Default: 'otomatis'
|
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
|
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 lilin, yang ditentukan dalam salah satu format ini:
Jenis: angka atau string
Default: Rasio emas, sekitar '61,8%'.
|
kandil.hollowIsRising |
Jika true, lilin yang naik akan terlihat berlubang dan lilin yang berjatuhan akan tampak padat, jika tidak, kebalikannya. Jenis: boolean
Default: false (nanti akan diubah menjadi true)
|
candlestick.fallingColor.fill |
Warna pengisi lilin yang jatuh, sebagai string warna HTML. Jenis: string
Default: otomatis (bergantung pada warna seri dan hollowIsRising)
|
candlestick.fallingColor.stroke |
Warna guratan lilin yang jatuh, sebagai string warna HTML. Jenis: string
Default: otomatis (warna seri)
|
candlestick.fallingColor.strokeWidth |
Lebar guratan lilin yang jatuh, sebagai string warna HTML. Jenis: 2
Default: angka
|
candlestick.risingColor.fill |
Warna pengisi lilin yang sedang naik, sebagai string warna HTML. Jenis: string
Default: otomatis (putih atau warna seri, bergantung pada hollowIsRising)
|
candlestick.risingColor.stroke |
Warna guratan lilin yang naik, sebagai string warna HTML. Jenis: string
Default: otomatis (warna seri atau putih, bergantung pada hollowIsRising)
|
candlestick.risingColor.strokeWidth |
Lebar guratan lilin yang naik, sebagai string warna HTML. Jenis: angka
Default: 2
|
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
|
warna |
Warna yang akan digunakan untuk elemen diagram. Array string, dengan setiap elemen adalah string warna HTML, misalnya: Jenis: Array string
Default: warna default
|
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):
|
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)
|
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. Opsi ini hanya didukung untuk sumbu Jenis: angka
Default: otomatis
|
hAxis.baselineColor |
Warna garis dasar untuk sumbu horizontal. Dapat berupa string warna HTML apa pun, misalnya: Opsi ini hanya didukung untuk sumbu 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 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
|
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}
Opsi ini hanya didukung untuk sumbu
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.interval |
Array ukuran (sebagai nilai data, bukan piksel) antar-garis petak yang berdekatan. Saat ini, opsi tersebut hanya untuk sumbu numerik,
tetapi setara dengan opsi
Jenis: angka antara 1 dan 10, tidak termasuk 10.
Default: yang dihitung
|
hAxis.gridlines.minSpacing |
Ruang layar minimum, dalam piksel, antara garis petak utama hAxis.
Default untuk garis kisi utama adalah Jenis: angka
Default: yang dihitung
|
hAxis.gridlines.multiple |
Semua nilai kotak dan kotak centang harus kelipatan dari nilai opsi ini. Perhatikan bahwa, tidak seperti interval, pangkat 10 kali kelipatan ini tidak dipertimbangkan.
Jadi, Anda dapat memaksa tick menjadi bilangan bulat dengan menentukan
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.
Opsi ini hanya didukung untuk sumbu
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.interval |
Opsi minorGridlines.interval mirip dengan opsi interval garis petak utama, tetapi interval yang dipilih akan selalu menjadi pembagi genap dari garis petak utama.
Interval default untuk skala linear adalah Jenis: angka
Default:1
|
hAxis.minorGridlines.minSpacing |
Spasi minimum yang diperlukan, dalam piksel, antara garis petak kecil yang berdekatan, serta antara garis petak kecil dan utama. Nilai defaultnya adalah 1/2 minSpacing dari garis petak utama untuk skala linear, dan 1/5 minSpacing untuk skala log. Jenis: angka
Default:dihitung
|
hAxis.minorGridlines.multiple |
Sama seperti Jenis: angka
Default: 1
|
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 Opsi ini hanya didukung untuk sumbu Jenis: boolean
Default: false (salah)
|
Jenis hAxis.scaleType |
Properti
Opsi ini hanya didukung untuk sumbu Jenis: string
Default: null
|
hAxis.textPosition |
Posisi teks sumbu horizontal, relatif terhadap area diagram. Nilai yang didukung: 'out', 'in', 'none'. Jenis: string
Default: 'keluar'
|
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.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:
Opsi ini hanya didukung untuk sumbu
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.allowContainerBoundaryTextCutoff |
Jika salah, akan menyembunyikan label terluar, bukan membiarkannya dipangkas oleh penampung diagram. Jika true (benar), akan memungkinkan pemangkasan label. Opsi ini hanya didukung untuk sumbu Jenis: boolean
Default: false (salah)
|
Teks hAxis.slanted |
Jika true, gambar teks sumbu horizontal pada suatu sudut untuk membantu menyesuaikan lebih banyak teks di sepanjang sumbu; jika
salah, gambar teks sumbu horizontal dengan tegak. Perilaku defaultnya adalah teks miring jika tidak semuanya
pas saat digambar tegak. Perhatikan bahwa opsi ini hanya tersedia jika
Jenis: boolean
Default: otomatis
|
hAxis.slantedTextAngle |
Sudut teks sumbu horizontal, jika digambar miring. Diabaikan jika
Jenis: angka, -90—90
Default: 30
|
hAxis.maxAlternation |
Jumlah tingkat maksimum teks sumbu horizontal. Jika label teks sumbu terlalu padat, server dapat menggeser label yang berdekatan ke atas atau ke bawah agar pas dengan label yang berdekatan. Nilai ini menentukan jumlah level yang paling banyak digunakan; server dapat menggunakan lebih sedikit level, jika label dapat disesuaikan tanpa tumpang tindih. Untuk tanggal dan waktu, default-nya adalah 1. Jenis: angka
Default: 2
|
hAxis.maxTextLines |
Jumlah baris maksimum yang diizinkan untuk label teks. Label dapat mencakup beberapa baris jika terlalu panjang, dan secara default jumlah baris dibatasi oleh tinggi ruang yang tersedia. Jenis: angka
Default: otomatis
|
hAxis.minTextSpacing |
Spasi horizontal minimum, dalam piksel, yang diizinkan di antara dua label teks yang berdekatan. Jika label diberi spasi yang terlalu padat, atau terlalu panjang, spasinya dapat berada di bawah batas ini, dan dalam hal ini salah satu tindakan penghapusan label akan diterapkan (misalnya, memotong label atau menghapus beberapa label). Jenis: angka
Default: Nilai
hAxis.textStyle.fontSize |
hAxis.showTextSetiap |
Jumlah label sumbu horizontal yang akan ditampilkan, dengan 1 berarti setiap label, 2 berarti setiap label lainnya, dan seterusnya. Defaultnya adalah mencoba menampilkan sebanyak mungkin label tanpa tumpang-tindih. Jenis: angka
Default: otomatis
|
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.
Opsi ini hanya didukung untuk sumbu
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.
Opsi ini hanya didukung untuk sumbu
Jenis: angka
Default: otomatis
|
hAxis.viewWindowMode |
Menentukan cara menskalakan sumbu horizontal untuk merender nilai dalam area diagram. Nilai string berikut didukung:
Opsi ini hanya didukung untuk sumbu
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 |
Diabaikan saat Jenis: angka
Default: otomatis
|
hAxis.viewWindow.min |
Diabaikan saat Jenis: angka
Default: otomatis
|
tinggi |
Tinggi diagram, dalam piksel. Jenis: angka
Default: tinggi elemen penampung
|
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
|
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
|
legend.maxLines |
Jumlah baris maksimum dalam legenda. Tetapkan string ini ke angka yang lebih besar dari satu untuk menambahkan baris ke legenda. Catatan: Logika persis yang digunakan untuk menentukan jumlah baris sebenarnya yang dirender masih berubah-ubah. Opsi ini saat ini hanya berfungsi jika legend.position adalah 'top'. Jenis: angka
Default: 1
|
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.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>}
|
orientasi |
Orientasi diagram. Jika ditetapkan ke Jenis: string
Default: 'horizontal'
|
reverseKategori |
Jika disetel ke benar, akan menggambar rangkaian dari kanan ke kiri. Defaultnya adalah menggambar kiri-ke-kanan.
Opsi ini hanya didukung untuk sumbu
Jenis: boolean
Default: false (salah)
|
modeMode |
Jika Jenis: string
Default: 'single'
|
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'
|
Vaksin |
Menentukan properti untuk sumbu vertikal masing-masing, jika diagram memiliki beberapa sumbu vertikal.
Setiap objek turunan adalah objek
Untuk menentukan diagram dengan beberapa sumbu vertikal, tentukan sumbu baru terlebih dahulu menggunakan
{ series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
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 vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Jenis: Array objek, atau objek dengan objek turunan
Default: null
|
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 Jenis: angka
Default: otomatis
|
vAxis.baselineColor |
Menentukan warna dasar pengukuran untuk sumbu vertikal. Dapat berupa string warna HTML apa pun, misalnya: 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 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
|
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} 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.interval |
Array ukuran (sebagai nilai data, bukan piksel) antar-garis petak yang berdekatan. Saat ini, opsi tersebut hanya untuk sumbu numerik,
tetapi setara dengan opsi
Jenis: angka antara 1 dan 10, tidak termasuk 10.
Default: yang dihitung
|
vAxis.gridlines.minSpacing |
Ruang layar minimum, dalam piksel, antara garis petak utama hAxis.
Default untuk garis kisi utama adalah Jenis: angka
Default: yang dihitung
|
vAxis.gridline.beberapa |
Semua nilai kotak dan kotak centang harus kelipatan dari nilai opsi ini. Perhatikan bahwa, tidak seperti interval, pangkat 10 kali kelipatan ini tidak dipertimbangkan.
Jadi, Anda dapat memaksa tick menjadi bilangan bulat dengan menentukan
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. 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.interval |
Opsi minorGridlines.interval mirip dengan opsi interval garis petak utama, tetapi interval yang dipilih akan selalu menjadi pembagi genap dari garis petak utama.
Interval default untuk skala linear adalah Jenis: angka
Default:1
|
vAxis.minorGridlines.minSpacing |
Spasi minimum yang diperlukan, dalam piksel, antara garis petak kecil yang berdekatan, serta antara garis petak kecil dan utama. Nilai defaultnya adalah 1/2 minSpacing dari garis petak utama untuk skala linear, dan 1/5 minSpacing untuk skala log. Jenis: angka
Default:dihitung
|
vAxis.minorGridlines.beberapa |
Sama seperti 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. Jenis: boolean
Default: false (salah)
|
Jenis vAxis.scale |
Properti
Opsi ini hanya didukung untuk sumbu 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:
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.
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.
Jenis: angka
Default: null
|
vAxis.viewWindowMode |
Menentukan cara menskalakan sumbu vertikal untuk merender nilai dalam area diagram. Nilai string berikut didukung:
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 |
Nilai data vertikal maksimum yang akan dirender. Diabaikan saat Jenis: angka
Default: otomatis
|
vAxis.viewWindow.min |
Nilai data vertikal minimum yang akan dirender. 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 lilin, 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 lilin, 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. Candlestick terhubung dengan sel dalam tabel data, entri legenda ke kolom (indeks baris adalah 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. Candlestick terhubung dengan sel dalam tabel data, entri legenda ke kolom (indeks baris adalah 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.