Eksenleri Özelleştirme

  1. Genel bakış
  2. Terminoloji
  3. Ayrık ve Kesintisiz
  4. Eksen Ölçeği
  5. Sayı Biçimleri

Genel bakış

Verilerdeki boyutlar genellikle eksenler üzerinde, yatay ve dikey olarak görüntülenir. Bu durum şunun için de geçerlidir: Alan Grafiği, Çubuk Grafik, Çubuk Grafik, Sütun Grafik, 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ık ve Kesintisiz
  • Yön: hAxis/vAxis.direction seçeneğini kullanarak yönü özelleştirebilirsiniz.
  • Etiket konumlandırma ve stili - Etiket konumlandırmasını ve stilini, hAxis/vAxis.textPosition ve hAxis/vAxis.textStyle seçeneklerini kullanarak özelleştirebilirsiniz.
  • Eksen başlık metni ve stili: Eksen başlığı metnini ve stilini hAxis/vAxis.title ve hAxis/vAxis.titleTextStyle seçeneklerini kullanarak özelleştirebilirsiniz.
  • Eksen ölçeği: hAxis/vAxis.logScale veya hAxis/vAxis.scaleType seçeneklerini kullanarak, eksenin ölçeğini logaritmik (log) ölçeğe ayarlayabilirsiniz.
  • Eksen yapılandırma seçeneklerinin tam listesi için özel grafiğinizin belgelerindeki hAxis ve vAxis seçeneklerine bakın.

Terminoloji

Ana/alt eksen:

  • Ana eksen, grafiğin doğal yönü boyunca uzanan eksendir. Çizgi, alan, sütun, karma, basamaklı alan ve şamdan grafikler için bu yatay eksendir. Çubuk grafik için bu, dikey olandır. Dağılım ve pasta grafiklerinin büyük bir ekseni yoktur.
  • Alt eksen diğer eksendir.

Ayrı/sürekli eksen:

  • Ayrı bir eksende, kategoriler adı verilen ve eşit aralıklarla yerleştirilmiş sınırlı sayıda değer bulunur.
  • Sürekli bir eksende sınırsız sayıda olası değer bulunur.

Ayrık ve Kesintisiz

Bir grafiğin ana ekseni kesik veya sürekli olabilir. Ayrık bir eksen kullanılırken her bir serinin veri noktaları, satır endekslerine göre eksen boyunca eşit aralıklı olur. 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. Kesintisiz bir eksende, etiketler otomatik olarak oluşturulur: Grafikte, eşit aralıklı ızgara çizgileri gösterilmektedir. Burada her ızgara çizgisi, temsil ettiği değere göre etiketlenmektedir.

Şu eksenler her zaman süreklidir:

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

Çizgi, alan, çubuk, sütun ve şamdan grafiklerde (ve yalnızca bu serileri içeren karma 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ü şu seçeneklerden birine ayarlayın: number, date, datetime veya timeofday.
Ayrık / Sürekli İlk sütun türü Örnek
Ayrı dize
Sürekli sayı
Sürekli tarih

Eksen Ölçeği

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

  vAxis: {
        scaleType: 'log'
  }

Aşağıdaki çizgi grafikte, dünya nüfusunun artışı hem doğrusal (standart) ölçekte hem de logaritmik ölçekte gösterilmektedir.

Verileriniz sıfır veya negatif değerler içeriyorsa noktaları scaleType: 'mirrorLog' seçeneğini kullanarak çizebilirsiniz. Ayna günlük ölçeğinde, negatif bir sayının noktayla gösterilen değeri, sayının mutlak değerinin logaritmasından çıkarılır. 0'a yakın değerler doğrusal bir ölçekte gösterilir.

Aşağıdaki örnekte, hem yansıtma günlük ölçeğinde hem de doğrusal ölçekte çizilmiş pozitif ve negatif Fibonacci sayıları gösterilmektedir.

Sayı Biçimleri

Etiket numaralarının biçimlendirmesini hAxis.format ve vAxis.format ile kontrol edebilirsiniz. Örneğin {hAxis: { format:'#,###%'} }; 10, 7,5 ve 0,5 değerleri için "1.000%", "%750" ve "%50" değerlerini gösterir. Aşağıdaki hazır ayarlardan herhangi birini de sağlayabilirsiniz:

  • {format: 'none'}: Biçimlendirme olmadan (ör. 8000000)
  • {format: 'decimal'}: Binlik ayırıcılar içeren sayıları gösterir (ör. 8.000.000)
  • {format: 'scientific'}: Sayıları bilimsel gösterimde (ör. 8e6)
  • {format: 'currency'}: Sayıları yerel para biriminde gösterir (ör. 8.000.000,00 $)
  • {format: 'percent'}: Sayıları yüzde olarak gösterir (ör. %800.000.000)
  • {format: 'short'}: kısaltılmış sayılar gösterir (ör. 8 milyon)
  • {format: 'long'}: Sayıları tam kelimeler olarak görüntüler (ör. 8 milyon)

Aşağıdaki grafikte hazır ayarlar arasından seçim yapabilirsiniz:

Yukarıdaki grafiğin tamamını içeren bir web sayfası aşağıdaki gibidir.

 

<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 içeren bir biçim (ör. 8.000.000'i "8 milyon" olarak oluşturulacak long biçimi) kullanırken, Google Grafikler kitaplığını yüklediğinizde bir dil kodu belirterek dizeleri diğer dillere çevirebilirsiniz. Örneğin, "8 milyon" rakamını Rusça "8 ”8 ”ise” olarak değiştirin:

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