Linimasa yang Dianotasi

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

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 visualisasi adalah google.visualization.AnnotatedTimeLine

  var visualization = new google.visualization.AnnotatedTimeLine(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 dalam 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 Jenis Default Deskripsi
allowHtml boolean false Jika ditetapkan ke true, teks anotasi apa pun yang menyertakan tag HTML akan dirender sebagai HTML.
allowRedraw boolean false

Memungkinkan teknik menggambar ulang yang lebih efisien untuk panggilan kedua dan yang berikutnya ke draw() pada visualisasi ini. Tindakan ini hanya menggambar ulang area diagram. Untuk menggunakan opsi ini, Anda harus memenuhi persyaratan berikut:

  • allowRedraw harus bernilai true
  • displayAnnotations harus salah (yaitu, Anda tidak dapat menampilkan anotasi)
  • Anda harus meneruskan opsi dan nilai yang sama (kecuali untuk allowRedraw dan displayAnnotations) seperti pada panggilan pertama ke draw().
allValuesSuffix string tidak ada Akhiran yang akan ditambahkan ke semua nilai dalam skala dan legenda.
annotationsWidth number 25 Lebar (dalam persen) area anotasi, dari seluruh 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'.
dateFormat string '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 ditentukan oleh class SimpleDateFormat java.
displayAnnotations boolean false Jika ditetapkan ke benar (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 false Jika ditetapkan ke true, diagram akan menampilkan konten filter untuk memfilter anotasi. Gunakan opsi ini jika ada banyak anotasi.
displayDateBarSeparator boolean true Apakah akan menampilkan pemisah batang kecil ( | ) antara nilai deret dan tanggal dalam legenda, jika true (benar) berarti ya.
displayExactValues boolean false Apakah akan menampilkan versi nilai yang dipersingkat dan dibulatkan di bagian atas grafik untuk menghemat ruang; false menunjukkan kemungkinannya. Misalnya, jika ditetapkan ke false, 56123, 45 dapat ditampilkan sebagai 56, 12 k.
displayLegendDots boolean true Apakah akan menampilkan titik di samping nilai dalam teks legenda, jika true (benar) berarti ya.
displayLegendValues boolean true Menentukan apakah akan menampilkan nilai yang ditandai dalam legenda, jika true (benar) berarti ya.
displayRangeSelector boolean true

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

Garis batas di pemilih zoom adalah versi skala log dari rangkaian terakhir dalam diagram, yang diskalakan agar sesuai dengan tinggi pemilih zoom.
displayZoomButtons boolean true Menentukan apakah akan menampilkan link zoom ("1d 5d 1m" dan seterusnya), jika false berarti tidak.
fill number 0 Angka dari 0—100 (inklusif) yang menentukan alfa isian di bawah setiap baris dalam grafik garis. 100 berarti 100% isian buram, 0 berarti tidak ada isian sama sekali. Warna isian adalah warna yang sama dengan garis di atasnya.
highlightDot string 'terdekat'

Titik mana pada deret yang akan disorot, dan nilai yang sesuai akan ditampilkan di legenda. Pilih dari salah satu nilai berikut:

  • 'nearest' - Nilai yang terdekat di sepanjang sumbu X dengan mouse.
  • 'last' - Rangkaian nilai berikutnya di sebelah kiri mouse.
legendPosition string 'sameRow' Apakah akan menempatkan legenda berwarna di baris yang sama dengan tombol zoom dan tanggal ('sameRow'), atau di baris baru ('newRow').
max number otomatis 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. Posisi ini akan diprioritaskan di atas sumbu Y maksimum yang ditentukan oleh scaleType.
mnt number otomatis 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. Urutan ini akan diprioritaskan di atas sumbu Y minimum yang ditentukan oleh scaleType.
numberFormats String, atau peta pasangan string otomatis

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 ditetapkan, 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.
scaleColumns Array angka Otomatis

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 memiliki sisi grafik yang berbeda yang diskalakan ke nilai deret yang berbeda.

Opsi ini menggunakan array berisi 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 samping 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'.

scaleType string 'diperbaiki'

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

  • 'maximized' - Sumbu Y akan menjangkau nilai minimum hingga maksimum deret. Jika Anda memiliki lebih dari satu seri, gunakan opsi all Dimaksimalkan.
  • 'fixed' [default] - Sumbu Y bervariasi, bergantung pada 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 maksimum deret ke minimum deret.

      Untuk beberapa seri, gunakan 'allfixed'.
  • 'allmaximized' - Sama seperti 'maximized', tetapi digunakan saat beberapa skala ditampilkan. Kedua diagram akan dimaksimalkan dalam skala yang sama, yang berarti diagram tersebut akan salah ditampilkan pada sumbu Y, tetapi jika kursor diarahkan ke setiap deret, nilai yang ditampilkan akan ditampilkan.
  • 'allfixed' - Sama seperti 'fixed,' tetapi digunakan saat beberapa timbangan ditampilkan. Setelan ini menyesuaikan setiap skala ke deret tempat setelan ini berlaku (gunakan bersama dengan scaleColumns).

Jika Anda menentukan opsi minimal dan/atau maksimal, opsi tersebut akan didahulukan daripada nilai minimum dan maksimum yang ditentukan oleh jenis skala.
ketebalan number 0 Angka dari 0—10 (inklusif) yang menentukan ketebalan garis, dengan 0 adalah yang paling tipis.
{i>wmode<i} string 'jendela' Parameter Mode Jendela (wmode) untuk diagram Flash. Nilai yang tersedia adalah: 'opaque', 'window', atau 'transparency'.
zoomEndTime Tanggal tidak ada Menetapkan tanggal/waktu akhir rentang zoom yang dipilih.
zoomStartTime 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 berikutnya ke draw() dengan menggunakan properti allowRedraw.
getSelection() Array elemen pemilihan Implementasi getSelection() standar. Elemen yang dipilih adalah elemen sel. Hanya satu sel yang dapat dipilih oleh pengguna sekaligus.
getVisibleChartRange() Objek dengan properti start dan end Menampilkan objek dengan properti start dan end, yang masing-masing adalah objek Date, yang mewakili pemilihan waktu saat ini.
hideDataColumns(columnIndexes) tidak ada 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.
setVisibleChartRange(start, end) tidak ada Menyetel rentang yang terlihat (zoom) ke rentang yang ditentukan. Menerima dua parameter jenis Date yang mewakili waktu pertama dan terakhir 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 mulai dari start hingga tanggal terakhir.
showDataColumns(columnIndexes) tidak ada 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.

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 tanda anotasi (penanda), sel yang sesuai dalam 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://") bukan dari server (misalnya, "http://www").

Kebijakan Data

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

Catatan

Karena setelan keamanan Flash, ini (dan semua visualisasi berbasis Flash) mungkin tidak berfungsi dengan benar saat diakses dari lokasi file di browser (misalnya file:///c:/webhost/myhost/myviz.html), bukan dari URL server web (misalnya http://www.myhost.com/myviz.html). Masalah ini biasanya hanya merupakan masalah pengujian. Anda dapat mengatasi masalah ini seperti yang dijelaskan di situs Macromedia.