Visualisierung: Flächendiagramm (alte Version)

Verworfen

Diese Visualisierung wurde durch eine neue Version ersetzt. Verwenden Sie stattdessen diese. Informationen zur einfachen Migration finden Sie auf der Seite Versionshinweise.

Übersicht

Ein Flächendiagramm, das im Browser mit SVG oder VML gerendert wird. Zeigt Tipps an, wenn du auf Punkte klickst. Animiert Zeilen, wenn auf Legendeneinträge geklickt wird.

Von: Google

Beispiel

Selbst programmieren auf dem Visualization Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Wird geladen

Der Paketname von google.load lautet "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

Der Klassenname der Visualisierung lautet google.visualization.AreaChart 

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

Datenformat

Die erste Spalte sollte ein String mit dem Kategorielabel sein. Darauf kann eine beliebige Anzahl numerischer Spalten folgen. Jede Spalte wird als separate Zeile angezeigt.

Konfigurationsoptionen

Name Typ Standard Beschreibung
Achsenfarbe String oder Objekt Standardfarbe Die Farbe der Achse. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
Achsenhintergrundfarbe String oder Objekt Standardfarbe Der Rahmen um den Achsenhintergrund. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
Achsenschriftgröße Zahl automatisch Schriftgröße des Diagrammachstexts in Pixeln.
backgroundColor String oder Objekt Standardfarbe Die Hintergrundfarbe für den Hauptbereich des Diagramms. Es gibt folgende Optionen:
  • Ein String mit einer von HTML unterstützten Farbe, z. B. „red“ oder „#00cc00“
  • Ein Objekt mit den Properties stroke fill und strokeSize. stroke und fill müssen ein String mit einer Farbe sein. " Bindestriche" ist eine Zahl. Beispiel: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Wenn Sie „Nur Füllung“ ohne Strich verwenden möchten, verwenden Sie stroke:null, strokeSize: 0.
Rahmenfarbe String oder Objekt Standardfarbe Der Rahmen um Diagrammelemente. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
Farben Stringarray Standardfarben Die für die Diagrammelemente zu verwendenden Farben. Ein String-Array. Jedes Element ist ein String, der von HTML unterstützt wird, z. B. „red“ oder „#00cc00“.
Kurzinfo aktivieren boolean true Wenn diese Option auf „true“ gesetzt ist, werden Kurzinfos angezeigt, wenn der Nutzer auf einen Datenpunkt klickt.
Fokusrahmenfarbe String oder Objekt Standardfarbe Der Rahmen um Diagrammelemente, die gerade im Fokus sind (mit der Maus zeigen). Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
height Zahl Containerhöhe Höhe des Diagramms in Pixeln.
gestapelt boolean false Bei der Einstellung „true“ werden die Zeilenwerte gestapelt (kumuliert).
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.
LegendeHintergrundfarbe String oder Objekt Standardfarbe Die Hintergrundfarbe für den Legendenbereich des Diagramms. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
LegendeSchriftgröße Zahl automatisch Die Größe der Legendenschrift in Pixeln.
LegendeTextfarbe String oder Objekt Standardfarbe Die Textfarbe der Legende. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
Zeilengröße Zahl 2 Linienbreite in Pixeln Verwenden Sie Null, um alle Linien auszublenden und nur die Punkte anzuzeigen.
logScale boolean false Bei „true“ sollte die Hauptachse logarithmisch skaliert werden.
max Zahl automatisch Gibt die Rasterlinie für die höchste y-Achse an. Die tatsächliche Rasterlinie ist der größere von zwei Werten: der maximale Optionswert oder der höchste Datenwert, aufgerundet auf die nächsthöhere Rastermarkierung.
Min. Zahl automatisch Gibt die unterste Y-Achsen-Rasterlinie an. Die tatsächliche Rasterlinie ist der untere der beiden Werte: der minimale Optionswert oder der niedrigste Datenwert, abgerundet auf die nächste untere Rastermarkierung.
Punktgröße Zahl 3 Größe der angezeigten Punkte in Pixeln. Null verwenden, um alle Punkte auszublenden.
umgekehrte Achse boolean false Wenn dieses Feld auf „true“ gesetzt ist, werden Kategorien von rechts nach links gezeichnet. Standardmäßig wird von links nach rechts gezeichnet.
Kategorien anzeigen boolean true Falls wahr, werden Kategorielabels angezeigt. Wenn „false“, wird dies nicht der Fall sein.
title String kein Titel Text, der über dem Diagramm angezeigt werden soll.
Titel X String kein Titel Text, der unterhalb der horizontalen Achse angezeigt werden soll.
Titel Y String kein Titel Text, der von der vertikalen Achse angezeigt werden soll.
Titelfarbe String oder Objekt Standardfarbe Die Farbe für den Diagrammtitel. Mögliche Werte sind die Werte der Konfigurationsoption backgroundColor.
Titelschriftgröße Zahl automatisch Die Schriftgröße für den Diagrammtitel in Pixeln.

tooltipFontSize		 Zahl 11 Die Schriftgröße des Kurzinfotexts. Dieser Wert kann reduziert werden, wenn die Kurzinfo zu klein ist, um den Text in der angegebenen Schriftart zu speichern.
tooltipHöhe
 Zahl 60 Höhe der Kurzinfo in Pixel. Die Höhe der Kurzinfo ist festgelegt und wird nicht an die Länge oder Schriftgröße des Textes angepasst. Aber alles, was größer als 1/3 der Diagrammhöhe ist, wird zugeschnitten.
tooltipBreite Zahl 120 Die Breite der Kurzinfo in Pixel. Die Breite der Kurzinfo ist unveränderlich und wird nie an die Länge oder Schriftgröße des Textes angepasst. Alles, was größer als das Diagramm ist, wird zugeschnitten.
width Zahl Containerbreite Breite des Diagramms in Pixeln.

Methoden

Methode Rückgabetyp Beschreibung
draw(data, options) keine Zeichnet das Diagramm.
getSelection() Array von Auswahlelementen Standardimplementierung von getSelection() Ausgewählte Elemente sind Spalten- und Zellenelemente. Der Nutzer kann jeweils nur eine Spalte oder Zelle auswählen.
setSelection() keine Standardmäßige setSelection()-Implementierung, unterstützt jedoch die Auswahl nur eines Elements. Behandelt jeden Auswahleintrag als Spalten- oder Zellenauswahl. Die Labelspalte kann nicht ausgewählt werden.

Ereignisse

Name Beschreibung Attribute
onmouseover Wird ausgelöst, wenn der Nutzer den Mauszeiger auf einen Punkt bewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergibt. Zeile, Spalte
onmouseout Wird ausgelöst, wenn der Nutzer die Maus von einem Punkt wegbewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergibt. Zeile, Spalte
ready Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode draw aufrufen. Sie sollten sie erst aufrufen, nachdem das Ereignis ausgelöst wurde. –
select Wird ausgelöst, wenn der Nutzer auf einen Punkt oder eine Legende klickt Wenn ein Punkt ausgewählt ist, wird die entsprechende Zelle in der Datentabelle ausgewählt. Wenn eine Legende ausgewählt ist, wird auch die entsprechende Spalte in der Datentabelle ausgewählt. Rufen Sie getSelection() auf, um zu erfahren, was ausgewählt wurde. –

Datenrichtlinie

Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.