Print
Details: Category: บทความ Flutter | Published: 14 September 2020 | Hits: 3499

มาดูวิธีการใช้ Chart Flutter แบบนีครับ

screenshot 1600123706770

เริ่มต้นจากการไป เพิ่ม Library ที่นี่ครับ

Screen Shot 2563 09 15 at 052628 

 เข้าไปที่ https://pub.dev/packages/charts_flutter

 Screen Shot 2563 09 15 at 052655

ไปที่ pubspace.yaml เพิ่ม dependencies

Screen Shot 2563 09 15 at 052738

สร้าง คลาส Model ก่อนในตัวอย่าง ClickPerYear จะรับค่า String year, int click, และ สี charts.Color color ครับ

Screen Shot 2563 09 15 at 053333

 มาถึงตอนสำคัญ สร้าง data ที่ เป็น array ของ model ClickPerYear และนำ data มาสร้างเป็น series ที่เป็น Array เหมือนกัน

 Screen Shot 2563 09 15 at 053350

 สร้าง Widget chart จาก series

Screen Shot 2563 09 15 at 053406

 รูปแบบ การแสดงใน Scaffold ครับ