Übersicht
Anzeige mit einer Anzeige, die im Browser mit SVG oder VML gerendert wird.
Beispiel
<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>
Derzeit gibt es keine Möglichkeit, den Titel eines Tachometerdiagramms wie bei anderen Google-Diagrammen anzugeben. Im Beispiel oben wird zur Anzeige des Titels einfaches HTML verwendet.
Außerdem ist die Option animation.startup
, die für viele andere Google-Diagramme verfügbar ist, nicht für das Tachometerdiagramm verfügbar. Wenn Sie eine Startanimation wünschen, zeichnen Sie zuerst das Diagramm mit den Werten, die auf null gesetzt sind. Zeichnen Sie dann noch einmal den Wert, auf den die Animation ausgerichtet werden soll.
Wird geladen
Der Paketname von google.charts.load
lautet "gauge"
.
google.charts.load('current', {packages: ['gauge']});
Der Klassenname der Visualisierung lautet google.visualization.Gauge
.
var visualization = new google.visualization.Gauge(container);
Datenformat
Jeder numerische Wert wird als Anzeigeinstrument dargestellt. Es werden zwei alternative Datenformate unterstützt:
- Zwei Spalten. Die erste Spalte sollte eine Zeichenfolge sein und die Beschriftung enthalten. Die zweite Spalte sollte eine Zahl sein und den Wert der Anzeige enthalten.
- Beliebige Anzahl numerischer Spalten Das Label jeder Anzeige ist das Label der Spalte.
Konfigurationsoptionen
Name | |
---|---|
Animation.Dauer |
Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Animationsdokumentation. Typ:Zahl
Standard: 400
|
Animation.Easing |
Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:
Typ: String
Standardeinstellung: „linear“
|
forceIFrame |
Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im IE8 ignoriert wird. Alle IE8-Diagramme werden in iFrames gezeichnet. Typ: Boolesch
Standard: false
|
GrünFarbe |
Die für den grünen Abschnitt zu verwendende Farbe in HTML-Farben. Typ: String
Standard: '#109618'
|
GrünVon |
Der niedrigste Wert für einen Bereich, der durch eine grüne Farbe gekennzeichnet ist. Typ: Zahl
Standard: keine
|
GreenTo |
Der höchste Wert für einen Bereich, der durch eine grüne Farbe gekennzeichnet ist. Typ: Zahl
Standard: keine
|
height |
Höhe des Diagramms in Pixeln. Typ: Zahl
Standard: Breite des Containers
|
große Ticken |
Labels für wichtige Markierung. Die Anzahl der Labels definiert die Anzahl der Hauptmarkierungen in allen Tachometern. Standardmäßig sind fünf Hauptmarkierungen vorhanden, mit den Labels des minimalen und maximalen Tachometerwerts. Typ:Stringarray
Standard: keine
|
max |
Der maximale Wert einer Anzeige. Typ: Zahl
Standard: 100
|
Min. |
Der minimale Wert einer Anzeige. Typ: Zahl
Standard: 0
|
Minderjährige |
Die Anzahl der kleinen Teilstriche der einzelnen Teilabschnitte. Typ:Zahl
Standard: 2
|
Rot |
Die für den roten Abschnitt zu verwendende Farbe in HTML-Farben. Typ: String
Standard: '#DC3912'
|
redFrom |
Der niedrigste Wert für einen Bereich, der mit einer roten Farbe gekennzeichnet ist. Typ: Zahl
Standard: keine
|
redTo |
Der höchste Wert für einen Bereich, der mit einer roten Farbe gekennzeichnet ist. Typ:Zahl
Standard: keine
|
width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standard: Breite des Containers
|
Gelb |
Die für den gelben Abschnitt zu verwendende Farbe in HTML-Farben. Typ: String
Standard: '#FF9900'
|
GelbVon |
Der niedrigste Wert für einen Bereich, der mit einer gelben Farbe gekennzeichnet ist. Typ: Zahl
Standard: keine
|
Gelb an |
Der höchste Wert für einen Bereich, der mit einer gelben Farbe gekennzeichnet ist. Typ:Zahl
Standard: keine
|
Methoden
Methode | |
---|---|
draw(data, options) |
Zeichnet das Diagramm. Rückgabetyp: Keine
|
clearChart() |
Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei. Rückgabetyp: Keine
|
Ereignisse
Keine ausgelösten Ereignisse.
Datenrichtlinie
Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.