Dostosowywanie osi

Omówienie

Wymiary w danych są często wyświetlane na osiach, w poziomie i w pionie. Dzieje się tak w przypadku takich schematów: Wykres warstwowy, Wykres słupkowy, Wykres świecowy, Wykres kolumnowy, Wykres mieszany, Wykres liniowy, Krokowy krok i Wykres punktowy.

Podczas tworzenia wykresu z osiami możesz dostosować niektóre z jego właściwości:

  • Dyskretna i ciągła
  • Kierunek – kierunek można dostosować za pomocą opcji hAxis/vAxis.direction.
  • Położenie i styl etykiety – możesz dostosować położenie i styl etykiety za pomocą opcji hAxis/vAxis.textPosition i hAxis/vAxis.textStyle.
  • Tekst i styl tytułu osi – możesz dostosować tekst i styl tytułu osi, korzystając z opcji hAxis/vAxis.title i hAxis/vAxis.titleTextStyle.
  • Skala osi: możesz ustawić skalę osi na logarytmiczną (logową), korzystając z opcji hAxis/vAxis.logScale lub hAxis/vAxis.scaleType.
  • Pełną listę opcji konfiguracji osi znajdziesz w artykułach na temat hAxis i vAxis w dokumentacji konkretnego wykresu.

Terminologia

Główna/mała oś:

  • główna to oś wzdłuż wzdłuż naturalnej orientacji wykresu. W przypadku wykresów liniowych, warstwowych, kolumnowych, schodkowych i stalowych, jest to oś pozioma. Wykres słupkowy to pionowy. Wykresy punktowe i kołowe nie mają głównej osi.
  • Druga oś mniejsza to druga oś.

Oś nieciągła:

  • dyskretna ma skończoną liczbę wartości rozdzielonych równomiernie, zwanych kategoriami.
  • ciągła ma nieskończoną liczbę możliwych wartości.

Dysk – ciągłe

Główna oś wykresu może być dyskretna lub ciągła. Jeśli używasz konkretnej osi, punkty danych poszczególnych serii są równomiernie rozmieszczone na osi, zgodnie z indeksem wierszy. W przypadku ciągłej osi punkty danych są rozmieszczone zgodnie z wartością domeny.

Etykiety są też inne. W dyskretnej nazwie nazwy kategorii (określone w kolumnie domeny danych) są używane jako etykiety. Na osi ciągłej etykiety są generowane automatycznie: na wykresie widać równomiernie rozmieszczone linie siatki, w których każda linia jest oznaczona zgodnie z wartością, którą reprezentuje.

Te osie zawsze są ciągłe:

  • Obie osie wykresów bąbelkowych.
  • Oś mniejsza.

W przypadku wykresów liniowych, warstwowych, kolumnowych i kolumnowych (i wykresów mieszanych, które zawierają tylko serie), możesz kontrolować typ osi głównej:

  • W przypadku osi odrębnej ustaw typ kolumny danych na string.
  • W przypadku osi ciągłej ustaw typ kolumny danych na number, date, datetime lub timeofday.
Dyskretne / ciągłe Pierwszy typ kolumny Przykład
Odstęp tekst
Ciągły liczba
Ciągły data

Skala osi

Możesz ustawić skalę osi za pomocą opcji scaleType. Aby na przykład ustawić skalę osi pionowej pod kątem rejestrowania wagi, użyj tej opcji:

  vAxis: {
        scaleType: 'log'
  }

Poniższy wykres liniowy przedstawia wzrost liczby ludności na świecie zarówno w skali linearnej, jak i standardowej.

<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>

Jeśli stosujesz format wykorzystujący tekst (np. format long, który renderuje 8 000 000 zł jako „8 mln”), możesz zlokalizować ciągi na inne języki, określając kod języka podczas wczytywania biblioteki wykresów Google. Aby np. zmienić ciąg znaków „8 milionów” na rosyjski „8 миллиона”, wywołaj bibliotekę:

<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>