Achsen anpassen

  1. Overview
  2. Terminologie
  3. Diskrete vs. kontinuierlich
  4. Achsenskalierung
  5. Zahlenformate

Übersicht

Dimensionen in den Daten werden häufig auf Achsen, horizontal und vertikal, dargestellt. Dies gilt für: Flächendiagramm, Balkendiagramm, Kerzendiagramm, Säulendiagramm, Kombinationsdiagramm, Liniendiagramm, Schritt-Flächendiagramm und Streudiagramm.

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

  • Diskrete vs. kontinuierlich
  • Richtung : Sie können die Richtung mit der Option hAxis/vAxis.direction anpassen.
  • Positionierung und Stil von Labels - Sie können die Positionierung und den Stil von Labels mithilfe der Optionen "hAxis/vAxis.textPosition" und "hAxis/vAxis.textStyle" anpassen.
  • Achsentiteltext und -stil - Sie können den Text und Stil der Achsentitel mithilfe der Optionen hAxis/vAxis.title und hAxis/vAxis.titleTextStyle anpassen.
  • Achsenskalierung: Sie können die Skalierung einer Achse mithilfe der Optionen „hAxis/vAxis.logScale“ oder „hAxis/vAxis.scaleType“ auf eine logarithmische (log) Skala einstellen.
  • Eine vollständige Liste der Optionen für die Achsenkonfiguration finden Sie in der Dokumentation für Ihr 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 dies die horizontale Achse. Bei einem Balkendiagramm ist dies das vertikale. Streu- und Kreisdiagramme haben keine Hauptachse.
  • Die kleine Achse ist die andere Achse.

Diskrete/kontinuierliche Achse:

  • Eine diskrete Achse hat eine endliche Anzahl gleichmäßig verteilter Werte, die als Kategorien bezeichnet werden.
  • Eine kontinuierliche Achse hat eine unendliche Anzahl möglicher Werte.

Diskrete vs. kontinuierlich

Die Hauptachse eines Diagramms kann entweder diskret oder fortlaufend sein. Bei Verwendung einer diskreten Achse sind die Datenpunkte jeder Reihe entsprechend ihrem Zeilenindex gleichmäßig über die Achse verteilt. Bei Verwendung einer ununterbrochenen Achse werden die Datenpunkte entsprechend ihrem Domainwert positioniert.

Auch die Beschriftung ist anders. In einer diskreten Achse werden die Namen der Kategorien (angegeben in der Domainspalte der Daten) als Beschriftungen verwendet. Auf einer durchgehenden Achse werden die Beschriftungen automatisch generiert: Das Diagramm zeigt gleichmäßig verteilte Rasterlinien, wobei jede Rasterlinie entsprechend dem dargestellten Wert beschriftet ist.

Die folgenden Achsen sind immer fortlaufend:

  • Beide Achsen von Blasendiagrammen
  • Kleinere Achse.

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

  • Legen Sie für eine diskrete Achse den Datenspaltentyp auf string fest.
  • Legen Sie für eine kontinuierliche Achse als Datenspaltentyp einen der folgenden Typen fest: number, date, datetime oder timeofday.
Diskret / Fortlaufend Erster Spaltentyp Beispiel
Diskret String
Kontinuierlich number
Kontinuierlich date

Achsenskalierung

Mit der Option scaleType können Sie den Maßstab einer Achse festlegen. Wenn Sie beispielsweise die Skalierung der vertikalen Achse auf die logarithmische Skala einstellen möchten, verwenden Sie die folgende Option:

  vAxis: {
        scaleType: 'log'
  }

Das folgende Liniendiagramm zeigt das Wachstum der Weltbevölkerung sowohl in linearer (Standard) als auch auf logarithmischer Skala.

Wenn die Daten null oder negative Werte enthalten, können Sie die Punkte mit der Option scaleType: 'mirrorLog' grafisch darstellen. In der gespiegelten logarithmischen Skala ist der dargestellte Wert einer negativen Zahl minus dem Log des absoluten Werts der Zahl. Werte nahe 0 werden auf einer linearen Skala dargestellt.

Das folgende Beispiel zeigt positive und negative Fibonacci-Zahlen auf der logarithmischen Spiegelskala und der linearen Skala.

Zahlenformate

Sie können die Formatierung von Labelnummern mit hAxis.format und vAxis.format steuern. {hAxis: { format:'#,###%'} } zeigt beispielsweise die Werte "1.000%", "750%" und "50%" für die Werte 10, 7,5 und 0,5 an. Sie können auch eine der folgenden Voreinstellungen angeben:

  • {format: 'none'}: zeigt Zahlen ohne Formatierung an (z.B. 8000000)
  • {format: 'decimal'}: zeigt Zahlen mit Tausendertrennzeichen an (z.B. 8.000.000)
  • {format: 'scientific'}: zeigt Zahlen in wissenschaftlicher Notation an (z.B. 8e6)
  • {format: 'currency'}: Zeigt die Zahlen in der lokalen Währung an (z.B. $8.000.000,00)
  • {format: 'percent'}: zeigt Zahlen als Prozentsätze an (z.B. 800.000.000%)
  • {format: 'short'}: Zeigt Abkürzungen an (z.B. 8 Mio.)
  • {format: 'long'}: zeigt Zahlen als vollständige Wörter an (z.B. 8 Millionen)

Im Diagramm unten können Sie eine der Voreinstellungen auswählen:

Es folgt eine vollständige Webseite für das obige Diagramm.

 

<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 verwenden, in dem Text verwendet wird (z. B. das Format long, das 8.000.000 als „8 Millionen“ rendert, können Sie die Strings in andere Sprachen lokalisieren, indem Sie beim Laden der Google Charts-Bibliothek einen Sprachcode angeben). Um beispielsweise „8 Millionen“ in das Russische „8 Prämie“ zu ändern, 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>