Google Pie Chart
หลังจากค้นหาอยู่นาน เพราะคิดไม่ออกว่าหลังจากทดสอบโค้ดนี้เสร็จแล้วไปเก็บไว้ไหน พอค้นเจอก็รีบจัดการโพสต์ไว้บนบล็อกซะเลย<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Journey', 2],
['Watch TV', 2],
['Coding', 4],
['Sleep', 6],
]);
var options = {
title: 'My Daily Activities',
legend: { position: 'top' }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
var options = {
is3D: true,
pieSliceText: 'value-and-percentage',
legend: { position: 'labeled' },
backgroundColor: 'transparent'
};
var total = 0;
for (var i = 0; i < data.getNumberOfRows(); i++) {
total = total + data.getValue(i, 1);
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
var label = data.getValue(i, 0);
var val = data.getValue(i, 1) ;
data.setFormattedValue(i, 0, label + ' ('+val +')');
}
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d2'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
<div style="width: 900px; height: 400px; position: absolute;top:90px; background-color : white"></div>
<div id="piechart_3d2" style="width: 900px; height: 500px; position: absolute;top:10px"></div>
</body>
</html>
จากโค้ดด้านบนนี้ เมื่อนำไปรัน ก็จะได้กราฟวงกลม ที่มีเส้นชี้แสดงตัวเลขของแต่ละส่วนออกมาด้านนอก แล้วก็ส่วนของ ป้ายกำกับ ที่จัดใหม่ให้ดูสบายตาขึ้น ผลลัพธ์ที่ได้เป็นดังภาพ
ความคิดเห็น
แสดงความคิดเห็น