Eksenleri Özelleştirme

  1. Genel Bakış
  2. Terminoloji
  3. Ayrı ve Devamlı
  4. Eksen Ölçeklendirmesi
  5. Sayı Biçimleri

Genel bakış

Verilerdeki boyutlar genellikle eksen, yatay ve dikey cihazlarda gösterilir. Şunlar için geçerlidir: Alan Grafiği, Çubuk Grafik, Çubuk Grafik, Sütun Grafiği, Karma Grafik, Çizgi Grafik, Adımlı Alan Grafiği ve Dağılım Grafiği.

Eksenli bir grafik oluşturduğunuzda bazı özelliklerini özelleştirebilirsiniz:

  • Ayrı ve Devamlı
  • Yön - hAxis/vAxis.direction seçeneğini kullanarak yönü özelleştirebilirsiniz.
  • Etiket konumlandırma ve stili - hAxis/vAxis.textPosition ve hAxis/vAxis.textStyle seçeneklerini kullanarak etiket konumunu ve stilini özelleştirebilirsiniz.
  • Eksen başlık metni ve stili - hAxis/vAxis.title ve hAxis/vAxis.titleTextStyle seçeneklerini kullanarak eksen başlık metnini ve stilini özelleştirebilirsiniz.
  • Eksen ölçeği: hAxis/vAxis.logScale veya hAxis/vAxis.scaleType seçeneklerini kullanarak bir eksenin ölçeğini logaritmik (log) ölçek olarak ayarlayabilirsiniz.
  • Eksen yapılandırma seçeneklerinin tam listesi için özel grafiğinizin dokümanlarındaki hAxis ve vAxis seçeneklerine bakın.

Terminoloji

Ana/ikincil eksen:

  • Ana eksen, grafiğin doğal yönü üzerindeki eksendir. Çizgi, alan, sütun, birleşik, basamaklı alan ve şamdan grafiklerde bu, yatay eksendir. Çubuk grafik dikeydir. Dağılım ve pasta grafiklerin ana ekseni yoktur.
  • Küçük eksen diğer eksendir.

Ayrık/sürekli eksen:

  • Bir ayrı eksende, kategori adı verilen sınırlı sayıda eşit aralıklı değer bulunur.
  • Sürekli eksende sonsuz sayıda olası değer vardır.

Ayrı ve Devamlı

Bir grafiğin ana ekseni, ayrık veya sürekli olabilir. Ayrı bir eksen kullanılırken her bir dizinin veri noktaları, satır dizinlerine göre eksen boyunca eşit aralıklarla yerleştirilir. Sürekli bir eksen kullanılırken veri noktaları, alan değerlerine göre konumlandırılır.

Etiketleme de farklıdır. Ayrı bir eksende, kategorilerin adları (verilerin alan sütununda belirtilir) etiket olarak kullanılır. Sürekli bir eksende etiketler otomatik olarak oluşturulur: Grafik, eşit aralıklı ızgara çizgilerini gösterir. Burada her ızgara çizgisi, temsil ettiği değere göre etiketlenir.

Aşağıdaki eksenler süreklidir:

  • Kabarcık grafiklerin her iki ekseni de.
  • Alt eksen.

Çizgi, alan, çubuk, sütun ve şamdan grafiklerde (ve yalnızca bu tür serileri içeren birleşik grafiklerde) ana eksenin türünü kontrol edebilirsiniz:

  • Ayrık bir eksen için veri sütunu türünü string olarak ayarlayın.
  • Sürekli eksen için veri sütunu türünü şunlardan biri olarak ayarlayın: number, date, datetime veya timeofday.
Ayrık / Sürekli İlk sütun türü Örnek
Ayrık string
Sürekli number (sayı)
Sürekli date

Eksen Ölçeklendirmesi

Eksen ölçeğini scaleType seçeneğini kullanarak ayarlayabilirsiniz. Örneğin, ölçeği günlüğe kaydetmek için dikey eksenin ölçeğini ayarlamak üzere aşağıdaki seçeneği kullanın:

  vAxis: {
        scaleType: 'log'
  }

Aşağıdaki çizgi grafik, dünya nüfusunun hem doğrusal (standart) ölçekte hem de günlük ölçeğinde büyümesini gösterir.

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

Metin kullanan bir biçim kullanırken (ör. 8.000.000, "8 milyon" olarak oluşturulacak long biçimi) Google Listeler kitaplığını yüklerken bir dil kodu belirterek dizeleri başka dillere yerelleştirebilirsiniz. Örneğin, "8 milyon" değerini Rusça "8 миллиона" olarak değiştirmek için kitaplığı şu şekilde arayın:

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