Visualisasi: Diagram Gerak

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

Ringkasan

Diagram dinamis untuk mempelajari beberapa indikator dari waktu ke waktu. Diagram dirender di dalam browser menggunakan Flash.

Catatan untuk Developer: 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). Ini biasanya hanya merupakan masalah pengujian. Anda dapat mengatasi masalah ini seperti yang dijelaskan di situs Adobe.

Contoh

(Perlu diperhatikan bahwa kode berikut tidak akan berfungsi saat dimuat sebagai file lokal. Kode tersebut harus dimuat dari server web.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Memuat

Nama paket google.charts.load adalah "motionchart".

  google.charts.load('current', {'packages': ['motionchart']});

Nama class visualisasinya adalah google.visualization.MotionChart.

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

Format Data

  • Kolom pertama harus berjenis 'string' dan berisi nama entitas (mis., "Apel", "Jeruk", "Pisang" dalam contoh di atas).
  • Kolom kedua harus berisi nilai waktu. Waktu dapat dinyatakan dalam salah satu format berikut:
    • Tahun - Jenis kolom: 'angka'. Contoh: 2008.
    • Bulan, hari, dan tahun - Jenis kolom: 'date'; nilai harus berupa instance Date JavaScript.
    • Nomor minggu - Jenis kolom: 'string'; nilai harus menggunakan pola YYYYWww, yang sesuai dengan ISO 8601. Contoh: '2008W03'.
    • Quarter - Jenis kolom: 'string'; nilainya harus memiliki pola YYYYQq, yang sesuai dengan ISO 8601. Contoh: '2008Q3'.
  • Kolom selanjutnya dapat berupa jenis 'number' atau 'string'. Kolom angka akan muncul di menu dropdown untuk sumbu X, Y, Warna, dan Ukuran. Kolom string hanya akan muncul di menu dropdown untuk Color. Lihat contoh di atas.

Menetapkan Status Awal

Anda dapat menentukan bahwa diagram gerakan dimulai dengan status tertentu: yaitu, kumpulan entitas yang dipilih dan penyesuaian tampilan. Untuk melakukannya, pertama-tama Anda harus membuat dan menampilkan diagram, lalu membuat perubahan status yang Anda inginkan untuk ditampilkan oleh diagram (pilih nilai, mengubah setelan, dll.), lalu mengekspor setelan ini sebagai string, dan terakhir menggunakan string ini dalam kode Anda, menetapkannya ke opsi "status". Dua bagian berikutnya menjelaskan cara mengekspor dan kemudian menggunakan kode status.

  1. Buka diagram yang berfungsi dan tetapkan setelan yang ingin diambil. Setelan yang dapat Anda tentukan mencakup tingkat opasitas, zoom, dan penskalaan log vs linear.
  2. Buka panel Settings dengan mengklik simbol kunci pas di sudut kanan bawah diagram.
  3. Klik link Advanced di pojok kiri bawah untuk menambahkan panel Advanced ke set.
  4. Luaskan panel Lanjutan dan salin konten kotak teks State ke papan klip. (Catatan: alih-alih menggunakan menu, yang dijelaskan dalam langkah 2—4, Anda dapat menyisipkan tombol di halaman yang memanggil getState() dan menampilkan status saat ini di kotak pesan.)
  5. Tetapkan string status yang Anda salin di langkah sebelumnya ke parameter opsi "state" dalam kode Anda, seperti yang ditunjukkan di sini. Jika diteruskan ke metode draw(), diagram akan diinisialisasi ke status yang ditentukan saat memulai.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Opsi Konfigurasi

Name Jenis Default Deskripsi
tinggi angka 300 Tinggi diagram dalam piksel.
lebar angka 500 Lebar diagram dalam piksel.
status string none Status tampilan awal untuk diagram. Ini adalah objek JSON serial yang menjelaskan tingkat zoom, dimensi yang dipilih, balon/entitas yang dipilih, dan deskripsi status lainnya. Lihat Menetapkan Status Awal untuk mempelajari cara menetapkannya.
showChartButtons boolean benar false menyembunyikan tombol yang mengontrol jenis diagram (gelembung / garis / kolom) di pojok kanan atas.
TampilkanHeader boolean benar false menyembunyikan label judul entitas (berasal dari label kolom pertama dalam tabel data).
tampilkanDaftarDaftar boolean benar false menyembunyikan daftar entitas yang terlihat.
tampilkanPanel Samping boolean benar false menyembunyikan panel tangan kanan.
showXMetricPicker boolean benar false menyembunyikan pemilih metrik untuk x.
showYMetricPicker boolean benar false menyembunyikan pemilih metrik untuk y.
showXScalePicker boolean benar false menyembunyikan pemilih skala untuk x.
showYScalePicker boolean benar false menyembunyikan pemilih skala untuk y.
tampilkanPanelLanjutan boolean benar false menonaktifkan kompartemen opsi di panel setelan.

Metode

Metode Jenis Nilai yang Ditampilkan Deskripsi
draw(data, options) tidak ada Menggambar diagram dengan opsi yang disediakan.
getState() string Menampilkan status motionchart saat ini, yang diserialisasi ke string JSON. Untuk menetapkan status ini pada diagram, tetapkan string ini ke opsi state dalam metode draw(). Ini sering kali digunakan untuk menentukan status diagram kustom saat memulai, bukan menggunakan status default.

Acara

Name Deskripsi Properti
error Dipicu jika terjadi error saat mencoba merender diagram. id, pesan
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 gambar, dan memanggilnya hanya setelah peristiwa diaktifkan. Tidak ada
perubahan status Pengguna telah berinteraksi dengan diagram dalam beberapa cara. Panggil getState() untuk mempelajari status diagram saat ini. Tidak ada

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, setelan ini (dan semua visualisasi berbasis Flash) mungkin tidak berfungsi dengan benar saat diakses dari lokasi file pada browser (misalnya, file:///c:/webhost/myhost/myviz.html), bukan dari URL server web (misalnya, http://www.myhost.com/myviz.html). Ini biasanya hanya merupakan masalah pengujian. Anda dapat mengatasi masalah ini seperti yang dijelaskan di situs Macromedia.