Visualisierung: Anzeige

  1. Übersicht
  2. Beispiel
  3. Loading
  4. Datenformat
  5. Konfigurationsoptionen
  6. Methoden
  7. Ereignisse
  8. Datenrichtlinie

Ü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:

  1. 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.
  2. 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:

  • 'linear' - Konstante Geschwindigkeit.
  • 'In' - Ease-In - Startet langsam und beschleunigt.
  • 'out' - Ease Out - Startet schnell und verlangsamt.
  • „inAndOut“ – Einfach ein- und ausschalten – langsam starten, beschleunigen und verlangsamen
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.