Omówienie
Wskaźnik z pokrętłem renderowany w przeglądarce za pomocą SVG lub VML.
Przykład
<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>
W tej chwili nie ma możliwości określenia tytułu wykresu wskaźnikowego, tak jak w przypadku innych wykresów Google. W powyższym przykładzie do wyświetlenia tytułu użyto prostego kodu HTML.
W przypadku wielu innych wykresów Google opcja animation.startup
jest niedostępna. Jeśli chcesz użyć animacji na początku, na początku narysuj wykres z wartościami ustawionymi na zero, a potem ponownie narysuj wartość, którą chcesz animować.
Wczytuję
Nazwa pakietu google.charts.load
to "gauge"
.
google.charts.load('current', {packages: ['gauge']});
Nazwa klasy wizualizacji to google.visualization.Gauge
.
var visualization = new google.visualization.Gauge(container);
Format danych
Każda wartość liczbowa jest przedstawiona w postaci miernika. Obsługiwane są 2 alternatywne formaty danych:
- Dwie kolumny. Pierwsza kolumna powinna być ciągiem i powinna zawierać etykietę wskaźnika. Druga kolumna powinna być liczbą i powinna zawierać wartość wskaźnika.
- Dowolna liczba kolumn liczbowych. Etykieta każdego wskaźnika to etykieta kolumny.
Opcje konfiguracji
Nazwa | |
---|---|
animacja.czas trwania |
Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji. Typ: liczba
Wartość domyślna: 400
|
animacja.wygładzanie |
Funkcja wygładzania zastosowana w animacji. Dostępne są te opcje:
Typ: ciąg znaków
Domyślnie: „linear”
|
forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
zielony |
Kolor używany jako zielona sekcja, w notacji kolorów HTML. Typ: ciąg znaków
Domyślny: „#109618”
|
zielony z |
Najniższa wartość zakresu oznaczonego zielonym kolorem. Typ: liczba
Wartość domyślna: brak
|
Zielony |
Najwyższa wartość dla zakresu oznaczonego zielonym kolorem. Typ: liczba
Wartość domyślna: brak
|
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: szerokość kontenera
|
znaczki |
Etykiety głównych znaczników. Liczba etykiet definiuje liczbę głównych znaczników we wszystkich wskaźnikach. Wartość domyślna to 5 głównych znaczników z etykietami wartości minimalnej i maksymalnej. Typ: Tablica ciągów znaków
Wartość domyślna: brak
|
maks. |
Maksymalna wartość wskaźnika. Typ: liczba
Wartość domyślna: 100
|
minuta |
Minimalna wartość wskaźnika. Typ: liczba
Wartość domyślna: 0
|
krzyżyki |
Liczba sekcji drugiego taktu w każdej jego sekcji. Typ:liczba
Wartość domyślna: 2
|
czerwony |
Kolor używany w czerwonej sekcji w notacji koloru HTML. Typ: ciąg znaków
Domyślny: „#DC3912”
|
czerwony od |
Najniższa wartość zakresu oznaczonego czerwonym kolorem. Typ: liczba
Wartość domyślna: brak
|
czerwony |
Najwyższa wartość dla zakresu oznaczonego czerwonym kolorem. Typ: liczba
Wartość domyślna: brak
|
szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna: szerokość kontenera
|
żółty |
Kolor używany w żółtej sekcji, w notacji kolorów HTML. Typ: ciąg znaków
Domyślny: „#FF9900”
|
yellowFrom |
Najniższa wartość zakresu oznaczonego żółtym kolorem. Typ: liczba
Wartość domyślna: brak
|
yellowto, |
Najwyższa wartość dla zakresu oznaczonego żółtym kolorem. Typ: liczba
Wartość domyślna: brak
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
Zdarzenia
Brak wywołanych zdarzeń.
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane do żadnego serwera.