สร้างกราฟง่ายๆ ด้วย chart.js
ตอนแรกอยากจะทดสอบการใช้งาน HTML 5 ว่ามีข้อดีอย่างไรบ้าง search ไปมา พบ web สร้างกราฟ เฉยเลย 55 ที่ chart.js ซึ่งเป็นการใช้ภาษา java script เขียน และดูกราฟที่ออกมาสวยดี ก็เลยทำตาม แต่มาเจอผมบังภูเขา ทำอย่างไงกราฟก็ไม่แสดง T T แล้วก็พบทางสว่างเลยนำมาบันทึกไว้กันลืม
วิธีสร้างกราฟก็คือ 1. สร้างไฟล์ html ในที่นี้ใช้ IDE ของ Netbean 2. เพิ่ม chart.js ไว้ใน ในส่วน html 3. สร้างพื้นที่ ที่จะแสดงกราฟด้วย canvas ด้วย tag ใหม่ ของ html5 4. ทำการ link ระหว่าง canvas กับตัวแปรใน java script ซึ่งเค้าเรียกว่า get context มัง ^ ^ ตอนนี้ ตัวแปร ctx ก็ติดต่อกับ canvas ได้แล้ว 5. ใส่ข้อมูลที่จะวาดกราฟ ในที่นี้เป็นแบบ กราฟเส้น 6. สุดท้ายเป็นการเรียกใช้โดยใช้คำสั่ง var myNewChart = new Chart(ctx).Line(data); ก็ได้กราฟสวยๆออกมา
หมายเหตุที่เจอปัญหา คือ 1. เรียกใช้กราฟ ก่อนกำหนด data ทำให้ไม่มีอะไรแสดง 2. สร้างกำหนด วิธีแสดงผลได้โดยผ่านตัวแปร option ประมาณนี้ var myNewChart = new Chart(ctx).Line(data,options); ซึ่งรายละเอียดการใช้ อยู่ที่ document ซึ่งใน web จะใช้ประมาณว่า Line.defaults = { แต่เราต้องเปลียน Line.defaults ให้เป็นชื่อ options เน้อ
Create Date : 13 พฤษภาคม 2557 | | |
Last Update : 13 พฤษภาคม 2557 7:18:30 น. |
Counter : 2883 Pageviews. |
| |
|
|
|