Ringkasan
Diagram anotasi adalah diagram garis deret waktu interaktif yang mendukung anotasi. Perhatikan bahwa linimasa yang dianotasi sekarang otomatis menggunakan Diagram Anotasi.
Notifikasi kebingungan: Saat ini, Diagram Anotasi Google berbeda dengan anotasi yang didukung oleh diagram Google lainnya (saat ini area, batang, kolom, kombinasi, garis, dan sebar). Dalam diagram tersebut, anotasi ditentukan dalam kolom tabel data terpisah, dan ditampilkan sebagai bit teks singkat yang dapat diarahkan oleh pengguna untuk melihat teks anotasi lengkap. Sebaliknya, Diagram Anotasi menampilkan anotasi lengkap di sisi kanan, seperti yang ditunjukkan di bawah ini.
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':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
Memuat
Nama paket google.charts.load
adalah "annotationchart"
.
google.charts.load("current", {packages: ['annotationchart']});
Nama class visualisasinya adalah google.visualization.AnnotationChart
.
var visualization = new google.visualization.AnnotationChart(container);
Format Data
Anda dapat menampilkan satu atau beberapa baris pada diagram. Setiap baris mewakili posisi X pada diagram—yaitu, waktu tertentu; setiap baris dijelaskan oleh kumpulan satu hingga tiga kolom.
- Kolom pertama berjenis
date
ataudatetime
, dan menentukan nilai X titik pada diagram. Jika kolom ini berjenisdate
(dan bukandatetime
), resolusi waktu terkecil pada sumbu X adalah satu hari. - Setiap baris data kemudian dijelaskan dengan kumpulan satu hingga tiga kolom tambahan
seperti yang dijelaskan di sini:
- Nilai Y - [Wajib, Angka] Kolom pertama di setiap kumpulan menjelaskan nilai baris pada waktu yang sesuai dari kolom pertama. Label kolom ditampilkan pada diagram sebagai judul garis tersebut.
- Judul anotasi - [Opsional, String] Jika kolom string
mengikuti kolom nilai, dan opsi
displayAnnotations
bernilai benar, kolom ini akan menyimpan judul singkat yang menjelaskan titik ini. Misalnya, jika baris ini mewakili suhu di Brasil, dan titik ini adalah angka yang sangat tinggi, judulnya dapat berupa "Hari terpanas yang tercatat". - Teks anotasi - [String opsional] Jika kolom string kedua ada untuk rangkaian ini, nilai sel akan digunakan sebagai teks deskriptif tambahan untuk titik ini. Anda harus menetapkan opsi
displayAnnotations
ke true untuk menggunakan kolom ini. Anda dapat menggunakan tag HTML, jika menetapkanallowHtml
ketrue
; pada dasarnya tidak ada batas ukuran, tetapi perlu diketahui bahwa entri yang terlalu panjang dapat memenuhi bagian tampilan. Anda tidak harus memiliki kolom ini meskipun memiliki kolom judul anotasi untuk tahap ini. Label kolom tidak digunakan oleh diagram. Misalnya, jika ini adalah hari terpanas yang pernah tercatat, Anda mungkin mengucapkan sesuatu seperti "Hari terdekat berikutnya adalah 10 derajat lebih keren!".
Opsi Konfigurasi
Name | |
---|---|
allowHtml |
Jika ditetapkan ke true, semua teks anotasi yang menyertakan tag HTML akan dirender sebagai HTML. Jenis: boolean
Default: false (salah)
|
semuaNilaiNilai |
Akhiran yang akan ditambahkan ke semua nilai dalam label legenda dan tanda centang dalam sumbu vertikal. Jenis: string
Default: tidak ada
|
AnotasiLebar |
Lebar (dalam persen) area anotasi, dari keseluruhan area diagram. Harus berupa angka dalam rentang 5-80. Jenis: angka
Default: 25
|
warna |
Warna yang akan digunakan untuk garis dan label diagram. Array string. Setiap elemen adalah string dalam format warna HTML yang valid. Misalnya 'merah' atau '#00cc00'. Jenis: Array string
Default: Warna default
|
format tanggal |
Format yang digunakan untuk menampilkan informasi tanggal di sudut kanan atas. Format kolom ini seperti yang ditetapkan oleh class java SimpleDateFormat. Jenis: string
Default: 'MMMM dd, yyyy' atau 'HH:mm MMMM dd, yyyy', bergantung pada jenis kolom pertama (tanggal, atau tanggal waktu).
|
displayAnnotations |
Jika ditetapkan ke false, diagram akan menyembunyikan tabel anotasi, dan anotasi serta anotasiText tidak akan terlihat (tabel anotasi juga tidak akan ditampilkan jika tidak ada anotasi di data Anda, terlepas dari opsi ini). Jika opsi ini ditetapkan ke true, setelah setiap kolom numerik, dua kolom string anotasi opsional dapat ditambahkan, satu untuk judul anotasi dan satu lagi untuk teks anotasi. Jenis: boolean
Default: true (benar):
|
displayAnnotationsFilter |
Jika ditetapkan ke true, diagram akan menampilkan kontrol filter untuk memfilter anotasi. Gunakan opsi ini jika ada banyak anotasi. Jenis: boolean
Default: false (salah)
|
displayDateBarSeparator |
Apakah akan menampilkan pemisah batang kecil ( | ) di antara nilai rangkaian dan tanggal dalam legenda, dengan true berarti ya. Jenis: boolean
Default: true (benar):
|
displayExactValues |
Apakah akan menampilkan versi bulat dan pendek dari nilai di bagian atas grafik, untuk menghemat ruang; false menunjukkan bahwa nilai tersebut mungkin ditampilkan. Misalnya, jika ditetapkan ke false, 56123.45 dapat ditampilkan sebagai 56.12k. Jenis: boolean
Default: false (salah)
|
displayLegendDots |
Apakah akan menampilkan titik di samping nilai dalam teks legenda, dengan true untuk ya. Jenis: boolean
Default: true (benar):
|
displayLegendValues |
Apakah akan menampilkan nilai yang disorot dalam legenda, dengan true untuk ya. Jenis: boolean
Default: true (benar):
|
displayRangeSelector |
Apakah akan menampilkan area pemilihan rentang zoom (area di bagian bawah diagram), dengan false berarti tidak ada. Garis batas di pemilih zoom adalah versi skala log dari rangkaian pertama dalam diagram, yang diskalakan agar sesuai dengan tinggi pemilih zoom. Jenis: boolean
Default: true (benar):
|
displayZoomButtons |
Apakah akan menampilkan tombol zoom ("1d 5d 1m" dan seterusnya), dengan nilai salah berarti tidak. Jenis: boolean
Default: true (benar):
|
fill |
Angka dari 0—100 (inklusif) yang menentukan alfa pengisian di bawah setiap baris dalam grafik garis. 100 berarti 100% buram, dan 0 berarti tidak mengisi sama sekali. Warna pengisi adalah warna yang sama dengan garis di atasnya. Jenis: angka
Default: 0
|
posisiLegenda |
Apakah menempatkan legenda berwarna di baris yang sama dengan tombol zoom dan tanggal ('sameRow'), atau di baris baru ('newRow'). Jenis: string
Default: 'sameRow'
|
maks. |
Nilai maksimum yang akan ditampilkan pada sumbu Y. Jika titik data maksimum melebihi nilai ini, setelan ini akan diabaikan, dan diagram akan disesuaikan untuk menampilkan tanda centang besar berikutnya di atas titik data maksimum. Ini akan lebih diutamakan daripada batas maksimum sumbu Y yang ditentukan
oleh Hal ini mirip dengan Jenis: angka
Default: otomatis
|
mnt |
Nilai minimum yang akan ditampilkan pada sumbu Y. Jika titik data minimum kurang dari nilai ini,
setelan ini akan diabaikan, dan diagram akan disesuaikan untuk menampilkan tanda centang besar berikutnya
di bawah titik data minimum. Ini akan lebih diutamakan daripada minimum sumbu Y yang ditentukan oleh Hal ini mirip dengan Jenis: angka
Default: otomatis
|
numberFormats |
Menentukan pola format angka yang akan digunakan untuk memformat nilai di bagian atas grafik. Pola harus dalam format seperti yang ditetapkan oleh class java DecimalFormat.
Jika opsi ini ditentukan, opsi Jenis: String, atau peta angka:Pasangan string
Default: otomatis
|
scaleColumns |
Menentukan nilai yang akan ditampilkan pada tanda centang sumbu Y di grafik. Defaultnya adalah memiliki satu skala di sisi kanan, yang berlaku untuk kedua rangkaian; tetapi, Anda dapat memiliki sisi berbeda grafik yang diskalakan ke nilai rangkaian yang berbeda. Opsi ini menggunakan array yang berisi nol hingga tiga angka yang menentukan indeks (berbasis nol) dari rangkaian untuk digunakan sebagai nilai skala. Nilai yang ditampilkan bergantung pada jumlah nilai yang Anda sertakan dalam array:
Saat menampilkan lebih dari satu skala, sebaiknya tetapkan opsi Jenis: Array angka
Default: Otomatis
|
scaleFormat |
Format angka yang akan digunakan untuk label centang sumbu. Default Jenis: string
Default: '#'
|
scaleType |
Menetapkan nilai maksimum dan minimum yang ditampilkan pada sumbu Y. Tersedia opsi-opsi berikut:
Jika Anda menentukan opsi min dan/atau maks, opsi tersebut akan lebih diutamakan daripada nilai minimum dan maksimum yang ditentukan oleh jenis skala Anda. Jenis: string
Default: 'tetap'
|
tabel |
Berisi opsi yang terkait dengan tabel anotasi. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek: var options: { table: { sortAscending: true, sortColumn: 1 } }; Objek Type:
Default: null
|
table.sortAscending |
Jika ditetapkan ke Jenis: boolean
Default: false (salah)
|
table.sortColumn |
Indeks kolom tabel anotasi yang anotasinya akan diurutkan. Indeks harus berupa 0, untuk kolom label anotasi, atau 1, untuk kolom teks anotasi. Jenis: angka
Default: 0
|
ketebalan |
Angka dari 0—10 (inklusif) yang menentukan ketebalan garis, dengan 0 adalah yang paling tipis. Jenis: angka
Default: 0
|
zoomAkhirWaktu |
Menetapkan tanggal/waktu berakhir rentang zoom yang dipilih. Jenis: Tanggal
Default: tidak ada
|
zoomMulaiWaktu |
Menetapkan tanggal/waktu mulai rentang zoom yang dipilih. Jenis: Tanggal
Default: tidak ada
|
Metode
Metode | |
---|---|
clearChart() |
Menghapus diagram, dan melepaskan semua resource yang dialokasikan. Jenis Hasil: tidak ada
|
draw(data, options, state) |
Menggambar diagram. Jenis Hasil: tidak ada
|
getContainer() |
Mengambil handle ke elemen container yang berisi diagram anotasi. Jenis Hasil: Menangani elemen DOM
|
getSelection() |
Implementasi Jenis Hasil: Array elemen pilihan
|
getVisibleChartRange() |
Menampilkan objek dengan properti
Jenis Hasil:
Objek dengan properti
start dan end
|
hideDataColumns(columnIndexes) |
Menyembunyikan rangkaian data yang ditentukan dari diagram. Menerima satu parameter yang dapat berupa angka atau array angka, di mana 0 merujuk pada rangkaian data pertama, dan seterusnya. Jenis Hasil: tidak ada
|
setVisibleChartRange(start, end) |
Menetapkan rentang yang terlihat (zoom) ke rentang yang ditentukan. Menerima dua parameter jenis
Jenis Hasil: tidak ada
|
showDataColumns(columnIndexes) |
Menampilkan rangkaian data yang ditentukan dari diagram, setelah disembunyikan menggunakan
metode Jenis Hasil: tidak ada
|
Acara
Name | |
---|---|
rangechange |
Diaktifkan saat pengguna mengubah penggeser rentang. Endpoint rentang baru akan tersedia sebagai google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } Properti: mulai, akhir
|
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.