กราฟิก Google
จากกราฟแบบเส้นเรียบๆ จนถึงกราฟแบบต้นไม้ย่อยที่ซับซ้อน แล้ว Google Charts ได้มีช่องทางหลากหลายของกราฟที่สามารถใช้งานได้ทันที:
- กราฟแบบจุด (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> ต้องมี ID ที่เด่นเดี่ยว
เพื่อโหลด Google Graph API:
- โหลด Visualization API และ corechart แพ็คเกจ
- ตั้งค่าฟังก์ชันโรมโบ้คซ์เพื่อเรียกใช้หลังจาก 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'],
['อิตาลี', 55],
['ฝรั่งเศส', 49],
['สเปน', 44],
['สหรัฐ', 24],
]
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
};
