Übersicht
Eine Anzeige mit einem Regler, 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>
Im Moment gibt es keine Möglichkeit, den Titel eines Tachometerdiagramms anzugeben, wie dies bei anderen Google-Diagrammen der Fall ist. Im obigen Beispiel wird zur Anzeige des Titels einfacher HTML-Code verwendet.
Außerdem ist die Option animation.startup, die für viele andere Google Charts verfügbar ist, für das Tachometerdiagramm nicht verfügbar. Wenn Sie eine Startanimation erstellen möchten, zeichnen Sie das Diagramm zuerst mit den Werten auf null und dann noch einmal mit dem Wert, zu dem das Diagramm animiert werden soll.
Wird geladen
Der Paketname „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 angezeigt. Es werden zwei alternative Datenformate unterstützt:
- Zwei Spalten. Die erste Spalte sollte eine Zeichenfolge sein und die Anzeigeinstrumente enthalten. Die zweite Spalte sollte eine Zahl sein und den Wert der Anzeige enthalten.
- Beliebige Anzahl numerischer Spalten Die Beschriftung jedes Tachometers ist die Beschriftung der Spalte.
Konfigurationsoptionen
| Name | |
|---|---|
| animation.duration |
Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Dokumentation zu Animationen. 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 in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.) Typ: Boolesch
Standard: false
|
| greenColor |
Die für den grünen Bereich zu verwendende Farbe in HTML-Farbschreibweise. Typ: String
Standard: #109618
|
| greenFrom |
Der niedrigste Wert für einen Bereich, der grün markiert ist. Typ:Zahl
Standard: keine
|
| greenTo |
Der höchste Wert für einen grün markierten Bereich. Typ:Zahl
Standard: keine
|
| height |
Höhe des Diagramms in Pixeln. Typ:Zahl
Standardeinstellung:Breite des Containers
|
| majorTicks |
Labels für wichtige Teilstriche. Die Anzahl der Labels definiert die Anzahl der größeren Markierungspunkte auf allen Tachometern. Die Standardeinstellung umfasst fünf wichtige Markierungen mit den Labels für den Mindest- und Höchstwert. Typ:String-Array
Standard: keine
|
| Max. |
Der Maximalwert eines Anzeigeinstruments. Typ:Zahl
Standard: 100
|
| Min. |
Der Mindestwert eines Anzeigeinstruments. Typ:Zahl
Standard: 0
|
| minorTicks |
Die Anzahl der kleinen Teilstriche in jedem großen Teilstrichabschnitt. Typ:Nummer
Standard: 2
|
| redColor |
Die für den roten Bereich zu verwendende Farbe in HTML-Farbschreibweise. Typ: String
Standard: #DC3912
|
| redFrom |
Der niedrigste Wert für einen rot markierten Bereich. Typ:Zahl
Standard: keine
|
| redTo |
Der höchste Wert für einen rot markierten Bereich. Typ:Zahl
Standard: keine
|
| width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standardeinstellung:Breite des Containers
|
| yellowColor |
Die für den gelben Bereich zu verwendende Farbe in HTML-Farbschreibweise. Typ: String
Standard: #FF9900
|
| yellowFrom |
Der niedrigste Wert für einen Bereich, der gelb markiert ist. Typ:Zahl
Standard: keine
|
| yellowTo |
Der höchste Wert für einen Bereich, der gelb markiert ist. Typ:Zahl
Standard: keine
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Return Type: Kein
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
Ereignisse
Keine ausgelösten Ereignisse.
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.