Graf Gambar Google

Dari grafik garis sederhana hingga pohon tingkat kompleks, pustaka grafik Google menyediakan banyak jenis grafik yang siap digunakan:

  • Scatter Chart
  • Line Chart
  • Bar / Column Chart
  • Area Chart
  • Pie Chart
  • Donut Chart
  • Struktur Organisasi Chart (Org Chart)
  • Peta/Geografi Chart (Map / Geo Chart)

Bagaimana cara gunakan Google Chart?

Jika anda mahu gunakan Google Chart di halaman web anda, silaTambahkan pautan ke pengecas grafik:

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

Grafik Google mudah digunakan.

Hanya tambahkan satu <div> Elemen ini boleh memaparkan grafik:

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

Elemen <div> mesti mempunyai ID yang unik.

Lanjutkan dengan muatkan Google Graph API:

  1. Muatkan API Visualisasi dan paket corechart
  2. Tetapkan fungsi balik panggilan, untuk dipanggil selepas API disambungkan
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

Tadi saja!]}

Grafik Luruh

Kode Sumber

function drawChart() {
// Mengatur data
var data = google.visualization.arrayToDataTable([
  ['Harga', 'Ukuran'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// Mengatur pilihan
var options = {
  title: 'Harga Rumah dan Luas Rumah',
  hAxis: {title: 'Persegi Meter'},
  vAxis: {title: 'Harga Jutaan'},
  legend: 'none'
};
// Mewujudkan grafik
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Coba Sendiri

Grafik Titik

data yang sama untuk menghasilkanGrafik Titik，silakan ganti google.visualization ubah menjadi ScatterChart:

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

Coba Sendiri

Grafik Batang

Kode Sumber

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  [' Itali', 55],
  ['Perancis', 49],
  ['Spanyol', 44],
  ['Amerika', 24],
  ['Argentina', 15]
]);
var options = {
  title: 'Pemproduksi Anggur Global'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Coba Sendiri

Grafik Piring

Jika ingin mengubah grafik batang menjadiGrafik Piring，hanya gunakan:

google.visualization.PieChart

Ganti:

google.visualization.BarChart

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

Coba Sendiri

Grafik Piring 3D

Jika ingin memaparkan grafik piring 3D, hanya perlu is3D: true Tambah ke pilihan: }}

var options = {
  title: 'Pemprodukan Anggur Global',
  is3D: true
};

Coba Sendiri