Achsen anpassen

  1. Übersicht
  2. Terminologie
  3. Im Vergleich zwischen kontinuierlich und kontinuierlich
  4. Achsenskalierung
  5. Zahlenformate

Übersicht

Dimensionen in den Daten werden häufig auf Achsen, horizontal und vertikal, angezeigt. Beispiel: Flächendiagramm, Balkendiagramm, Kerzendiagramm, Säulendiagramm, Kombinationsdiagramm, Liniendiagramm, Schrittdiagramm und Streudiagramm.

Wenn Sie ein Diagramm mit Achsen erstellen, können Sie einige ihrer Eigenschaften anpassen:

  • Im Vergleich zwischen kontinuierlich und kontinuierlich
  • Richtung: Sie können die Richtung mit der Option hAxis/vAxis.direction anpassen.
  • Labelpositionierung und -stil - Sie können Labelpositionierung und -stil mithilfe der Optionen hAxis/vAxis.textPosition und hAxis/vAxis.textStyle anpassen.
  • Achsentitel und -stil - Mit den Optionen hAxis/vAxis.title und hAxis/vAxis.titleTextStyle können Sie den Titel und den Stil der Achsen anpassen.
  • Achsenskalierung – Mit den Optionen hAxis/vAxis.logScale oder hAxis/vAxis.scaleType können Sie die Skalierung einer Achse auf die logarithmische Skala festlegen.
  • Eine vollständige Liste der Optionen für die Achsenkonfiguration finden Sie in der Dokumentation für das jeweilige Diagramm unter den Optionen für hAxis und vAxis.

Terminologie

Haupt-/Nebenachse:

  • Die Hauptachse ist die Achse entlang der natürlichen Ausrichtung des Diagramms. Bei Linien-, Flächen-, Säulen-, Kombinations-, Stufen- und Kerzendiagrammen ist das die horizontale Achse. Bei einem Balkendiagramm ist es vertikal. Streu- und Kreisdiagramme haben keine wichtige Achse.
  • Die Nebenachse ist die andere Achse.

Diskrete/kontinuierliche Achse:

  • Eine separate Achse hat eine begrenzte Anzahl von Werten mit gleichmäßigen Abständen, die als Kategorien bezeichnet werden.
  • Eine kontinuierliche Achse hat eine unbegrenzte Anzahl von möglichen Werten.

Diskrete vs. kontinuierliche

Die Hauptachse eines Diagramms kann entweder separat oder kontinuierlich sein. Bei Verwendung einer diskreten Achse werden die Datenpunkte der einzelnen Reihen gemäß ihrem Zeilenindex gleichmäßig auf der Achse verteilt. Bei einer durchgehenden Achse werden die Datenpunkte entsprechend ihrem Domainwert positioniert.

Auch die Beschriftung ist anders. In einer separaten Achse werden die Namen der Kategorien (in der Domainspalte der Daten angegeben) als Labels verwendet. Auf einer durchgehenden Achse werden die Labels automatisch generiert: Das Diagramm zeigt gleichmäßige Rasterlinien an, wobei jede Rasterlinie entsprechend dem repräsentierten Wert beschriftet ist.

Die folgenden Achsen sind immer durchgehend:

  • Beide Achsen von Blasendiagrammen.
  • Die Nebenachse.

In Linien-, Flächen-, Balken-, Säulen- und Kerzendiagrammen (und Kombinationsdiagrammen, die nur solche Reihen enthalten) können Sie den Typ der Hauptachse festlegen:

  • Legen Sie für eine einzelne Achse den Datenspaltentyp auf string fest.
  • Legen Sie für eine durchgehende Achse den Datenspaltentyp auf einen der folgenden Werte fest: number, date, datetime oder timeofday.
Diskret / kontinuierlich Typ der ersten Spalte Beispiel
Diskret String
Kontinuierlich Zahl
Kontinuierlich date

Achsenskalierung

Mit der Option scaleType können Sie den Maßstab einer Achse festlegen. Wenn Sie beispielsweise die Skalierung der vertikalen Achse für die Skalierung festlegen möchten, verwenden Sie die folgende Option:

  vAxis: {
        scaleType: 'log'
  }

Das folgende Liniendiagramm zeigt das Wachstum der Weltbevölkerung im linearen (Standard-) und im logarithmischen Maßstab.

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

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

Wenn Sie ein Format mit Text verwenden, z. B. das Format long, das 8.000.000 als 8 Millionen rendert, können Sie die Strings in andere Sprachen lokalisieren. Geben Sie dazu beim Laden der Google Charts-Bibliothek einen Sprachcode an. Wenn Sie beispielsweise „8 Millionen“ in die russische Sprache „8 миллиона“ ändern möchten, rufen Sie die Bibliothek so auf:

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>