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

Ringkasan

Diagram dinamis untuk mengeksplorasi beberapa indikator dari waktu ke waktu. Diagram dirender pada browser menggunakan Flash.

Catatan untuk Developer: Karena setelan keamanan Flash, fitur 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 Adobe.

Contoh

(Perhatikan bahwa kode berikut tidak akan berfungsi saat dimuat sebagai file lokal; kode ini 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 visualisasi adalah google.visualization.MotionChart.

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

Format Data

  • Kolom pertama harus berjenis 'string' dan berisi nama entity (misalnya, "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: 'tanggal'; 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'; nilai harus memiliki pola YYYYQq, yang sesuai dengan ISO 8601. Contoh: '2008Q3'.
  • Kolom berikutnya dapat berjenis 'angka' 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 agar diagram gerakan dimulai dengan status tertentu: yaitu, kumpulan entitas yang dipilih dan penyesuaian tampilan. Untuk melakukannya, Anda harus membuat dan menampilkan diagram terlebih dahulu, lalu membuat perubahan status yang Anda inginkan untuk ditampilkan diagram (pilih nilai, ubah 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, lalu menggunakan kode status.

  1. Buka bagan yang berfungsi dan tetapkan pengaturan yang ingin Anda ambil. Setelan yang dapat Anda tentukan mencakup tingkat opasitas, zoom, dan penskalaan log vs. linear.
  2. Buka panel Setelan dengan mengklik simbol kunci pas di sudut kanan bawah diagram.
  3. Klik link Advanced di sudut kiri bawah untuk menambahkan panel Advanced ke kumpulan.
  4. Luaskan panel Advanced dan salin konten kotak teks State ke papan klip. (Catatan: daripada menggunakan menu yang dijelaskan pada langkah 2—4, Anda dapat menyisipkan tombol di halaman yang memanggil getState() dan menampilkan status saat ini dalam kotak pesan.)
  5. Tetapkan string status yang Anda salin di langkah sebelumnya ke parameter opsi "state" dalam kode Anda, seperti yang ditunjukkan di sini. Saat diteruskan ke metode draw(), diagram akan diinisialisasi ke status yang ditentukan saat startup.
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 number 300 Tinggi diagram dalam piksel.
lebar number 500 Lebar diagram dalam piksel.
state string none Status tampilan awal diagram. Objek ini adalah objek JSON serial yang mendeskripsikan tingkat zoom, dimensi yang dipilih, balon/entitas yang dipilih, dan deskripsi status lainnya. Lihat Menyetel Status Awal untuk mempelajari cara menyetelnya.
showChartButtons boolean true false menyembunyikan tombol yang mengontrol jenis diagram (gelembung / garis / kolom) di sudut kanan atas.
showHeader boolean true false menyembunyikan label judul entitas (berasal dari label kolom pertama dalam tabel data).
showSelectListComponent boolean true false menyembunyikan daftar entitas yang terlihat.
showSidePanel boolean true {i>false <i}menyembunyikan panel sebelah kanan.
showXMetricPicker boolean true false menyembunyikan pemilih metrik untuk x.
showYMetricPicker boolean true false menyembunyikan pemilih metrik untuk y.
showXScalePicker boolean true false menyembunyikan pemilih skala untuk x.
showYScalePicker boolean true false menyembunyikan pemilih skala untuk y.
showAdvancedPanel boolean true false menonaktifkan kompartemen opsi di panel pengaturan.

Metode

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

Acara

Name Deskripsi Properti
error Diaktifkan saat 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 negara Pengguna telah berinteraksi dengan diagram dengan 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, 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.