Diese Seite wurde von der Cloud Translation API übersetzt.

Visualisierung: Flächendiagramm (alte Version)

Eingestellte Funktionen

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

Übersicht

Ein Flächendiagramm, das im Browser mit SVG oder VML gerendert wird. Zeigt Tipps an, wenn auf Punkte geklickt wird. Beim Klicken auf Legendeneinträge werden Linien animiert.

Von: Google

Beispiel

Im Visualization Playground selbst programmieren

<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 „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 sein und die Kategoriebeschriftung enthalten. Es kann eine beliebige Anzahl von Spalten folgen, die alle numerisch sein müssen. Jede Spalte wird als separate Zeile angezeigt.

Konfigurationsoptionen

Name	Typ	Standard	Beschreibung
axisColor	String oder Objekt	Standardfarbe	Die Farbe der Achse. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
axisBackgroundColor	String oder Objekt	Standardfarbe	Der Rahmen um den Hintergrund der Achse. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
axisFontSize	number	automatisch	Schriftgröße des Textes der Diagrammachse in Pixeln.
backgroundColor	String oder Objekt	Standardfarbe	Die Hintergrundfarbe für den Hauptbereich des Diagramms. Folgende Optionen sind möglich: Ein String mit einer von HTML unterstützten Farbe, z. B. „red“ oder „#00cc00“. Ein Objekt mit den Eigenschaften `stroke`, `fill` und `strokeSize`. `stroke` und `fill` sollten ein String mit einer Farbe sein. "strokeSize" ist eine Zahl. Beispiel: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Wenn Sie nur Füllung ohne Kontur verwenden möchten, verwenden Sie `stroke:null, strokeSize: 0`.
borderColor	String oder Objekt	Standardfarbe	Der Rahmen um Diagrammelemente. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
Farben	Stringarray	Standardfarben	Die Farben, die für die Diagrammelemente verwendet werden sollen. Ein Array von Strings. Jedes Element ist ein String mit einer von HTML unterstützten Farbe, z. B. „red“ oder „#00cc00“.
enableTooltip	boolean	true	Ist sie auf „true“ gesetzt, werden Kurzinfos angezeigt, wenn der Nutzer auf einen Datenpunkt klickt.
focusBorderColor	String oder Objekt	Standardfarbe	Der Rahmen um Diagrammelemente, die im Fokus sind (mit der Maus darauf zeigen). Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
height	number	Höhe des Containers	Höhe des Diagramms in Pixeln.
isStacked	boolean	false	Wird die Richtlinie auf „true“ gesetzt, werden die Zeilenwerte gestapelt (akkumuliert).
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.
legendBackgroundColor	String oder Objekt	Standardfarbe	Die Hintergrundfarbe für den Legendenbereich des Diagramms. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
legendFontSize	number	automatisch	Die Größe der Legendenschrift in Pixeln.
legendTextColor	String oder Objekt	Standardfarbe	Die Schriftfarbe der Legende. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
lineSize	number	2	Linienbreite in Pixeln. Verwenden Sie „0“, um alle Linien auszublenden und nur die Punkte anzuzeigen.
logScale	boolean	false	Falls wahr, sollte die Hauptachse logarithmisch skaliert werden.
Max.	number	automatisch	Gibt die höchste Rasterlinie für die Y-Achse an. Die tatsächliche Rasterlinie ist der größere der beiden Werte: der Maximalwert oder der höchste Datenwert, und auf die nächsthöhere Rastermarkierung aufgerundet.
Min.	number	automatisch	Gibt die unterste Y-Achsen-Rasterlinie an. Die tatsächliche Rasterlinie ist der niedrigere von zwei Werten: der Mindestwert oder der niedrigste Datenwert, der auf die nächstniedrigere Rastermarkierung abgerundet wird.
pointSize	number	3	Größe der angezeigten Punkte in Pixeln. Geben Sie 0 ein, um alle Punkte auszublenden.
reverseAxis	boolean	false	Wenn die Richtlinie auf „true“ gesetzt ist, werden Kategorien von rechts nach links gezeichnet. Standardmäßig wird von links nach rechts gezeichnet.
showCategories	boolean	true	Falls wahr, werden Kategorielabels angezeigt. Bei „false“ wird keine Aktion ausgeführt.
Titel	String	kein Titel	Text, der über dem Diagramm angezeigt werden soll.
titleX	String	kein Titel	Text, der unter der horizontalen Achse angezeigt werden soll.
titleY	String	kein Titel	An der vertikalen Achse anzuzeigender Text.
titleColor	String oder Objekt	Standardfarbe	Die Farbe für den Diagrammtitel. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
titleFontSize	number	automatisch	Die Schriftgröße des Diagrammtitels in Pixeln.
tooltipFontSize	number	11	Die Schriftgröße der Kurzinfo. Dieser Wert kann reduziert sein, wenn die Kurzinfo zu klein ist, um den Text in der angegebenen Schriftart aufzunehmen.
tooltipHeight	number	60	Die Höhe der Kurzinfo in Pixeln. Die Höhe der Kurzinfo ist unveränderlich. Sie wird nie größer oder kleiner, um die Länge oder Schriftgröße des Textes anzupassen. Aber alles, was über 1/3 der Diagrammhöhe liegt, wird abgeschnitten.
tooltipWidth	number	120	Die Breite der Kurzinfo in Pixeln. Die Breite der Kurzinfo ist festgelegt. Sie wird niemals vergrößert oder verkleinert und so an die Länge oder Schriftgröße des Textes angepasst. Aber alles, was größer als die Diagrammbreite ist, wird abgeschnitten.
width	number	Breite des Containers	Breite des Diagramms in Pixeln.

Methoden

Methode	Rückgabetyp	Beschreibung
`draw(data, options)`	keine	Zeichnet das Diagramm.
`getSelection()`	Array von Auswahlelementen	Standardimplementierung von `getSelection()` Die ausgewählten Elemente sind Spalten- und Zellenelemente. Der Nutzer kann jeweils nur eine Spalte oder Zelle auswählen.
`setSelection()`	keine	Standardimplementierung von `setSelection()`, 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 die Maus über einen Punkt bewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergibt.	Zeile, Spalte
`onmouseout`	Wird ausgelöst, wenn der Nutzer den Mauszeiger von einem Punkt wegbewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergeben werden.	Zeile, Spalte
`ready`	Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode `draw` aufrufen. Der Aufruf erfolgt erst nach dem Auslösen des Ereignisses.	Ohne
`select`	Wird ausgelöst, wenn der Nutzer auf einen Punkt oder eine Legende klickt Bei Auswahl eines Punkts wird die entsprechende Zelle in der Datentabelle ausgewählt. Bei Auswahl einer Legende wird die entsprechende Spalte in der Datentabelle ausgewählt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie `getSelection()` auf.	Ohne

Datenrichtlinie

Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.

Visualisierung: Flächendiagramm (alte Version) Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.