Ringkasan
Diagram garis deret waktu interaktif dengan anotasi opsional.
Linimasa yang dianotasi kini otomatis menggunakan Diagram Anotasi.
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':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
Penting: Untuk menggunakan visualisasi ini, Anda harus menentukan tinggi dan lebar elemen
penampung secara eksplisit di halaman Anda. Jadi, misalnya: <div id="chart_div"
style="width:400; height:250"></div>
.
Memuat
Nama paket google.charts.load
adalah "annotatedtimeline"
google.charts.load("current", {packages: ['annotatedtimeline']});
Nama class visualisasinya adalah google.visualization.AnnotatedTimeLine
var visualization = new google.visualization.AnnotatedTimeLine(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 | Jenis | Default | Deskripsi |
---|---|---|---|
allowHtml | boolean | salah | Jika ditetapkan ke true, semua teks anotasi yang menyertakan tag HTML akan dirender sebagai HTML. |
allowGambar ulang | boolean | salah | Mengaktifkan teknik gambar ulang yang lebih efisien untuk panggilan kedua dan setelahnya ke
|
semuaNilaiNilai | string | tidak ada | Akhiran yang akan ditambahkan ke semua nilai dalam skala dan legenda. |
AnotasiLebar | angka | 25 | Lebar (dalam persen) area anotasi, dari keseluruhan area diagram. Harus berupa angka dalam rentang 5-80. |
warna | Array string | Warna default | Warna yang akan digunakan untuk garis dan label diagram. Array string. Setiap elemen merupakan string dalam format warna HTML yang valid. Misalnya 'merah' atau '#00cc00'. |
format tanggal | string | Baik 'MMMM dd, yyyy' atau 'HH:mm MMMM dd, yyyy', bergantung pada jenis kolom pertama (tanggal, atau tanggal waktu). | Format yang digunakan untuk menampilkan informasi tanggal di sudut kanan atas. Format kolom ini seperti yang ditentukan oleh class SimpleDateFormat java. |
displayAnnotations | boolean | salah | Jika ditetapkan ke true, diagram akan menampilkan anotasi di atas nilai yang dipilih. 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. |
displayAnnotationsFilter | boolean | salah | Jika ditetapkan ke true, diagram akan menampilkan filter filter untuk memfilter anotasi. Gunakan opsi ini jika ada banyak anotasi. |
displayDateBarSeparator | boolean | benar | Apakah akan menampilkan pemisah batang kecil ( | ) di antara nilai rangkaian dan tanggal dalam legenda, dengan true berarti ya. |
displayExactValues | boolean | salah | 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 disetel ke false, 56123.45 mungkin ditampilkan sebagai 56.12k. |
displayLegendDots | boolean | benar | Apakah akan menampilkan titik di samping nilai dalam teks legenda, dengan true berarti ya. |
displayLegendValues | boolean | benar | Apakah akan menampilkan nilai yang ditandai dalam legenda, jika benar berarti ya. |
displayRangeSelector | boolean | benar | 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 terakhir dalam diagram, yang diskalakan agar sesuai dengan tinggi pemilih zoom. |
displayZoomButtons | boolean | benar | Apakah akan menampilkan link zoom ("1d 5d 1m" dan seterusnya), dengan nilai salah berarti tidak. |
fill | angka | 0 | Angka dari 0—100 (inklusif) yang menentukan alfa pengisian di bawah setiap baris dalam grafik garis. 100 berarti pengisi 100% buram, 0 berarti tanpa pengisian sama sekali. Warna pengisi sama dengan warna garis di atasnya. |
Sorotan | string | 'terdekat' | Titik mana pada rangkaian yang akan disorot, dan nilai yang sesuai untuk ditampilkan dalam legenda. Pilih dari salah satu nilai berikut:
|
posisiLegenda | string | 'SameRow' | Apakah menempatkan legenda berwarna di baris yang sama dengan tombol zoom dan tanggal ('sameRow'), atau di baris baru ('newRow'). |
maks. | angka | otomatis | 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 scaleType . |
mnt | angka | otomatis | 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 nilai minimum sumbu Y yang ditentukan oleh scaleType . |
numberFormats | String, atau peta angka:Pasangan string | otomatis | Menentukan pola format angka yang akan digunakan untuk memformat nilai di bagian atas grafik. Pola harus dalam format seperti yang ditetapkan oleh class DecimalFormat Java.
Jika opsi ini ditentukan, opsi |
scaleColumns | Array angka | Otomatis | Menentukan nilai yang akan ditampilkan pada tanda centang sumbu Y di grafik. Defaultnya adalah memiliki satu skala di sisi kanan, yang berlaku untuk kedua seri; tetapi Anda dapat memiliki sisi berbeda grafik yang diskalakan ke nilai seri yang berbeda. Opsi ini menggunakan array 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 |
scaleType | string | 'tetap' | 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. |
ketebalan | angka | 0 | Angka dari 0—10 (inklusif) yang menentukan ketebalan garis, dengan 0 adalah yang paling tipis. |
Wmode | string | 'jendela' | Parameter Mode Jendela (wmode) untuk diagram Flash. Nilai yang tersedia adalah: 'opaque', 'window', atau 'transparan'. |
zoomAkhirWaktu | Tanggal | tidak ada | Menetapkan tanggal/waktu berakhir rentang zoom yang dipilih. |
zoomMulaiWaktu | Tanggal | tidak ada | Menetapkan tanggal/waktu mulai rentang zoom yang dipilih. |
Metode
Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|
draw(data, options) |
tidak ada | Menggambar diagram. Anda dapat mempercepat waktu respons untuk panggilan kedua dan selanjutnya ke draw() dengan menggunakan properti allowRedraw. |
getSelection() |
Array elemen pilihan | Implementasi getSelection() standar. Elemen yang dipilih adalah
elemen sel. Hanya satu sel yang dapat dipilih sekaligus oleh pengguna. |
getVisibleChartRange() |
Objek dengan properti start dan end |
Menampilkan objek dengan properti start dan end , yang masing-masing merupakan objek Date , yang mewakili pemilihan waktu saat ini. |
hideDataColumns(columnIndexes) |
tidak ada | Menyembunyikan rangkaian data yang ditentukan dari diagram. Menerima satu parameter yang dapat berupa angka atau array angka, di mana 0 mengacu pada rangkaian data pertama, dan seterusnya. |
setVisibleChartRange(start, end) |
tidak ada | Menetapkan rentang yang terlihat (zoom) ke rentang yang ditentukan.
Menerima dua parameter jenis Date yang mewakili waktu pertama dan terakhir dari rentang terlihat yang diinginkan. Tetapkan start ke
null untuk menyertakan semuanya dari tanggal paling awal hingga end; tetapkan end ke
null untuk menyertakan semuanya mulai dari start hingga tanggal terakhir. |
showDataColumns(columnIndexes) |
tidak ada | Menampilkan rangkaian data yang ditentukan dari diagram, setelah disembunyikan menggunakan metode hideDataColumns .
Menerima satu parameter yang dapat berupa angka atau array angka, di mana 0 mengacu pada rangkaian data pertama, dan seterusnya. |
Acara
Name | Deskripsi | Properti |
---|---|---|
perubahan rentang | Rentang zoom diubah. Diaktifkan setelah pengguna mengubah rentang waktu yang terlihat,
tetapi tidak setelah panggilan ke metode setVisibleChartRange .Catatan: Sebaiknya jangan gunakan properti peristiwa, tetapi dapatkan properti tersebut dengan memanggil metode getVisibleChartRange . |
|
siap | 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 draw , dan memanggilnya hanya setelah peristiwa diaktifkan |
Tidak ada |
pilih | Saat pengguna mengklik flag anotasi (penanda), sel yang sesuai di tabel data akan dipilih. Visualisasi kemudian memicu peristiwa ini. | Tidak ada |
Catatan: Karena batasan tertentu, peristiwa mungkin tidak ditampilkan jika Anda mengakses halaman di browser sebagai file (misalnya, "file://") dan bukan dari server (mis., "http://www").
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.
Catatan
Masalah ini biasanya hanya masalah pengujian. Anda dapat mengatasi masalah ini seperti yang dijelaskan di situs Macromedia.