Visualisasi: Ukuran

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

Ringkasan

Alat pengukur dengan dial, dirender dalam browser menggunakan SVG atau VML.

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':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Saat ini, tidak ada cara untuk menentukan judul diagram meteran seperti yang dapat Anda lakukan dengan Google Chart lainnya. Dalam contoh di atas, HTML sederhana digunakan untuk menampilkan judul.

Selain itu, opsi animation.startup yang tersedia untuk banyak Google Chart lainnya tidak tersedia untuk Diagram Meteran. Jika Anda menyukai animasi startup, gambarlah diagram pada awalnya dengan nilai yang ditetapkan ke nol, lalu gambar lagi dengan nilai yang ingin Anda animasikan.

Memuat

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

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

Nama class visualisasi adalah google.visualization.Gauge. 

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

Format Data

Setiap nilai numerik ditampilkan sebagai ukuran. Dua format data alternatif didukung:

  1. Dua kolom. Kolom pertama harus berupa string, dan berisi label pengukur. Kolom kedua harus berupa angka, dan berisi nilai pengukur.
  2. Berapa pun jumlah kolom numerik. Label setiap pengukur adalah label kolom.

Opsi Konfigurasi

Name
animation.duration

Durasi animasi, dalam milidetik. Untuk detailnya, lihat dokumentasi animasi.

Jenis: nomor
Default: 400
animation.easing

Fungsi easing yang diterapkan pada animasi. Tersedia opsi-opsi berikut:

  • 'linear' - Kecepatan konstan.
  • 'in' - Kemudahan masuk - Mulai dengan lambat lalu percepat.
  • 'out' - Mengurangi - Mulai dengan cepat dan perlahan.
  • 'inAndOut' - Mudah masuk dan keluar - Mulai perlahan, percepat, lalu perlambat.
Jenis: string
Default: 'linear'
forceIFrame

Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.)

Jenis: boolean
Default: false
greenColor

Warna yang akan digunakan untuk bagian hijau, dalam notasi warna HTML.

Jenis: string
Default: '#109618'
greenFrom

Nilai terendah untuk rentang yang ditandai dengan warna hijau.

Jenis: nomor
Default: tidak ada
greenTo

Nilai tertinggi untuk rentang yang ditandai dengan warna hijau.

Jenis: nomor
Default: tidak ada
tinggi

Tinggi diagram dalam piksel.

Jenis: nomor
Default: Lebar penampung
majorTicks

Label untuk tanda centang utama. Jumlah label menentukan jumlah titik skala utama di semua alat pengukur. Defaultnya adalah lima titik skala utama, dengan label nilai pengukur minimal dan maksimal.

Jenis: Array string
Default: tidak ada
max

Nilai maksimal pengukur.

Jenis: nomor
Default: 100
mnt

Nilai minimal dari pengukur.

Jenis: nomor
Default: 0
minorTicks

Jumlah titik skala minor di setiap bagian tick utama.

Jenis:angka
Default: 2
redColor

Warna yang akan digunakan untuk bagian merah, dalam notasi warna HTML.

Jenis: string
Default: '#DC3912'
redFrom

Nilai terendah untuk rentang yang ditandai dengan warna merah.

Jenis: nomor
Default: tidak ada
redTo

Nilai tertinggi untuk rentang yang ditandai dengan warna merah.

Jenis: nomor
Default: tidak ada
lebar

Lebar diagram dalam piksel.

Jenis: nomor
Default: Lebar penampung
yellowColor

Warna yang akan digunakan untuk bagian kuning, dalam notasi warna HTML.

Jenis: string
Default: '#FF9900'
yellowFrom

Nilai terendah untuk rentang yang ditandai dengan warna kuning.

Jenis: nomor
Default: tidak ada
yellowTo

Nilai tertinggi untuk rentang yang ditandai dengan warna kuning.

Jenis: nomor
Default: tidak ada

Metode

Metode
draw(data, options)

Menggambar diagram.

Jenis Pengembalian: tidak ada
clearChart()

Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Pengembalian: tidak ada

Acara

Tidak ada peristiwa yang dipicu.

Kebijakan Data

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