Google ͼ

จากกราฟเส้นที่เรียบง่ายไปจนถึงกราฟต้นไม้ที่มีระดับหลายชั้น ซายแก้ว ระบบกราฟของ Google ให้บริการชนิดกราฟที่สามารถใช้งานได้ทันทีมากมาย:

  • กราฟจุด (Scatter Chart)
  • กราฟเส้น (Line Chart)
  • กราฟแบบแถว/กราฟแบบกระแส (Bar / Column Chart)
  • กราฟพื้นที่ (Area Chart)
  • กราฟบาน (Pie Chart)
  • กราฟโดนัท (Donut Chart)
  • กราฟโครงสร้างองค์กร (Org Chart)
  • แผนที่/กราฟภาพภูมิศาสตร์ (Map / Geo Chart)

หลายวิธีในการใช้ Google Chart?

หากคุณต้องการใช้ Google Chart ในเว็บไซต์ของคุณเพิ่มลิงก์ถึงตัวยึดกราฟโหลด:

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

Google Chart ง่ายต่อการใช้งาน

เพียงเพิ่ม <div> เป็นตัวอย่างขององค์ประกอบที่สามารถแสดงกราฟได้

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

<div> ต้องมีรหัสประจำตัวที่เด่นที่สุด

หลังจากนั้นโหลด Google Graph API:

  1. โหลด Visualization API และ corechart บริวาร
  2. ตั้งค่าฟังก์ชันคอบแบ็คในตอนที่ API จะโหลดเสร็จ
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

แล้วนี้!

กราฟสาย

แหล่งรหัส

function drawChart() {
// 设置数据
var data = google.visualization.arrayToDataTable([
  ['ราคา', 'ขนาด'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// 设置选项
var options = {
  title: 'ราคาบ้านและขนาดบ้าน',
  hAxis: {title: 'ตารางวาง'},
  vAxis: {title: 'ราคาล้านบาท'},
  legend: 'none'
};
// วาดกราฟ
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Լ

กราฟจุด

เพื่อที่จะสร้างกราฟจุดโปรดเลือก google.visualization เปลี่ยนเป็น ScatterChart:

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

Լ

กราฟบางต่อหนึ่ง

แหล่งรหัส

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

Լ

Ⱥͼ

ҪǿתΪȺͼ،ֻҪʹ

google.visualization.PieChart

滻

google.visualization.BarChart

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

Լ

3D Ⱥͼ

Ҫ 3D ʽʾȺͼ，ֻҪ is3D: true д뵽

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

Լ