Linimasa yang Dianotasi

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

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 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 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 draw() pada visualisasi ini. Ini hanya menggambar ulang area diagram. Untuk menggunakan opsi ini, Anda harus memenuhi persyaratan berikut:

  • allowRedraw harus berupa true
  • displayAnnotations harus bernilai salah (yaitu, Anda tidak dapat menampilkan anotasi)
  • Anda harus meneruskan opsi dan nilai yang sama (kecuali untuk allowRedraw dan displayAnnotations) seperti dalam panggilan pertama Anda ke draw().
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:

  • 'terdekat' - Nilai terdekat sepanjang sumbu X dengan mouse.
  • 'terakhir' - Kumpulan nilai berikutnya di sebelah kiri mouse.
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 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.
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:

  • 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'.

scaleType string 'tetap'

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

  • 'maksimal' - Sumbu Y akan membentang dari nilai minimum ke 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 seri ke minimum rangkaian.

      Untuk beberapa seri, gunakan 'allfix'.
  • 'allmaksimald' - 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.
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.
  • start: Tanggal. Waktu mulai rentang zoom.
  • end: Tanggal. Waktu berakhir rentang zoom.
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.