ทำกราฟด้วย Google charts

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16019
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

ทำกราฟด้วย Google charts

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

บทความนี้จะแนะนำการใช้ Google chart ที่เป็น API ที่ทาง Google นั้นให้เราใช้ได้ฟรีๆ ไม่ต้องติดตั้งอะไรให้ยุ่งยาก และมีลูกเล่นที่สามารถปรับแต่งได้ตามความต้องการของแต่กราฟได้

ตัวอย่างการทำกราฟวงกลม (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>
ผลลัพธ์ที่ได้
screenshot-developers.google.com-2020.12.22-18_41_20.png
screenshot-developers.google.com-2020.12.22-18_41_20.png (34.05 KiB) Viewed 1104 times
แหล่งอ้างอิงข้อมูล
ทำความรู้จัก Google Chart เพิ่มเติมได้ที่ viewtopic.php?f=78&t=42843
https://developers.google.com/chart/int ... uick_start
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: facebook.com [Crawler] และบุคลทั่วไป 42