Google Chart ชี้ข้อมูลแต่ละส่วนของ Chart และการแสดงข้อความกำกับ

เผยแพร่เมื่อ 6 ตุลาคม 2563 11

Google Chart ชี้ข้อมูลแต่ละส่วนของ Chart และการแสดงข้อความกำกับ

290

Google Chart มีเส้นชี้ข้อมูลแต่ละส่วน แสดงข้อมูลตัวเลขของแต่ละส่วนออกมาด้านนอกของ Chart มีการแสดงข้อความกำกับเป็น Info มากขึ้น ลองนำไปลองทำกันดูครับ Google Chart

<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