วิธีการสร้างภาพข้อมูลใน Flutter ด้วย fl_chart และ Back4App

บทนำ การแสดงข้อมูลเป็นแง่มุมที่สำคัญของแอปพลิเคชันสมัยใหม่ ช่วยให้ผู้ใช้เข้าใจข้อมูลที่ซับซ้อนได้ผ่านกราฟและแผนภูมิที่เข้าใจง่าย ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการสร้างแผนภูมิที่โต้ตอบได้และมีความน่าสนใจในแอปพลิเคชัน flutter ของคุณโดยใช้ fl chart แพ็คเกจ นอกจากนี้คุณจะรวม back4app—แพลตฟอร์ม backend as a service (baas) ที่ขับเคลื่อนโดย parse server—เพื่อเก็บและเรียกคืนข้อมูลสำหรับแผนภูมิของคุณ เมื่อสิ้นสุดบทแนะนำนี้ คุณจะมีแอป flutter ที่ทำงานได้อย่างสมบูรณ์ซึ่งแสดงข้อมูลที่เปลี่ยนแปลงได้ที่ดึงมาจาก back4app โดยใช้ประเภทแผนภูมิที่หลากหลาย เช่น แผนภูมิเส้น แผนภูมิแท่ง และแผนภูมิวงกลม ข้อกำหนดเบื้องต้น ในการทำบทแนะนำนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี บัญชี back4app account หากคุณยังไม่มี คุณสามารถลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com/ ติดตั้ง flutter sdk บนเครื่องของคุณ คุณสามารถติดตาม คู่มือการติดตั้ง flutter อย่างเป็นทางการ https //flutter dev/docs/get started/install สำหรับระบบปฏิบัติการของคุณ ความรู้พื้นฐานเกี่ยวกับ dart และ flutter หากคุณเป็นมือใหม่ใน flutter ให้พิจารณาทบทวน เอกสาร flutter https //flutter dev/docs เพื่อทำความคุ้นเคยกับพื้นฐาน parse server sdk สำหรับ flutter เพิ่มลงในโปรเจกต์ของคุณ คุณสามารถเรียนรู้วิธีการตั้งค่าโดยติดตาม คู่มือ back4app flutter sdk https //www back4app com/docs/flutter/parse flutter sdk ide หรือโปรแกรมแก้ไขข้อความ เช่น visual studio code หรือ android studio ขั้นตอนที่ 1 – การตั้งค่า back4app backend ในขั้นตอนนี้ คุณจะสร้างแอปพลิเคชัน back4app ใหม่และตั้งค่าคลาสข้อมูลเพื่อเก็บข้อมูลแผนภูมิของคุณ 1 1 สร้างแอปพลิเคชัน back4app ใหม่ เข้าสู่ระบบที่ แดชบอร์ด back4app https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" ใส่ชื่อสำหรับแอปพลิเคชันของคุณ เช่น "flutterchartapp" , และคลิก "สร้าง" 1 2 ตั้งค่ารูปแบบข้อมูล ในแดชบอร์ดแอปพลิเคชันของคุณ ให้ไปที่ "ฐานข้อมูล" ในแถบด้านซ้าย คลิกที่ "สร้างคลาส" ที่ด้านบนของหน้า ในโมดัลที่ปรากฏ เลือก "กำหนดเอง" ป้อน "salesdata" เป็นชื่อคลาส คลิก "สร้างคลาส" 1 3 เพิ่มคอลัมน์ในคลาส ในคลาส "salesdata" คลิกที่ "+" เพื่อเพิ่มคอลัมน์ใหม่ เพิ่มคอลัมน์ต่อไปนี้ เดือน ประเภท string ยอดขาย ประเภท number รูปแบบข้อมูลของคุณถูกตั้งค่าเรียบร้อยแล้วเพื่อเก็บข้อมูลยอดขายรายเดือน ซึ่งคุณจะทำการแสดงผลในแอป flutter ของคุณ ขั้นตอนที่ 2 – การเติมข้อมูลในฐานข้อมูลด้วยข้อมูลตัวอย่าง ก่อนที่จะดึงข้อมูลในแอปของคุณ คุณต้องมีข้อมูลตัวอย่างในฐานข้อมูล back4app ของคุณ ยังอยู่ในคลาส "salesdata" คลิกที่ "+" เพื่อเพิ่มแถวใหม่ ป้อนข้อมูลตัวอย่างต่อไปนี้ ทำซ้ำขั้นตอนข้างต้นเพื่อเพิ่มข้อมูลตัวอย่างทั้งหมด ขั้นตอนที่ 3 – การตั้งค่าโปรเจกต์ flutter ในขั้นตอนนี้ คุณจะสร้างโปรเจกต์ flutter ใหม่และเพิ่มการพึ่งพาที่จำเป็น 3 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและรัน flutter create flutter chart app ไปที่ไดเรกทอรีโปรเจกต์ cd flutter chart app 3 2 เพิ่มการพึ่งพาไปที่ pubspec yaml เปิด pubspec yaml และเพิ่มการพึ่งพาต่อไปนี้ dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 รัน flutter pub get เพื่อติดตั้งแพ็คเกจต่างๆ ขั้นตอนที่ 4 – การเริ่มต้น parse ในแอป flutter ของคุณ เพื่อเชื่อมต่อแอป flutter ของคุณกับ back4app คุณต้องเริ่มต้น parse sdk 4 1 รับข้อมูลประจำตัวแอป back4app ในแดชบอร์ด back4app ของคุณ ให้ไปที่ "app settings" > "security & keys" จดบันทึก application id และ client key ของคุณ 4 2 เริ่มต้น parse ใน main dart เปิด lib/main dart และแก้ไขตามนี้ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home page dart'; // you'll create this file in the next step void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'flutter chart app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } แทนที่ 'your application id' และ 'your client key' ด้วยข้อมูลรับรองที่คุณได้รับจาก back4app ขั้นตอนที่ 5 – ดึงข้อมูลจาก back4app ในขั้นตอนนี้ คุณจะดึงข้อมูลการขายจาก back4app โดยใช้ parse sdk 5 1 สร้าง home page dart สร้างไฟล์ใหม่ lib/home page dart และเพิ่มโค้ดต่อไปนี้ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ fl chart/fl chart dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class salesdata { final string month; final double sales; salesdata(this month, this sales); } class homepagestate extends state\<homepage> { list\<salesdata> chartdata = \[]; @override void initstate() { super initstate(); fetchsalesdata(); } future\<void> fetchsalesdata() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('salesdata')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { setstate(() { chartdata = apiresponse results! map((data) { final month = data get\<string>('month') ?? ''; final sales = data get\<num>('sales')? todouble() ?? 0 0; return salesdata(month, sales); }) tolist(); }); } else { // handle errors print('error fetching data ${apiresponse error? message}'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('sales chart'), ), body chartdata isempty ? center(child circularprogressindicator()) padding( padding const edgeinsets all(16 0), child linechart( linechartdata( miny 0, maxy 250, titlesdata fltitlesdata( lefttitles axistitles( sidetitles sidetitles(showtitles true), ), bottomtitles axistitles( sidetitles sidetitles( showtitles true, gettitleswidget bottomtitlewidgets, interval 1, ), ), ), griddata flgriddata(show true), borderdata flborderdata( show true, border border all(color colors grey), ), linebarsdata \[ linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], dotdata fldotdata(show true), ), ], ), ), )); } widget bottomtitlewidgets(double value, titlemeta meta) { const style = textstyle( fontsize 12, ); widget text; int index = value toint(); if (index >= 0 && index < chartdata length) { text = text(chartdata\[index] month substring(0, 3), style style); } else { text = text('', style style); } return sidetitlewidget( axisside meta axisside, child text, ); } } คำอธิบาย salesdata class คลาสโมเดลที่เรียบง่ายเพื่อเก็บข้อมูลเดือนและข้อมูลการขาย fetchsalesdata() ดึงข้อมูลจาก salesdata คลาสใน back4app และอัปเดต chartdata รายการ linechart ใช้ fl chart เพื่อสร้างกราฟเส้นตามข้อมูลที่ดึงมา bottomtitlewidgets() ปรับแต่งป้ายชื่อแกนล่างเพื่อแสดงตัวย่อของเดือน ขั้นตอนที่ 6 – การรันแอป ตอนนี้ที่คุณได้ตั้งค่า frontend และ backend เรียบร้อยแล้ว ถึงเวลาที่จะรันแอปของคุณ ในเทอร์มินัลของคุณ ให้ไปที่ไดเรกทอรีโปรเจกต์ของคุณ รันแอปโดยใช้ flutter run คุณควรเห็นกราฟเส้นที่แสดงข้อมูลการขายสำหรับแต่ละเดือน ขั้นตอนที่ 7 – การเพิ่มความโต้ตอบและการปรับแต่ง เพื่อทำให้กราฟของคุณมีความโต้ตอบและน่าสนใจมากขึ้น คุณสามารถปรับแต่งเพิ่มเติมได้ 7 1 ปรับแต่งลักษณะกราฟ ปรับเปลี่ยน linechartbardata ใน build เมธอดของคุณ linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], belowbardata barareadata( show true, colors \[colors blue withopacity(0 3)], ), dotdata fldotdata( show true, ), ) belowbardata เพิ่มพื้นที่ที่เต็มไปด้านล่างเส้น dotdata แสดงจุดที่แต่ละจุดข้อมูล 7 2 เปิดใช้งานการโต้ตอบด้วยการสัมผัส คุณสามารถเปิดใช้งานการโต้ตอบด้วยการสัมผัสเพื่อแสดงเครื่องมือข้อมูล เพิ่มสิ่งต่อไปนี้ใน linechartdata touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), ขั้นตอนที่ 8 – แสดงประเภทกราฟที่แตกต่างกัน คุณยังสามารถแสดงประเภทกราฟอื่น ๆ โดยใช้ fl chart 8 1 ตัวอย่างกราฟวงกลม แทนที่ linechart ใน build วิธีของคุณด้วย piechart piechart( piechartdata( sections chartdata map((data) { return piechartsectiondata( value data sales, title data month substring(0, 3), color colors primaries\[chartdata indexof(data) % colors primaries length], ); }) tolist(), sectionsspace 2, centerspaceradius 40, ), ) piechartsectiondata กำหนดแต่ละส่วนของกราฟวงกลม บทสรุป ในบทเรียนนี้ คุณได้เรียนรู้วิธีการใช้ fl chart แพ็คเกจเพื่อแสดงข้อมูลในแอปพลิเคชัน flutter ของคุณ คุณได้รวม back4app เป็นโซลูชันแบ็คเอนด์เพื่อเก็บและเรียกคืนข้อมูลโดยใช้ parse sdk โดยการดึงข้อมูลจาก back4app และแสดงผลด้วยประเภทกราฟต่างๆ คุณจึงสามารถสร้างการแสดงผลข้อมูลที่มีพลศาสตร์และโต้ตอบได้ในแอป flutter ของคุณ เพื่อเพิ่มประสิทธิภาพแอปพลิเคชันของคุณต่อไป ให้พิจารณาสำรวจประเภทกราฟอื่น ๆ ที่มีให้โดย fl chart , เช่น กราฟแท่งและกราฟเรดาร์ คุณยังสามารถนำการอัปเดตข้อมูลแบบเรียลไทม์มาใช้โดยการรวม live queries จาก back4app แหล่งข้อมูลเพิ่มเติม เอกสาร back4app https //www back4app com/docs แพ็คเกจ fl chart บน pub dev https //pub dev/packages/fl chart คู่มือ parse sdk สำหรับ flutter https //docs parseplatform org/flutter/guide/ เอกสารอย่างเป็นทางการของ flutter https //flutter dev/docs โปรดตรวจสอบให้แน่ใจว่าได้แทนที่ค่าตัวอย่างเช่น 'your application id' และ 'your client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขอให้สนุกกับการเขียนโค้ด!