Visualisierung: Anzeige

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

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

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

  • "linear" – Konstante Geschwindigkeit
  • „in“ – Beschleunigen – langsam starten.
  • „out“ – Ease Out – Starte schnell und langsamer.
  • „inAndOut“ – Leichtes Hin- und Herausbewegen: Starte langsam, beschleunige und dann langsamer.
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.