Visualisierung: Balkendiagramm (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.

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

Übersicht

Ein horizontales Balkendiagramm, 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. Eine vertikale Version dieses Diagramms finden Sie im Spaltendiagramm.

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:["barchart"]});
      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.BarChart(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 von google.load lautet "barchart" 

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

Der Klassenname der Visualisierung lautet google.visualization.BarChart 

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

Datenformat

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

Die erste Spalte in der Tabelle sollte ein String sein, der das Label dieser Balkengruppe darstellt. Es 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 bestimmt die Höhe des einzelnen Balkens, der durch diese Zeile und Spalte dargestellt wird.

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 Array von Strings oder Objekten Standardfarben

Ein Array von Farben, wobei jedes Element die Farbe einer Reihe angibt. Sie sollten für jede Datenreihe ein Arrayelement angeben.

  • Wenn is3D=false, ist dies ein Array von HTML-Farben. Beispiel: color:['#00FF00','orange']
  • Bei is3D=true ist dies ein Array mit HTML-Farben oder Objekten dieses Typs: {color:face_color, darker:shade_color}, wobei color die Gesichtsfarbe des Elements und darker die Schattierungsfarbe ist. Wenn du jedoch eine HTML-Farbe für ein 3D-Objekt angibst, haben Gesicht und Schattierung dieselbe Farbe und der 3D-Effekt wird reduziert. Beispiel: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
Kurzinfo aktivieren boolean true Ist die Richtlinie auf „true“ gesetzt, werden Kurzinfos angezeigt, wenn der Nutzer auf einen Balken 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.
Is3D boolean false Wenn dieser Wert auf „true“ gesetzt ist, wird eine dreidimensionale Änderung angezeigt.
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.
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.
umgekehrte Achse boolean true Ist die Richtlinie auf „true“ gesetzt (Standardeinstellung), werden Kategorien von oben nach unten gezeichnet. Wird die Richtlinie auf „false“ gesetzt, werden Balken von unten nach unten 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 nur die Auswahl von einem Element. 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 Balken bewegt und die Zeilen- und Spaltenindexe der entsprechenden Zelle übergibt. Zeile, Spalte
onmouseout Wird ausgelöst, wenn der Nutzer die Maus von einem Balken 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 eine Leiste oder Legende klickt Wenn ein Balken ausgewählt ist, wird auch die entsprechende Zelle in der Datentabelle ausgewählt. Ist eine Legende ausgewählt, 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.