Skip to main content

สร้าง Chart ด้วย ApexCharts

สวัสดีครับ ในบทความนี้เราจะมาแนะนำการสร้าง Bar Chart ด้วย ApexCharts  ซึ่งเป็น open-source charts Javascript รองรับการสร้าง Chart ได้หลากหลายรูปแบบ ดูตัวอย่างเต็ม ๆ ได้ที่ https://apexcharts.com/

การใช้งานเบื้องต้น

ในตัวอย่างนี้เราจะเรียกใช้งานด้วย Javascript โดยจะต้องมีการนำเข้าไฟล์ Apexcharts ดังนี้

ตัวอย่างการใช้งาน

สร้างไฟล์ bar.html และเขียนคำสั่ง Javascript ดังนี้

ตัวอย่างการทำงาน

การประยุกต์ใช้งาน แสดงข้อมูล Bar Chart จากฐานข้อมูล ด้วย PHP/MySQL

สร้าง Database ชื่อ test และ สร้างตาราง ชื่อ report ดังนี้

สร้างไฟล์ index.php ดังนี้

โดยในไฟล์นี้จะเป็นการ ดึงข้อมูลจาก MySQL ด้วย PHP และ นำค่าที่ได้ มากำหนดลงในคำสั่ง Javascript เพื่อให้ ApexCharts  นำข้อมูลไปแสดงผลเป็น Bar Chart ต่อไป

ตัวอย่างการทำงาน

โดยในตัวอย่างนี้ Bar Chart ที่แสดงจะเป็นข้อมูลที่มาจาก Database