Skip to main content

สร้าง Charts แบบสวย ๆ ด้วย Echarts Javascript Library

สวัสดีครับ ในบทความนี้ เราจะมาแนะนำ Java script Library อีกตัว ไว้เป็นทางเลือก สำหรับ การสร้าง รายงานในรูปแบบกราฟ ครับ
ซึ่ง Library ที่จะแนะนำในที่นี้ มีชื่อ ว่า  Echarts สามารถดูตัวอย่าง เต็ม ๆ ได้ที่

https://ecomfe.github.io/echarts-doc/public/en/index.html

ในเว็บจะมีรายละเอียด ตัวอย่าง Api และ วิธีใช้งาน อย่างละเอียด สามารถใช้งานได้ง่าย มาก ๆ ครับ และ ยัง รองรับการสร้าง กราฟ ในรูปแบบต่าง ๆ มาก มาย เช่น Line,Bar,Pie,Scatter,Map,GEO,Radar, หรือ จะสร้างกราฟแบบ 3D ก็ได้ เรียกได้ว่าสร้างได้ทุกแบบที่ต้องการเลยครับ

สำหรับในบทความนี้ เราจะมา แสดงตัวอย่างการเรียกใช้งานแบบง่าย และ เป็น Chart ที่ใช้บ่อย คือ Bar (กราฟแท่ง) และ Pie (กราฟวงกลม)

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

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

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

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

การแสดงข้อมูลใน Chart จากฐานข้อมูล MySQL

ในตัวอย่างต่อไปนี้ เราจะนำข้อมูลที่อยู่ในฐานข้อมูล MySQL มาแสดงใน Chart  ก่อนอื่น เรามาสร้าง ตารางตัวอย่างกันก่อนครับ

ตัวอย่าง ได้สร้าง ฐานข้อมูล ชื่อว่า echarts และ สร้างตารางชื่อว่า report

นำเข้าข้อมูลตัวอย่าง

จากนั้นเรามาเขียนไฟล์ bar.php เพื่อแสดงข้อมูล Chart กันครับ

ตัวอย่างไฟล์ bar.php

ต่อมาเรามาทำการแสดงข้อมูลในรูปแบบ Pie Chart กันบ้าง

ตัวอย่างไฟล์  pie.php

ตัวอย่าง Source Code

ขอขอบคุณข้อมูลจาก https://ecomfe.github.io/echarts-doc/public/en/index.html