Skip to main content
การใช้งาน ChartJs

การใช้งาน Chart JS สร้างรายงานในรูปแบบกราฟ

บทความนี้ทางเราจะขอแนะนำการใช้งาน ChartJs ซึ่งเป็น javascript library
สำหรับ สร้างรายงาน กราฟ ในรูปแบบ ต่าง ๆ  ตัว ChartJs นั้นเป็น OpenSource ครับ
ซึ่งสามารถใช้งานได้ฟรี เรามาดูวิธีการใช้งานเบื้องต้นกันเลยดีกว่าครับ

ไปที่   http://www.chartjs.org

chartjs

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

1.สร้าง Tag canvas กำหนดให้มี ไอดี เท่ากับ myChart

2. นำเข้า Script  Chart.js CDN

3.ตัวอย่างการเรียกใช้งาน ChartJs ในรูปแบบ Bar chart

ตัวอย่างการแสดงผล

chartjs

เราสามารถ เปลี่ยนรูปแบบ การแสดงผลในรูปแบบอื่น ๆ ได้ ดังนี้

การแสดงผล แบบ Line Chart   แก้ไข Script การเรียกใช้งาน ChartJs
กำหนดค่า type : ‘line’

ตัวอย่างการแสดงผล Line Chart

chartjs_linechart

การแสดงผล แบบ Pie Chart   แก้ไข Script การเรียกใช้งาน ChartJs
กำหนดค่า type : ‘pie’

ตัวอย่างการแสดงผล Pie Chart

chartjs_piechart

สามารถดูตัวอย่างการตั้งค่า อื่น ๆ เพิ่มเติมที่  http://www.chartjs.org/docs/

ตัวอย่างการใช้งาน แสดงข้อมูลกราฟจากฐานข้อมูล MySQL

สร้าง ฐานข้อมูล Demo และ สร้างตาราง ชื่อ Chart

สร้างไฟล์ index.php

ตัวอย่างการแสดงผล ChartJs

chartjs_database