Menyesuaikan Sumbu

  1. Ringkasan
  2. Terminologi
  3. Berbeda vs. Berkelanjutan
  4. Skala Sumbu
  5. Format Angka

Ringkasan

Dimensi dalam data sering ditampilkan di sumbu, horizontal, dan vertikal. Berikut adalah kasus untuk: Diagram Area, Diagram Batang, Diagram Lilin, Diagram Kolom, Diagram Kolom, Diagram Garis, Diagram Area yang Dilangkahkan dan Diagram Sebar.

Saat membuat diagram dengan sumbu, Anda dapat menyesuaikan beberapa propertinya:

  • Berbeda vs. Berkelanjutan
  • Arah - Anda dapat menyesuaikan arah menggunakan opsi hAxis/vAxis.direction.
  • Pemosisian dan gaya label - Anda dapat menyesuaikan gaya dan posisi label menggunakan opsi hAxis/vAxis.textPosition dan hAxis/vAxis.textStyle.
  • Gaya dan teks judul sumbu - Anda dapat menyesuaikan gaya dan teks judul sumbu menggunakan opsi hAxis/vAxis.title dan hAxis/vAxis.titleTextStyle.
  • Skala Sumbu - Anda dapat menetapkan skala sumbu ke skala logaritmik (log) menggunakan opsi hAxis/vAxis.logScale atau hAxis/vAxis.scaleType.
  • Untuk daftar lengkap opsi konfigurasi sumbu, lihat opsi hAxis dan vAxis dalam dokumentasi untuk diagram spesifik Anda.

Istilah

Sumbu mayor/minor:

  • Sumbu utama adalah sumbu di sepanjang orientasi alami diagram. Untuk diagram garis, area, kolom, kombinasi, area bertahap, dan batang lilin, ini adalah sumbu horizontal. Untuk diagram batang, diagramnya adalah vertikal. Diagram sebar dan lingkaran tidak memiliki sumbu utama.
  • Sumbu minor adalah sumbu lainnya.

Sumbu diskrit/kontinu:

  • Sumbu terpisah memiliki jumlah nilai terbatas yang berjarak sama, yang disebut kategori.
  • Sumbu berkelanjutan memiliki jumlah kemungkinan nilai yang tak terbatas.

Berbeda vs. Berkelanjutan

Sumbu utama diagram dapat berupa diskrit atau berkelanjutan. Saat menggunakan sumbu diskret, titik data setiap rangkaian memiliki jarak yang sama di seluruh sumbu, berdasarkan indeks barisnya. Saat menggunakan sumbu kontinu, titik data diposisikan sesuai dengan nilai domainnya.

Pelabelan juga berbeda. Dalam sumbu terpisah, nama kategori (ditentukan dalam kolom domain data) digunakan sebagai label. Dalam sumbu berkelanjutan, label dibuat secara otomatis: diagram menampilkan garis petak dengan jarak yang sama, tempat setiap baris petak diberi label sesuai dengan nilai yang diwakilinya.

Sumbu berikut selalu berkelanjutan:

  • Kedua sumbu diagram balon.
  • Sumbu minor.

Diagram garis, area, batang, kolom, dan batang lilin (dan diagram kombinasi yang hanya berisi rangkaian seperti itu), Anda dapat mengontrol jenis sumbu utama:

  • Untuk sumbu terpisah, tetapkan jenis kolom data ke string.
  • Untuk sumbu berkelanjutan, tetapkan jenis kolom data ke salah satu dari: number, date, datetime, atau timeofday.
Diskret / Berkelanjutan Jenis kolom pertama Contoh
Berbeda string
Berkelanjutan angka
Berkelanjutan date

Skala Sumbu

Anda dapat menetapkan skala sumbu menggunakan opsi scaleType. Misalnya, untuk menyetel skala sumbu vertikal ke skala log, gunakan opsi berikut:

  vAxis: {
        scaleType: 'log'
  }

Diagram garis berikut menunjukkan pertumbuhan populasi dunia dalam skala linear (standar) dan skala log.

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

Jika menggunakan format yang menggunakan teks (misalnya, format long, yang akan merender 8.000.000 sebagai "8 juta", Anda dapat melokalkan string ke dalam bahasa lain dengan menentukan kode bahasa saat memuat library Google Chart. Misalnya, untuk mengubah "8 juta" menjadi "8 миллиона" dalam bahasa Rusia, panggil library seperti berikut:

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