Visualisierung: Flächendiagramm (Bild)

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

  1. Overview
  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 „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 am selben Punkt der X-Achse. In der Visualisierung werden sie durch eine gerade Linie verbunden und der Bereich unterhalb der Linie ausgefüllt.

Die Daten werden nach Spalte verarbeitet, beginnend bei Spalte null und aufsteigend. Sie sollten zuerst die höchsten Linien und dann die unteren Linien schreiben, denn wenn Sie zuerst eine untere Linie zeichnen, würde eine höhere Linie übermalen und die unteren Linien ausblenden. Versuchen Sie daher, dass Spalte 1 höhere Punkte als Spalte 2, Spalte 2 höher als Spalte 3 usw. hat. Wenn sich in einer rechten Spalte ein oder zwei Punkte höher als in einer linken Spalte befinden, kann diese die untere Linie teilweise verdeckt werden, sollte aber dennoch sichtbar sein.

Alle Daten müssen numerische Werte haben, mit Ausnahme des ersten Datentyps. Dieser kann numerisch oder String sein. Ist die erste Spalte ein Stringtyp, werden die ersten Spalteneinträge als Beschriftungen auf dem X angezeigt. Wenn die erste Spalte eine Zahl ist, werden keine Labels auf der X-Achse angezeigt. Alle Spalten (außer die erste) müssen Zahlen enthalten. Die Anzahl der Spalten ist unbegrenzt.

Konfigurationsoptionen

Name Typ Standard Beschreibung
backgroundColor String #FFFFFF (Weiß) Die Hintergrundfarbe für das Diagramm im Farbformat der Chart API.
Farben Array<string> Auto Damit können Sie jeder Datenreihe bestimmte Farben zuweisen. Farben werden im Farbformat der Chart API angegeben. Die Farbe i wird für die Datenspalte i verwendet und springt an den Anfang, wenn mehr Datenspalten als Farben vorhanden sind. Wenn Varianten einer einzelnen Farbe für alle Reihen zulässig sind, verwenden Sie stattdessen die Option color.
enableEvents boolean false Veranlasst, dass Diagramme vom Nutzer ausgelöste Ereignisse wie Klicks oder Mouseover auslösen. Wird nur für bestimmte Diagrammtypen unterstützt. Weitere Informationen finden Sie unten im Abschnitt Ereignisse.
height number Höhe des Containers Höhe des Diagramms in Pixeln.
Legende String 'rechts' Position und Typ der Legende. Folgende sind möglich:
  • "right": rechts neben dem Diagramm
  • 'left' – links neben dem Diagramm
  • 'top' (über dem Diagramm)
  • 'bottom': unter dem Diagramm
  • "none": Es wird keine Legende angezeigt.
Max. number automatisch Der Maximalwert, der auf der Y-Achse angezeigt werden soll.
Min. number automatisch Der Mindestwert, der auf der Y-Achse angezeigt werden soll.
showCategoryLabels boolean true Wenn dieser Wert auf „false“ gesetzt ist, werden die Beschriftungen der Kategorien (die Beschriftungen der X-Achse) entfernt.
showValueLabels boolean true Wenn dieser Wert auf „false“ gesetzt ist, werden die Beschriftungen der Werte (die Beschriftungen der Y-Achse) entfernt.
Titel String kein Titel Text, der über dem Diagramm angezeigt werden soll.
valueLabelsInterval number Auto Das Intervall, in dem die Labels der Wertachsen angezeigt werden sollen. Beispiel: Wenn min 0 ist, max 100 und valueLabelsInterval 20 ist, werden im Diagramm Achsenlabels bei (0, 20, 40, 60, 80 100) angezeigt.
width number Breite des Containers Breite des Diagramms in Pixeln.

Methoden

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

Ereignisse

Sie können sich registrieren, um die auf der Seite Allgemeine Bilddiagramm beschriebenen Ereignisse zu hören.

Datenrichtlinie

Weitere Informationen finden Sie in der Protokollierungsrichtlinie für die Chart API.