Diese Seite wurde von der Cloud Translation API übersetzt.

Visualisierung: Säulendiagramm (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.

Overview
Beispiel
Loading
Datenformat
Konfigurationsoptionen
Methoden
Ereignisse
Datenrichtlinie

Übersicht

Ein vertikales Balkendiagramm, 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. Eine horizontale Version dieses Diagramms finden Sie im Balkendiagramm.

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:["columnchart"]});
      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.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

Wird geladen

Der Paketname „google.load“ lautet „"columnchart"“

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

Der Klassenname der Visualisierung lautet google.visualization.ColumnChart

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

Datenformat

Jede Zeile in der Tabelle steht für eine Gruppe benachbarter Balken.

Die erste Spalte in der Tabelle sollte ein String sein und stellt das Label dieser Balkengruppe dar. Darauf kann eine beliebige Anzahl von numerischen Spalten folgen, die jeweils die Balken mit derselben Farbe und relativen Position in jeder Gruppe darstellen.

Der Wert in einer bestimmten Zeile und Spalte steuert die Höhe des einzelnen Balkens, der durch diese Zeile und Spalte dargestellt wird.

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	Array von Strings oder Objekten	Standardfarben	Ein Array von Farben, wobei jedes Element die Farbe einer Reihe angibt. Sie sollten für jede Reihe ein Array-Element angeben. Bei `is3D=false` ist dies ein Array von HTML-Farben. Beispiel: color:['#00FF00','orange'] Bei `is3D=true` ist dies ein Array aus HTML-Farben oder Objekten dieses Typs: `{color:face_color, darker:shade_color}`, wobei `color` die Gesichtsfarbe des Elements und `darker` die Schattierungsfarbe ist. Wenn Sie jedoch eine HTML-Farbe für ein 3D-Objekt angeben, haben Gesicht und Schattierung die gleiche Farbe und der 3D-Effekt wird reduziert. Beispiel: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
enableTooltip	boolean	true	Ist sie auf „true“ gesetzt, werden Kurzinfos angezeigt, wenn der Nutzer auf eine Spalte 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.
is3D	boolean	false	Wenn dieser Wert auf „true“ gesetzt ist, wird eine dreidimensionale Änderung angezeigt.
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 Farbe für die Texteinträge der Legende. Mögliche Werte sind die der backgroundColor-Konfigurationsoption.
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 .
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()` 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 die Maus über einen Balken bewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergibt.	Zeile, Spalte
`onmouseout`	Wird ausgelöst, wenn der Nutzer den Mauszeiger von einem Balken 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 eine Leiste oder Legende klickt Bei Auswahl eines Balkens 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: Säulendiagramm (alte Version) Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.