谷歌图表

Mula sa simple na line chart hanggang sa kompleksong layered tree chart, ang Google Charts library ay nagbibigay ng malaking bilang ng mga chart type na magagamit sa anumang oras:

  • Scatter Chart
  • Line Chart
  • Bar / Column Chart
  • Area Chart
  • Pie Chart
  • Donut Chart
  • Straktura ng Organisasyon (Org Chart)
  • Mapa/Heograpikong Chart (Map / Geo Chart)

Paano gamitin ang Google Chart?

Kung gusto mong gamitin ang Google Chart sa iyong webpage, mangyaringMagdagdag ng link patungo sa loader ng chart:

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

Ang Google Chart ay madaling gamitin.

Lamang agad magdagdag ng isa <div> Ang elemento ay makakapakita ng chart:

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

Ang elemento na <div> ay dapat magkaroon ng isang natatanging ID.

Pagkatapos, i-load ang Google Graph API:

  1. I-load ang Visualization API at ang package na corechart
  2. Isagawa ng callback function, pag nakapag-load na ang API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

Tatlong ang!

Line Chart

Source Code

function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
  ['Price', 'Size'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Set Options
var options = {
  title: 'House Price vs. House Area',
  hAxis: {title: 'Square Meters'},
  vAxis: {title: 'Price in Million'},
  legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

亲自试一试

Scatter Plot

Kung gusto gumawa ng parehong data na maging:Scatter Plot，pakiilagay: google.visualization gawin: ScatterChart:

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

亲自试一试

Bar Chart

Source Code

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

亲自试一试

Pie Chart

Kung gusto mong baguhin ang bar chart na maging:Pie Chart，gusto lang gamitin:

google.visualization.PieChart

Pagpalit:

google.visualization.BarChart

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

亲自试一试

3D Pie Chart

Kung gusto mong ipakita ang pie chart sa 3D anyo, kailangan lang na ilagay: is3D: true 添加到选项中：

var options = {
  title: '全球葡萄酒生产',
  is3D: true
};

亲自试一试