Visualisierung: Balkendiagramm (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 Balkendiagramm, 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:["imagebarchart"]});
      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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Wird geladen

Der Paketname „google.charts.load“ lautet „"imagebarchart"“ 

  google.charts.load("current", {packages: [[]"imagebarchart"]});

Der Klassenname der Visualisierung lautet google.visualization.ImageBarChart 

  var visualization = new google.visualization.ImageBarChart(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 Reihe von Balken dargestellt. Wenn die Datentabelle mehr als eine numerische Spalte enthält, werden die Werte in einer Zeile als gestapelte Balken angezeigt.

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.
isStacked boolean true Steuert, ob mehrere Datenspalten als gestapelte Balken (im Gegensatz zu gruppierten Balken) angezeigt werden.
isVertical boolean false Steuert, ob die Balken vertikal sind.
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 die Richtlinie auf „false“ gesetzt ist, werden die Labels der Kategorien entfernt.
showValueLabels boolean true Wenn dieser Wert auf „false“ gesetzt ist, werden die Labels der Werte 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.