Menyesuaikan Sumbu

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

Ringkasan

Dimensi dalam data sering ditampilkan pada sumbu, horizontal dan vertikal. Demikian pula untuk: Diagram Area, Diagram Batang, Diagram Batang Lilin, Diagram Kolom, Diagram Kombo, Diagram Garis, Diagram Area Melangkah, dan Diagram Sebar.

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

  • Discrete vs. Berkelanjutan
  • Arah - Anda dapat menyesuaikan arah menggunakan opsi hAxis/vAxis.direction.
  • Penempatan dan gaya label - Anda dapat menyesuaikan penempatan dan gaya label menggunakan opsi hAxis/vAxis.textPosition dan hAxis/vAxis.textStyle.
  • Teks dan gaya judul sumbu - Anda dapat menyesuaikan teks dan gaya 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 tertentu.

Terminologi

Sumbu utama/kecil:

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

Sumbu diskrit/bersambung:

  • Sumbu diskrit memiliki jumlah nilai yang berjarak sama tertentu, yang disebut kategori.
  • Sumbu kontinu memiliki jumlah kemungkinan nilai yang tak terbatas.

Diskret vs Berkelanjutan

Sumbu utama pada diagram dapat bersifat diskrit atau berkelanjutan. Saat menggunakan sumbu diskrit, titik data dari setiap deret ditempatkan secara merata di sepanjang sumbu, sesuai dengan indeks barisnya. Saat menggunakan sumbu berkelanjutan, titik data diposisikan sesuai dengan nilai domainnya.

Pelabelannya juga berbeda. Dalam sumbu diskrit, nama kategori (ditentukan dalam kolom domain data) digunakan sebagai label. Pada sumbu berkelanjutan, label dibuat secara otomatis: diagram menampilkan garis petak yang berjarak sama, dengan setiap garis petak diberi label sesuai dengan nilai yang direpresentasikannya.

Sumbu berikut selalu kontinu:

  • Kedua sumbu diagram balon.
  • Sumbu minor.

Dalam diagram garis, area, batang, kolom, dan batang lilin (dan diagram kombinasi yang hanya berisi deret tersebut), Anda dapat mengontrol jenis sumbu utama:

  • Untuk sumbu diskrit, tetapkan jenis kolom data ke string.
  • Untuk sumbu berkelanjutan, tetapkan jenis kolom data ke salah satu dari: number, date, datetime, atau timeofday.
Diskret / Kontinu Jenis kolom pertama Contoh
Discrete string
Kontinu number
Kontinu date

Skala Sumbu

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

  vAxis: {
        scaleType: 'log'
  }

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

Jika data berisi nilai nol atau negatif, Anda dapat menandai titik menggunakan opsi scaleType: 'mirrorLog'. Dalam skala log cermin, nilai yang dipetakan dari bilangan negatif adalah dikurangi log nilai absolut dari bilangan tersebut. Nilai-nilai yang dekat dengan 0 diplot pada skala linier.

Contoh berikut menunjukkan angka Fibonacci positif dan negatif yang dipetakan dalam skala log cermin dan skala linear.

Format Angka

Anda dapat mengontrol pemformatan nomor label dengan hAxis.format dan vAxis.format. Misalnya, {hAxis: { format:'#,###%'} } menampilkan nilai "1.000%", "750%", dan "50%" untuk nilai 10, 7.5, dan 0.5. Anda juga dapat menyediakan salah satu preset berikut:

  • {format: 'none'}: menampilkan angka tanpa format (misalnya, 8.000.000)
  • {format: 'decimal'}: menampilkan angka dengan pemisah ribuan (mis., 8.000.000)
  • {format: 'scientific'}: menampilkan angka dalam notasi ilmiah (mis., 8e6)
  • {format: 'currency'}: menampilkan angka dalam mata uang lokal (mis., $8.000.000,00)
  • {format: 'percent'}: menampilkan angka sebagai persentase (misalnya, 800.000.000%)
  • {format: 'short'}: menampilkan singkatan angka (misalnya, 8 jt)
  • {format: 'long'}: menampilkan angka sebagai kata lengkap (mis., 8 juta)

Pada diagram di bawah, Anda dapat memilih di antara preset:

Halaman web lengkap untuk diagram di atas mengikuti.

 

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

Saat 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 Anda memuat library Google Chart. Misalnya, untuk mengubah "8 juta" menjadi "8 миллиона 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>