>> มาวาด Pie Chart ด้วย GWT Google Chart APIs กันเถอะ ยังจำกันได้ไหมครับที่ผมเคยเล่าให้ฟังว่าเราสามารถใช้ Google Chart APIs มาวาด chart ให้เราบนเอกสาร HTML ได้อย่างไร คราวนี้จะวาดโดยใช้ GWT กันบ้าง
>> ทราบกันดีอยู่แล้วว่า GWT ไม่เน้นจาวาสคริปต์ เขียนแต่จาวาล้วนๆ และมันต้องการ .jar ซึ่งเป็น library เพื่อทำงานต่างๆ ดังนั้นเราต้องการ gwt-visualization-XXX.jar เพื่อวาด chart ให้เราครับ (เมื่อ XXX คือหมายเลขเวอร์ชัน)
>> ตรงไปดาวน์โหลด .jar ดังกล่าวที่ https://code.google.com/p/gwt-google-apis/wiki/Downloads?tm=2
เลือกลิงค์โหลดภายใต้หัวข้อ Google Chart Tools (aka Visualization) Library
>> สร้างโปรเจ็กต์ชื่อ PieChartExample
>> ณ war/WEB-INF/lib คัดลอก .jar ของเราที่โหลดมาไปวางไว้ แล้วคลิกขวาที่ .jar ตัวเดิม เลือก Build Path > Add to Build Path เพื่อนำ .jar เข้าสู่ระบบ
>> เปิดไฟล์ config ที่ชื่อ PieChartExample.gwt.xml แล้วเพิ่มโค้ดนี้ลงไป
เป็นการบอกต่อ GWT ว่าจะหาคลาสไลบรารี่ที่เกี่ยวข้องกับ chart นี้ได้ที่ไหน
>> เอาล่ะครับ ต่อจากนี้ก็เป็นการโค้ดภาษาจาวาล้วนๆ โดยหัวใจของ chart ในเบื้องต้นต้องการสองอย่าง
1) data ให้เราใช้คลาส DataTable เป็นตัวจัดการข้อมูล โดยมีข้อกำหนดดังนี้
- กำหนด column ก่อน บอกประเภทและชื่อที่ใช้ใน column นั้น
- กำหนดจำนวน row หรือปริมาณข้อมูลที่ต้องการ
2) options ให้เราใช้คลาสประเภท options ของตัว chart นั้นๆครับ ในที่นี้ผมจะวาด Pie Chart ก็จะใช้คลาส PieOptions
- กำหนดลวดลาย กว้าง ยาว สี เส้น ฯลฯ ของ chart
>> สุดท้ายเรียก VisualizationUtils เพื่อทำการโหลด chart ผ่านคลาส Runnable เพื่อคอยให้มันเตรียม chart เสร็จ มันก็จะจับ chart มาแสดงให้เรา แต่นแต้น! ดังรูปที่เพื่อนๆเห็นนี่แหละ เคี๊ยกๆ
>> อ่านเพิ่มเติม
- http://www.codedrops.in/gwt-tutorial/gwt-chart/
- https://developers.google.com/chart/interactive/docs/gallery หรือ
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
>> ดาวน์โหลด source code ของ chart นี้ที่ผมเขียนเลียนแบบได้ที่
PieChartExample.java
>> chart นี้แสดงปริมาณการทำงานเทียบกับปริมาณการนอนเป็นชั่วโมงในหนึ่งวัน (24 ชั่วโมง) คืนนี้ฝันดีครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น