ตัวอย่างการทำกราฟวงกลม (Pie Chart)
โค้ด: เลือกทั้งหมด
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!--เรียกใช้ API ของ Google Chart -->
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']}); //เป็นการเรียก package ของ Google Chart
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([ //ส่วนของการใส่ข้อมูลที่แสดงบนกราฟในรูปแบบ Array ของ Javascript
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = { //การตั้งค่าของตัวกราฟว่าจะให้แสดงขนาดวงกลมเท่าไร, สีอะไร, เป็น 3 มิติ, ตำแหน่งของวงกลม
title: 'My Daily Activities', //หัวข้อของกราฟ
pieHole: 0.4, //ขนาดความกว้างของเส้นผ่าศูนย์กลาง
};
var chart = new google.visualization.PieChart(document.getElementById('piechart')); //ส่วน gen กราฟแล้วนำ ID ที่ชื่อ piechart ไปใช้ในการแสดงกราฟใน div
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div> <!--แสดงกราฟที่ได้จาก ID ของ piechart -->
</body>
</html>
ทำความรู้จัก Google Chart เพิ่มเติมได้ที่ viewtopic.php?f=78&t=42843
https://developers.google.com/chart/int ... uick_start