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:
- Dua kolom. Kolom pertama harus berupa string dan berisi label pengukur. Kolom kedua harus berupa angka, dan berisi nilai pengukur.
- 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:
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.