Google Chart ชี้ข้อมูลแต่ละส่วนของ Chart และการแสดงข้อความกำกับ
Google Chart มีเส้นชี้ข้อมูลแต่ละส่วน แสดงข้อมูลตัวเลขของแต่ละส่วนออกมาด้านนอกของ Chart มีการแสดงข้อความกำกับเป็น Info มากขึ้น ลองนำไปลองทำกันดูครับ
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart_score3);
function drawChart_score3() {
var data = google.visualization.arrayToDataTable([['Task', 'Hours per Day'],['มหาวิทยาลัยราชภัฏกำแพงเพชร แม่สอด (88,900)', 88900],['สำนักวิทยบริการและเทคโนโลยีสารสนเทศ (77,409)', 77409],['สำนักงานอธิการบดี (71,456)', 71456],['สำนักส่งเสริมและงานทะเบียน (64,614)', 64614],['คณะมนุษยศาสตร์และสังคมศาสตร์ (3,082)', 3082],['สำนักบริการวิชาการและจัดหารายได้ (2,816)', 2816],['คณะครุศาสตร์ (2,271)', 2271],['สำนักศิลปะและวัฒนธรรม (1,606)', 1606],['บัณฑิตวิทยาลัย (145)', 145],['คณะพยาบาลศาสตร์ (81)', 81],['สถาบันวิจัยและพัฒนา (51)', 51],['คณะวิทยาศาสตร์และเทคโนโลยี (34)', 34],['คณะวิทยาการจัดการ (11)', 11],['คณะเทคโนโลยีอุตสาหกรรม (4)', 4],['สำนักประกันคุณภาพการศึกษา (1)', 1],]);
var options = {
title: 'จำนวน Backlinks',
slices: {
3: {offset: 0.2},
2: {offset: 0.2},
3: {offset: 0.0},
},
is3D: true,
width: '100%',
height: '500',
legend: { position: 'top' }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_score3'));
chart.draw(data, options);
var options = {
title: 'จำนวน Backlinks',
is3D: true,
width: '100%',
height: '500',
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 +')');
data.setFormattedValue(i, 0, label);
}
var chart = new google.visualization.PieChart(document.getElementById('piechart_score3_2'));
chart.draw(data, options);
}
</script>
<div class="mb-4 align-content-center wow fadeInDown" data-wow-delay="0.3s" style="display: none" id="piechart_score3"></div>
<div class="mb-4 align-content-center wow fadeInDown" data-wow-delay="0.3s" id="piechart_score3_2"></div>
ที่มา : https://developers.google.com/chart/interactive/docs