Visualisasi: Ukuran

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

Ringkasan

Pengukur dengan panggilan, yang 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. Pada contoh di atas, HTML sederhana digunakan untuk menampilkan judul.

Selain itu, opsi animation.startup yang tersedia untuk banyak Google Chart lainnya tidak tersedia untuk Gauge Chart. Jika Anda ingin animasi startup, gambar diagram pada awalnya dengan nilai yang disetel 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 visualisasinya 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
animasi.durasi

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

Jenis: angka
Default: 400
animasi.easing

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

  • 'linear' - Kecepatan konstan.
  • 'in' - Relax in - Mulai dengan lambat dan percepat.
  • 'out' - Relax out - Memulai dengan cepat dan melambat.
  • 'inAndOut' - Kemudahan masuk dan keluar - Mulai dengan lambat, mempercepat, lalu memperlambat.
Jenis: string
Default: 'linear'
forceIFrame

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

Jenis: boolean
Default: false (salah)
WarnaHijau

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

Jenis: string
Default: '#109618'
hijauDari

Nilai terendah untuk rentang yang ditandai dengan warna hijau.

Jenis: angka
Default: tidak ada
hijauke

Nilai tertinggi untuk rentang yang ditandai dengan warna hijau.

Jenis: angka
Default: tidak ada
tinggi

Tinggi diagram dalam piksel.

Jenis: angka
Default: Lebar penampung
tanda centang utama

Label untuk tanda centang utama. Jumlah label menentukan jumlah tick besar pada semua pengukur. Defaultnya adalah lima tick utama, dengan label nilai pengukur minimal dan maksimal.

Jenis: Array string
Default: tidak ada
maks.

Nilai maksimal pengukur.

Jenis: angka
Default: 100
mnt

Nilai minimal pengukur.

Jenis: angka
Default: 0
centang minor

Jumlah bagian centang minor di setiap bagian centang utama.

Jenis:angka
Default: 2
warnaMerah

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

Jenis: string
Default: '#DC3912'
redFrom

Nilai terendah untuk rentang yang ditandai dengan warna merah.

Jenis: angka
Default: tidak ada
redTo

Nilai tertinggi untuk rentang yang ditandai dengan warna merah.

Jenis: angka
Default: tidak ada
lebar

Lebar diagram dalam piksel.

Jenis: angka
Default: Lebar penampung
warnaKuning

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

Jenis: string
Default: '#FF9900'
kuningDari

Nilai terendah untuk rentang yang ditandai dengan warna kuning.

Jenis: angka
Default: tidak ada
kuningTo

Nilai tertinggi untuk rentang yang ditandai dengan warna kuning.

Jenis: angka
Default: tidak ada

Metode

Metode
draw(data, options)

Menggambar diagram.

Jenis Hasil: tidak ada
clearChart()

Menghapus diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Hasil: 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.