Diagram Anotasi

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

Ringkasan

Diagram anotasi adalah diagram garis deret waktu interaktif yang mendukung anotasi. Perlu diperhatikan bahwa linimasa yang diberi anotasi kini otomatis menggunakan Diagram Anotasi.

Peringatan kebingungan: Saat ini, Diagram Anotasi Google berbeda dengan anotasi yang didukung diagram Google lain (saat ini, area, batang, kolom, kombinasi, garis, dan sebar). Dalam diagram tersebut, anotasi ditentukan dalam kolom tabel data terpisah, dan ditampilkan sebagai potongan teks singkat yang dapat mengarahkan kursor ke atasnya untuk melihat teks anotasi lengkap. Sebaliknya, Annotation Chart 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 visualisasi adalah google.visualization.AnnotationChart.

  var visualization = new google.visualization.AnnotationChart(container);

Format Data

Anda dapat menampilkan satu atau beberapa garis pada diagram. Setiap baris merepresentasikan 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.
  • Selanjutnya, setiap baris data dijelaskan oleh kumpulan satu hingga tiga kolom tambahan seperti yang dijelaskan di sini:
    • Nilai Y - [Wajib, Angka] Kolom pertama di setiap set menjelaskan nilai garis pada waktu yang sesuai dari kolom pertama. Label kolom ditampilkan pada diagram sebagai judul garis tersebut.
    • Judul anotasi - [Optional, String] Jika kolom string mengikuti kolom nilai, dan opsi displayAnnotations bernilai benar, kolom ini akan memiliki judul singkat yang menjelaskan hal ini. Misalnya, jika garis ini merepresentasikan suhu di Brasil, dan titik ini adalah angka yang sangat tinggi, judulnya bisa berupa "Hari terpanas dalam catatan".
    • Teks anotasi - [String opsional] Jika ada kolom string kedua 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, namun perhatikan bahwa entri yang terlalu panjang dapat melebihi bagian tampilan. Anda tidak harus memiliki kolom ini meskipun memiliki kolom judul anotasi untuk saat ini. Label kolom tidak digunakan oleh diagram. Misalnya, jika ini adalah hari terpanas dalam sejarah, Anda dapat mengucapkan sesuatu seperti "Hari terdekat berikutnya 10 derajat lebih dingin!".

Opsi Konfigurasi

Name
allowHtml

Jika ditetapkan ke true, teks anotasi apa pun yang menyertakan tag HTML akan dirender sebagai HTML.

Jenis: boolean
Default: false
allValuesSuffix

Akhiran yang akan ditambahkan ke semua nilai dalam label legenda dan tick di sumbu vertikal.

Jenis: string
Default: tidak ada
annotationsWidth

Lebar (dalam persen) area anotasi, dari seluruh area diagram. Harus berupa angka dalam rentang 5-80.

Jenis: nomor
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
dateFormat

Format yang digunakan untuk menampilkan informasi tanggal di sudut kanan atas. Format kolom ini adalah seperti yang ditentukan oleh class SimpleDateFormat java.

Jenis: string
Default: 'MMMM dd, yyyy' atau 'HH:mm MMMM dd, yyyy', bergantung pada jenis kolom pertama (tanggal, atau datetime).
displayAnnotations

Jika ditetapkan ke false, diagram akan menyembunyikan tabel anotasi, serta anotasi dan annotationText tidak akan terlihat (tabel anotasi juga tidak akan ditampilkan jika tidak ada anotasi dalam 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: benar (true)
displayAnnotationsFilter

Jika ditetapkan ke true, diagram akan menampilkan kontrol filter untuk memfilter anotasi. Gunakan opsi ini jika ada banyak anotasi.

Jenis: boolean
Default: false
displayDateBarSeparator

Apakah akan menampilkan pemisah batang kecil ( | ) antara nilai deret dan tanggal dalam legenda, jika true (benar) berarti ya.

Jenis: boolean
Default: benar (true)
displayExactValues

Apakah akan menampilkan versi nilai yang dipersingkat dan dibulatkan di bagian atas grafik untuk menghemat ruang; false menunjukkan bahwa nilai mungkin ditampilkan. Misalnya, jika ditetapkan ke false, 56123, 45 dapat ditampilkan sebagai 56, 12 KB.

Jenis: boolean
Default: false
displayLegendDots

Apakah akan menampilkan titik di samping nilai dalam teks legenda, jika true (benar) berarti ya.

Jenis: boolean
Default: benar (true)
displayLegendValues

Menentukan apakah akan menampilkan nilai yang ditandai dalam legenda, jika true (benar) berarti ya.

Jenis: boolean
Default: benar (true)
displayRangeSelector

Menentukan apakah akan menampilkan area pilihan rentang zoom (area di bagian bawah diagram), dengan false berarti tidak.

Garis batas dalam pemilih zoom adalah versi skala log dari rangkaian pertama dalam diagram, yang diskalakan agar sesuai dengan tinggi pemilih zoom.

Jenis: boolean
Default: benar (true)
displayZoomButtons

Apakah akan menampilkan tombol zoom ("1d 5d 1m" dan seterusnya), di mana false berarti tidak.

Jenis: boolean
Default: benar (true)
fill

Angka dari 0—100 (inklusif) yang menentukan alfa isian di bawah setiap baris dalam grafik garis. 100 berarti 100% buram, dan 0 berarti tidak mengisi sama sekali. Warna isian adalah warna yang sama dengan garis di atasnya.

Jenis: nomor
Default: 0
legendPosition

Apakah akan menempatkan legenda berwarna di baris yang sama dengan tombol zoom dan tanggal ('sameRow'), atau di baris baru ('newRow').

Jenis: string
Default: 'sameRow'
max

Nilai maksimum untuk ditampilkan pada sumbu Y. Jika titik data maksimum melebihi nilai ini, setelan ini akan diabaikan, dan diagram akan disesuaikan untuk menampilkan tanda centang utama berikutnya di atas titik data maksimum. Ini akan lebih diutamakan daripada sumbu Y maksimum yang ditentukan oleh scaleType.

Hal ini mirip dengan maxValue pada diagram inti.

Jenis: nomor
Default: otomatis
mnt

Nilai minimum yang akan ditampilkan pada sumbu Y. Jika titik data minimum lebih kecil dari nilai ini, setelan ini akan diabaikan, dan diagram akan disesuaikan untuk menampilkan tanda centang utama berikutnya di bawah titik data minimum. Nilai ini akan lebih diutamakan daripada sumbu Y minimum yang ditentukan oleh scaleType.

Hal ini mirip dengan minValue pada diagram inti.

Jenis: nomor
Default: otomatis
numberFormats

Menentukan pola format angka yang akan digunakan untuk memformat nilai di bagian atas grafik.

Pola harus dalam format seperti yang ditentukan oleh class java DecimalFormat.

  • Jika tidak ditentukan, pola format default akan digunakan.
  • Jika pola string tunggal ditentukan, pola tersebut akan digunakan untuk semua nilai.

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

    Anda tidak harus menyertakan format untuk setiap deret pada diagram; deret yang tidak ditentukan akan menggunakan format default.

Jika opsi ini ditentukan, opsi displayExactValues akan diabaikan.

Jenis: String, atau peta pasangan nomor:String
Default: otomatis
scaleColumns

Menentukan nilai yang akan ditampilkan pada tanda centang sumbu Y dalam grafik. Defaultnya adalah memiliki satu skala di sisi kanan, yang berlaku untuk kedua deret; tetapi Anda dapat membuat sisi grafik yang berbeda diskalakan ke nilai deret yang berbeda.

Opsi ini menggunakan array dari nol hingga tiga angka yang menentukan indeks (berbasis nol) dari deret untuk digunakan sebagai nilai skala. Tempat nilai ini ditampilkan bergantung pada jumlah nilai yang Anda sertakan dalam array:

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

Saat menampilkan lebih dari satu skala, sebaiknya tetapkan opsi scaleType ke 'allfixed' atau 'allmaximized'.

Jenis: Array angka
Default: Otomatis
scaleFormat

Format angka yang akan digunakan untuk label titik skala sumbu. Nilai default '#' ditampilkan sebagai bilangan bulat.

Jenis: string
Default: '#'
scaleType

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

  • 'dimaksimalkan' - Sumbu Y akan menjangkau nilai minimum hingga maksimum pada deret. Jika Anda memiliki lebih dari satu rangkaian, gunakan alldimaksimalkan.
  • 'fixed' [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 nilainya positif dan negatif, sumbu Y akan berkisar dari deret maksimum ke minimum deret.
      Untuk beberapa seri, gunakan 'allfixed'.
  • 'allmaximized' - Sama seperti 'dimaksimalkan', tetapi digunakan saat beberapa timbangan ditampilkan. Kedua diagram akan dimaksimalkan dalam skala yang sama, yang berarti diagram tersebut akan ditampilkan dengan tidak benar terhadap sumbu Y, tetapi jika kursor diarahkan ke setiap deret, nilai sebenarnya akan ditampilkan.
  • 'allfixed' - Sama seperti 'fixed,' tetapi digunakan saat beberapa timbangan ditampilkan. Setelan ini menyesuaikan setiap skala dengan deret tempat setelan ini diterapkan (gunakan ini bersama dengan scaleColumns).

Jika Anda menentukan opsi minimum dan/atau maksimum, nilai tersebut akan didahulukan daripada nilai minimum dan maksimum yang ditentukan oleh jenis skala Anda.

Jenis: string
Default: 'ditetapkan'
meja

Berisi opsi yang berkaitan dengan tabel anotasi. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek: 

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
Jenis: objek
Default: null
table.sortAscending

Jika ditetapkan ke true, urutan tabel anotasi akan terbalik dan menampilkannya dalam urutan menaik.

Jenis: boolean
Default: false
table.sortColumn

Indeks kolom dari tabel anotasi yang anotasi akan diurutkan. Indeks harus 0, untuk kolom label anotasi, atau 1, untuk kolom teks anotasi.

Jenis: nomor
Default: 0
ketebalan

Angka dari 0—10 (inklusif) yang menentukan ketebalan garis, dengan 0 adalah yang paling tipis.

Jenis: nomor
Default: 0
zoomEndTime

Menetapkan tanggal/waktu akhir rentang zoom yang dipilih.

Jenis: Tanggal
Default: tidak ada
zoomStartTime

Menetapkan tanggal/waktu mulai rentang zoom yang dipilih.

Jenis: Tanggal
Default: tidak ada

Metode

Metode
clearChart()

Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Pengembalian: tidak ada
draw(data, options, state)

Menggambar diagram.

Jenis Pengembalian: tidak ada
getContainer()

Mengambil handle ke elemen penampung yang berisi diagram anotasi.

Jenis Pengembalian: Menangani ke elemen DOM
getSelection()

Implementasi getSelection() standar. Elemen yang dipilih adalah elemen sel. Hanya satu sel yang dapat dipilih oleh pengguna sekaligus.

Jenis Pengembalian: Array elemen pilihan
getVisibleChartRange()

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

Jenis Pengembalian: Objek dengan properti start dan end
hideDataColumns(columnIndexes)

Menyembunyikan deret data yang ditentukan dari diagram. Menerima satu parameter yang dapat berupa angka atau array angka, dengan 0 merujuk pada deret data pertama, dan seterusnya.

Jenis Pengembalian: tidak ada
setVisibleChartRange(start, end)

Menyetel rentang yang terlihat (zoom) ke rentang yang ditentukan. Menerima dua parameter jenis Date yang mewakili waktu pertama dan terakhir dari rentang terlihat terpilih yang diinginkan. Tetapkan start ke null untuk menyertakan semuanya mulai dari tanggal paling awal hingga end; tetapkan end ke null untuk menyertakan semuanya dari start hingga tanggal terakhir.

Jenis Pengembalian: tidak ada
showDataColumns(columnIndexes)

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

Jenis Pengembalian: 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: awal, 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.