Diagram Anotasi

  1. Ringkasan
  2. Contoh
  3. Memuat
  4. Format Data
  5. Opsi Konfigurasi
  6. Metode
  7. Peristiwa
  8. Kebijakan Data
  9. Catatan

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 atau datetime, dan menentukan nilai X titik pada diagram. Jika kolom ini berjenis date (dan bukan datetime), 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 menetapkan allowHtml ke true; 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 scaleType.

Hal ini mirip dengan maxValue dalam diagram inti.

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 scaleType.

Hal ini mirip dengan minValue dalam diagram inti.

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 tidak ditentukan, pola format default akan digunakan.
  • Jika pola string tunggal ditetapkan, pola string akan digunakan untuk semua nilai.

  • Jika peta ditentukan, kuncinya adalah indeks (berbasis nol) dari rangkaian, dan nilainya adalah pola yang akan digunakan untuk memformat rangkaian yang ditentukan.

    Anda tidak perlu menyertakan format untuk setiap seri pada diagram; setiap seri yang tidak ditentukan akan menggunakan format default.

Jika opsi ini ditentukan, opsi displayExactValues akan diabaikan.

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:

  • Jika Anda menentukan array kosong, diagram tidak akan menampilkan nilai Y di samping tanda centang.
  • Jika Anda menentukan satu nilai, skala rangkaian yang ditunjukkan hanya akan ditampilkan di sisi kanan diagram.
  • Jika Anda menentukan dua nilai, skala untuk rangkaian kedua akan ditambahkan di sebelah kanan diagram.
  • Jika Anda menentukan tiga nilai, skala untuk rangkaian ketiga akan ditambahkan ke bagian tengah diagram.
  • Setiap nilai setelah yang ketiga dalam array akan diabaikan.

Saat menampilkan lebih dari satu skala, sebaiknya tetapkan opsi scaleType ke 'allfix' atau 'allmaksimald'.

Jenis: Array angka
Default: Otomatis
scaleFormat

Format angka yang akan digunakan untuk label centang sumbu. Default '#' ditampilkan sebagai bilangan bulat.

Jenis: string
Default: '#'
scaleType

Menetapkan nilai maksimum dan minimum yang ditampilkan pada sumbu Y. Tersedia opsi-opsi berikut:

  • 'maksimal' - Sumbu Y akan membentang dari nilai minimum hingga nilai maksimum rangkaian. Jika Anda memiliki lebih dari satu seri, gunakan allMaksimalkand.
  • 'tetap' [default] - Sumbu Y bervariasi, bergantung pada nilai nilai data:
    • Jika semua nilai >=0, sumbu Y akan membentang dari nol hingga nilai data maksimum.
    • Jika semua nilai <=0, sumbu Y akan membentang dari nol hingga nilai data minimum.
    • Jika nilai positif dan negatif, sumbu Y akan berkisar dari maksimum rangkaian ke minimum rangkaian.
      Untuk beberapa seri, gunakan 'allfix'.
  • 'allmaxed' - Sama seperti 'maksimalkan', tetapi digunakan jika beberapa skala ditampilkan. Kedua diagram akan dimaksimalkan dalam skala yang sama, yang berarti salah satu diagram akan disalahartikan terhadap sumbu Y, tetapi mengarahkan kursor ke setiap rangkaian akan menampilkan nilai sebenarnya.
  • 'alltetap' - Sama seperti 'tetap', tetapi digunakan jika beberapa skala ditampilkan. Setelan ini menyesuaikan setiap skala ke rangkaian tempatnya diterapkan (gunakan ini bersama dengan scaleColumns).

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 true, urutan tabel anotasi akan membalikkan urutan dan menampilkannya dalam urutan menaik.

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 getSelection() standar. Elemen yang dipilih adalah elemen sel. Hanya satu sel yang dapat dipilih sekaligus oleh pengguna.

Jenis Hasil: Array elemen pilihan
getVisibleChartRange()

Menampilkan objek dengan properti start dan end, yang masing-masing merupakan objek Date, yang mewakili pemilihan waktu saat ini.

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 Date yang mewakili waktu pertama dan terakhir dari rentang terlihat yang dipilih. Tetapkan start ke null untuk menyertakan semuanya dari tanggal paling awal hingga end; tetapkan end ke null untuk menyertakan semuanya dari start hingga tanggal terakhir.

Jenis Hasil: tidak ada
showDataColumns(columnIndexes)

Menampilkan rangkaian data yang ditentukan dari diagram, setelah disembunyikan menggunakan metode hideDataColumns. Menerima satu parameter yang dapat berupa angka atau array angka, dengan 0 mengacu pada rangkaian data pertama, dan seterusnya.

Jenis Hasil: tidak ada

Acara

Name
rangechange

Diaktifkan saat pengguna mengubah penggeser rentang. Endpoint rentang baru akan tersedia sebagai event['start'] dan event['end']: 

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 draw, dan memanggilnya hanya setelah peristiwa diaktifkan.

Properti: tidak ada
select

Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil getSelection().

Properti: tidak ada

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.