Balkendiagramme

Übersicht

Google-Balkendiagramme werden im Browser mit SVG oder VML gerendert, je nachdem, was für den Browser des Nutzers geeignet ist. Wie bei allen Google-Diagrammen werden in Balkendiagrammen Kurzinfos angezeigt, wenn der Nutzer den Mauszeiger auf die Daten bewegt. Eine vertikale Version dieses Diagramms finden Sie im Spaltendiagramm.

Beispiele

Balken

Sehen wir uns die Dichten von vier Edelmetallen an:

Oben sind alle Farben standardmäßig Blau. Das liegt daran, dass sie alle zu derselben Reihe gehören. Wenn es eine zweite Reihe gibt, wäre sie rot gefärbt. Diese Farben können mit der Stilrolle angepasst werden:

Es gibt drei verschiedene Möglichkeiten, die Farben auszuwählen. In unserer Datentabelle werden alle angezeigt: RGB-Werte, englische Farbnamen und eine CSS-ähnliche Deklaration:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Barstile

Mit der Stilrolle können Sie verschiedene Aspekte der Darstellung von Balken in CSS-ähnlichen Deklarationen steuern:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Wir raten davon ab, Stile innerhalb eines Diagramms zu frei zu mischen – einen Stil auszuwählen und beizubehalten – hier ist jedoch ein Sampler, um alle Stilattribute zu veranschaulichen:

Die ersten beiden Balken verwenden jeweils einen bestimmten color (der erste mit einem englischen Namen, der zweite mit einem RGB-Wert). Es wurde keine opacity ausgewählt, daher wird der Standardwert 1.0 (vollständig deckend) verwendet. Aus diesem Grund verdeckt der zweite Balken das dahinter liegenden Gitter. In der dritten Leiste wird ein opacity von 0, 2 verwendet, der die Gitternetzlinie anzeigt. In der vierten Leiste werden drei Stilattribute verwendet: stroke-color und stroke-width, um den Rahmen zu zeichnen, und fill-color, um die Farbe des Rechtecks anzugeben. Die Leiste ganz rechts verwendet zusätzlich stroke-opacity und fill-opacity, um Deckkraft für den Rahmen auszuwählen und auszufüllen:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Beschriftungsbalken

Diagramme haben verschiedene Arten von Labels, z. B. Teilstrichlabels, Legendenlabels und Labels in den Kurzinfos. In diesem Abschnitt erfahren Sie, wie Labels in oder in der Nähe von Balken in einem Balkendiagramm platziert werden.

Angenommen, wir möchten jeden Balken mit dem entsprechenden chemischen Symbol versehen. Das ist mit der Rolle annotation möglich:

In der Datentabelle definieren wir eine neue Spalte mit { role: 'annotation' } für unsere Balkenlabels:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Wenn Nutzer den Mauszeiger auf die Balken bewegen, werden die Datenwerte angezeigt. Sie können sie jedoch auch in die Balken einfügen:

Dies ist etwas komplizierter, als es sein sollte, da wir eine DataView erstellen, um die Annotation für jeden Balken anzugeben.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

Wenn wir den Wert unterschiedlich formatieren möchten, können wir einen Formatierer definieren und in eine Funktion wie diese einbinden:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Dann könnten wir es mit calc: getValueAt.bind(undefined, 1) aufrufen.

Wenn das Label zu groß ist, um vollständig in die Leiste zu passen, wird es außen angezeigt:

Gestapelte Balkendiagramme

Ein übereinander angeordnetes Balkendiagramm ist ein Balkendiagramm, in dem die zugehörigen Werte übereinander angeordnet sind. Negative Werte werden in umgekehrter Reihenfolge unter der Referenz der Achse des Diagramms gestapelt. Gestapelte Balkendiagramme werden in der Regel verwendet, wenn sich eine Kategorie auf natürliche Weise in Komponenten unterteilt. Betrachten wir zum Beispiel einige hypothetische Buchverkäufe, unterteilt nach Genre und Vergleich mit der Zeit:

Sie erstellen ein gestapeltes Balkendiagramm, indem Sie die Option isStacked auf true setzen:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

Gestapelte Balkendiagramme unterstützen auch 100 %-Stapel, wobei die Stapel von Elementen bei jedem Domainwert neu skaliert werden, sodass sie insgesamt 100 % ergeben. Als Optionen stehen isStacked: 'percent' zur Verfügung, mit der jeder Wert als Prozentsatz von 100 % formatiert wird, und isStacked: 'relative', mit dem jeder Wert als Bruchteil von 1 formatiert wird. Es gibt auch die Option isStacked: 'absolute', die funktional die Funktion isStacked: true hat.

Im gestapelten Diagramm rechts sind die Tickwerte auf der relativen Skala von 0 bis 1 als Bruchteile von 1 angegeben. Die Achsenwerte werden jedoch als Prozentsätze angezeigt. Der Grund hierfür ist, dass die Teilpunkte der Achse bei Verwendung des Formats „#.##%“ auf die relativen Skalawerte von 0–1 angewendet werden. Wenn Sie isStacked: 'percent' verwenden, geben Sie unbedingt Ticks auf der relativen Skala von 0–1 an.

Gestapelt
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
    
Gestapelt (100 %)
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Material-Balkendiagramme erstellen

2014 kündigte Google Richtlinien an, die ein einheitliches Erscheinungsbild für alle Properties und Apps (z. B. Android-Apps) unterstützen, die auf Google-Plattformen ausgeführt werden. Wir nennen dies Material Design. Wir stellen für alle unsere Kerndiagramme „Material“-Versionen zur Verfügung. Sie können diese gerne verwenden, wenn Sie möchten, wie sie aussehen.

Das Erstellen eines Material-Balkendiagramms ähnelt dem Erstellen eines klassischen Balkendiagramms. Sie laden die Google Visualization API (aber mit dem Paket 'bar' anstelle des Pakets 'corechart'), definieren Ihre Datentabelle und erstellen dann ein Objekt (anstelle der Klasse google.charts.Bar anstelle von google.visualization.BarChart).

Hinweis: Material-Diagramme funktionieren in älteren Versionen von Internet Explorer nicht. Internet Explorer 8 und ältere Versionen unterstützen SVG nicht, was für Material Charts erforderlich ist.

Material-Balkendiagramme bieten viele kleine Verbesserungen im Vergleich zu klassischen Balkendiagrammen. Dazu gehören eine verbesserte Farbvorlage, abgerundete Ecken, eine klarere Formatierung von Labels, ein engerer Standardabstand zwischen Reihen, weichere Gitterlinien und Titel (und das Hinzufügen von Untertiteln).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Die Materialdiagramme befinden sich in der Betaphase. Das Erscheinungsbild und die Interaktivität sind weitgehend endgültig, aber viele der Optionen, die in klassischen Diagrammen verfügbar sind, sind dort noch nicht verfügbar. Eine Liste der noch nicht unterstützten Optionen finden Sie hier.

Die Art und Weise, wie Optionen deklariert werden, ist also nicht abgeschlossen. Wenn Sie also die klassischen Optionen verwenden, müssen Sie sie in Material-Optionen konvertieren. Ersetzen Sie dazu diese Zeile:

chart.draw(data, options);

...durch:

chart.draw(data, google.charts.Bar.convertOptions(options));

Mit google.charts.Bar.convertOptions() können Sie bestimmte Features wie die Voreinstellung hAxis/vAxis.format nutzen.

Dual-X-Diagramme

Hinweis: Dual-X-Achsen sind nur für Materialdiagramme (d.h. mit Paketen bar) verfügbar.

Manchmal möchten Sie zwei Reihen in einem Balkendiagramm mit zwei unabhängigen x-Achsen anzeigen: eine obere Achse für eine Reihe und eine untere Achse für eine andere: