Google Grafikleri

Basit çizgi grafiklerinden karmaşık katmanlı ağaç grafiklerine kadar, Google grafik kütüphanesi, her zaman kullanılabilir çok sayıda grafik türü sunar:

  • Dağılım Grafiği (Scatter Chart)
  • Çizgi Grafiği (Line Chart)
  • Dizgi/Çubuk Grafiği (Bar / Column Chart)
  • Alan Grafiği (Area Chart)
  • Pasta Grafiği (Pie Chart)
  • Tatlı su çubuğu (Donut Chart)
  • Organizasyon Şeması (Org Chart)
  • Harita/Coğrafi Grafik (Map / Geo Chart)

Google Chart nasıl kullanılır?

Google Chart'ı sayfanızda kullanmak istiyorsanızGrafik yükleyiciye yönlendirme ekleyin:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google grafikleri kullanımı kolaydır.

Sadece bir <div> Bu element, grafikleri görüntülemek için kullanılır:

<div id="myChart" style="max-width:700px; height:400px"></div>

Bir <div> elementinin benzersiz bir ID'si olmalıdır.

Sonra Google Graph API'yi yükleyin:

  1. Visualization API ve corechart paketini yükleyin
  2. API yüklendikten sonra çağrılacak bir geri çağrı fonksiyonu ayarlayın
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

böyle!

çizgi grafik

Kaynak kodu

function drawChart() {
// Verileri ayarla
var data = google.visualization.arrayToDataTable([
  ['Fiyat', 'Boyut'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Seçenekleri ayarla
var options = {
  title: 'Evi ve ev alanı',
  hAxis: {title: 'Metrekare'},
  vAxis: {title: 'Milyon fiyat'},
  legend: 'none'
};
// Grafiği çiz
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Kendi Kendine Deney

dağılım grafik

aynı verileri oluşturmak içindağılım grafikolarak, google.visualization değiştirin ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Kendi Kendine Deney

çubuk grafik

Kaynak kodu

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['İtalya', 55],
  ['Fransa', 49],
  ['İspanya', 44],
  ['ABD', 24],
  
]
var options = {
  title: 'Dünya şarap üretimi'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Kendi Kendine Deney

puding grafik

çubuk grafikini 3D'ye dönüştürmek içinpuding grafiksadece aşağıdaki gibi kullanın:

google.visualization.PieChart

değiştirme:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Kendi Kendine Deney

3D puding grafik

3D şeklinde göstermek için yalnızca is3D: true Seçeneklere Ekle:}}

var options = {
  title: 'Dünya Şarap Üretimi',
  is3D: true
};

Kendi Kendine Deney