Visualisierung: Flächendiagramm (Bild)

Wichtig:Der Bereich „Bilddiagramme“ von Google Chart Tools wurde am 20. April 2012 offiziell eingestellt. Es wird gemäß unserer Richtlinie zur Einstellung von Produkten und Diensten weiterhin funktionieren.

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

Übersicht

Ein Flächendiagramm, das mit der Google Charts API als Bild 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:["imageareachart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Wird geladen

Der Paketname von google.charts.load lautet "imageareachart" 

  google.charts.load('current', {packages: ['imageareachart']});

Der Klassenname der Visualisierung lautet google.visualization.ImageAreaChart 

  var visualization = new google.visualization.ImageAreaChart(container);

Datenformat

Jede Spalte stellt eine Linie im Diagramm dar. Jeder Eintrag entspricht dem Wert der y-Achse an derselben x-Achse. Die Visualisierung verbindet sie mit einer geraden Linie und füllt dann den Bereich unter der Linie aus.

Die Daten werden nach Spalte verarbeitet, beginnend bei Spalte 0, und sie werden erhöht. Schreiben Sie zuerst die oberen und dann die unteren Zeilen. Wenn Sie also zuerst eine untere Linie zeichnen würden, würde eine höhere auf der unteren Linie ausgeblendet werden. Daher sollte Spalte 1 höhere Punkte als Spalte 2, Spalte 2 usw. haben. Wenn in der rechten Spalte ein oder zwei Punkte höher als eine linke Spalte sind, wird die untere Zeile unter Umständen teilweise verdeckt. Sie sollte aber weiterhin sichtbar sein.

Alle Daten müssen einen numerischen Typ haben, mit Ausnahme des ersten, der entweder numerisch oder String sein kann. Wenn die erste Spalte ein Stringtyp ist, werden die ersten Spalteneinträge als Labels auf dem X angezeigt. Wenn die erste Spalte eine Zahl ist, werden keine Labels für die X-Achse angezeigt. Alle Spalten (außer der ersten) müssen Zahlen sein. Die Anzahl der Spalten ist nicht begrenzt.

Konfigurationsoptionen

Name Typ Standard Beschreibung
backgroundColor String „#FFFFFF“ (weiß) Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API.
Farben Array<string> Automatisch Hiermit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben. Farbe i wird für Datenspalte i verwendet und schließt sich an den Anfang, wenn es mehr Datenspalten als Farben gibt. Wenn Varianten einer einzigen Farbe für alle Reihen akzeptabel sind, verwenden Sie stattdessen die Option color.
enableEvents boolean false Veranlasst Diagramme, dass vom Nutzer ausgelöste Ereignisse wie Klicken oder Mouseover ausgelöst werden. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse.
height Zahl Containerhöhe Höhe des Diagramms in Pixeln.
Legende String „right“ Position und Typ der Legende. Folgende sind möglich:
  • „right“: rechts neben dem Diagramm
  • „Links“ – Links neben dem Diagramm
  • 'Oben': Oberhalb des Diagramms.
  • 'bottom' – unter dem Diagramm.
  • „Keine“: Es wird keine Legende angezeigt.
max Zahl automatisch Der maximale Wert, der auf der Y-Achse angezeigt werden soll.
Min. Zahl automatisch Der minimale Wert, der auf der Y-Achse angezeigt werden soll.
Kategorielabels anzeigen boolean true Wenn dieser Wert auf „false“ gesetzt ist, werden die Labels der Kategorien (Labels der X-Achse) entfernt.
Wertlabels anzeigen boolean true Wenn dieser Wert auf „false“ gesetzt ist, werden die Labels der Werte (Labels für die Y-Achse) entfernt.
title String kein Titel Text, der über dem Diagramm angezeigt werden soll.
WertlabelsIntervall Zahl Automatisch Das Intervall, in dem Labels für Wertachsen angezeigt werden. Wenn min beispielsweise 0 ist, max 100 ist und valueLabelsInterval 20 ist, werden im Diagramm Achsenlabels mit (0, 20, 40, 60, 80 100) angezeigt.
width Zahl Containerbreite Breite des Diagramms in Pixeln.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) keine Zeichnet das Diagramm.

Ereignisse

Sie können sich registrieren, damit Sie die auf der Seite Generische Bildgrafik beschriebenen Ereignisse hören.

Datenrichtlinie

Weitere Informationen finden Sie in der Chart API-Protokollierungsrichtlinie.