การทำ Bar Chart ด้วย Google Charts

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

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

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

การทำ Bar Chart ด้วย Google Charts

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

บทความนี้จะพาทำกราฟแท่ง (Bar Chart) ด้วย Google Chart (สามารถดูบทความเกี่ยวกับ Google Chart ได้ที่นี้ viewtopic.php?f=78&t=42843) การทำ Bar Chart นั้นมีหลากหลายรูปแบบให้เลือกใช้ ขึ้นอยู่กับการใส่ Option หรือรูปแบบที่เราต้องการลงไป

ตัวอย่างของ Bar Chart

โค้ด: เลือกทั้งหมด

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!--เรียกใช้ API ของ Google Chart-->
    <script type="text/javascript">
      //------เรียกใช้ package ของทำ Bar Chart
      google.charts.load('current', {'packages':['bar']});   
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
      //------ใส่ข้อมูลที่จะแสดงบนกราฟ 2 ส่วนคือ 
      //--1. บรรทัดแรกเป็น label ในแกน x (แนวตั้ง)
      //--2. บรรทัดที่ 2 เป็นต้นไปต้องเป็นจำนวน 
      //--แต่ย่ำว่าต้องเป็นตัวเลขเท่านั้น หากเป็นข้อความ var, string กราฟจะไม่แสดง
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],  
          ['2014', 1000, 400, 200],  
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);
	//--ส่วนตั้งค่ารูปแบบของกราฟ เช่น หัวข้อกราฟ, รูปแบบตัวอักษร, ขนาดของแท่ง, แนวของกราฟแท่ง (แนวตั้ง / แนวนอน)
        var options = {
          chart: {
            title: 'Company Performance', //--หัวข้อกราฟ
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',  //---คำอธิบายกราฟจะอยู่ใต้ title
          },
          bars: 'horizontal' //--ให้กราฟอยู่ในแนวตั้ง (vertical) / แนวนอน (horizontal)
        };
	//--ส่วนประมวลผลทำกราฟออกมาเอา id ที่ชื่อ barchart_material ไปใช้ในหน้า View ของเรา 
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
  <!--ใช้ div ในการแสดงผลกราฟออกมาสามารถปรับขนาดกราฟได้ตามต้องการ-->
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>
ผลลัพท์ :
screenshot-developers.google.com-2020.12.23-10_55_04.png
screenshot-developers.google.com-2020.12.23-10_55_04.png (29.88 KiB) Viewed 2176 times
ข้อมูลเพิ่มเติม :
  • หากกราฟไม่แสดง ให้เราตรวจสอบดูที่ข้อมูลจำนวนว่าเป็นตัวเลขหรือไม่ (เช่น int, float, decimal เป็นต้น)
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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