Google Charts

Basit çizgi grafiklerden 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)
  • Çubuk Grafiği / Sütun Grafiği (Bar / Column Chart)
  • Alan Grafiği (Area Chart)
  • Tort Grafiği (Pie Chart)
  • Şekerlemeli Tavuklu (Donut Chart)
  • Organizasyon Yapısı Grafiği (Org Chart)
  • Harita / Coğrafi Grafiği (Map / Geo Chart)

Google Chart nasıl kullanılır?

Google Chart kullanmak istiyorsanız, lütfenharita yükleyiciye yönlendirme ekleyin:

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

Google grafikleri kullanımı kolaydır.

sadece bir <div> elementi çizgi grafiği gösterebilir:

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

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

Daha 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 bildirim fonksiyonu ayarlayın
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

böylece!

dağılım grafiği

源代码

function drawChart() {
// Verileri ayarlayın
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 ayarlayın
var options = {
  title: 'Konut fiyatı ile alan',
  hAxis: {title: 'Metrekare'},
  vAxis: {title: 'Milyon fiyat'},
  legend: 'none'
};
// Çizgi grafiği oluşturun
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Try It Yourself

dağılım haritası

aynı verileri oluşturmak içindağılım haritasılütfen google.visualization değiştir ScatterChart:

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

Try It Yourself

条形图

源代码

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italy', 55],
  ['France', 49],
  ['Spain', 44],
  ['United States', 24],
  ['Argentina', 15]
]);
var options = {
  title: 'Global Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Try It Yourself

Pie Chart

To convert the bar chart toPie Chartwith:

google.visualization.PieChart

Replace:

google.visualization.BarChart

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

Try It Yourself

3D Pie Chart

To display the pie chart in 3D form, just set is3D: true Add to options:

var options = {
  title: 'Global Wine Production',
  is3D: true
};

Try It Yourself