Khaled Mohammed7 نشر 15 أغسطس 2021 أرسل تقرير مشاركة نشر 15 أغسطس 2021 عرض بيانات الوزن و التاريخ في شارت في فلاتر و يكون البيانات راجعة من api كيف ممكن اعمله 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 بلال زيادة نشر 15 أغسطس 2021 أرسل تقرير مشاركة نشر 15 أغسطس 2021 فلنفرض أن هناك بيانات مرجعة من api على شكل json بهذا الشكل [ { "weight": 92, "week": "2021-08-15" }, { "weight": 87, "week": "2021-08-15" }, { "weight": 80, "week": "2021-08-15" }, { "weight": 81, "week": "2021-08-15" }, { "weight": 71, "week": "2021-08-15" }, { "weight": 60, "week": "2021-08-15" }, { "weight": 58, "week": "2021-08-15" } ] فيمكننا إنشاء Class Model لهذه البيانات بهذا الشكل class UserWeightModel { UserWeightModel(this.week, this.weight); final String week; final double weight; factory UserWeightModel.fromJson(Map<String, dynamic> json) { return UserWeightModel( json['week'].toString(), json['weight'].toDouble(), ); } } ثم يمكننا عمل دالة جلب البيانات من رابط مسار api بهذا الشكل Future loadChartData2() async { var data; final url = "هنا الرابط; final response = await http.get(Uri.parse(url), headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ${token}', }); if (response.statusCode == 200) { data = json.decode(response.body); final dynamic result = json.decode(response.body); for (Map<String, dynamic> i in result) { chartData.add(UserWeightModel.fromJson(i)); } } return data; } لاحظ في السطر التالي 'Authorization': 'Bearer ${token}', أننا اعتمدنا على token المخزن من عملية تسجيل الدخول للعضو , حتى نستطيع جلب الأوزارن و التاريخ الخاصة به , ثم قمنا بإسناد البيانات المرجعة من api إلى List chartData , لأننا سنستخدم هذه List في التعامل مع الشارت chartData.add(UserWeightModel.fromJson(i)); ثم الأن سنقوم باستخدام مكتبة توفر لنا شارت جاهز للتعامل معه, فقمت باختيار مكتبة syncfusion_flutter_charts: ^19.2.49 يمكنك تثبيتها في ملف pubspec.yaml من هنا , ثم تقوم بتشغيل الأمر التالي flutter pub get ليتم تضمين المكتبة إلى مشروعنا, ثم في Widget Build الخاصة بنا يمكننا عرض الشارت من خلال الكود التالي return FutureBuilder( future: loadChartData2(), builder: (context, snapshot){ if(snapshot.hasData){ return SfCartesianChart( zoomPanBehavior: _zoomPanBehavior, primaryXAxis: CategoryAxis(), title: ChartTitle(text: ""), //legend: Legend(isVisible: true), tooltipBehavior: _tooltipBehavior, series: <ChartSeries<UserWeightModel, String>>[ LineSeries<UserWeightModel, String>( dataSource: chartData, xValueMapper: (UserWeightModel user, _) => user.week.substring(5), yValueMapper: (UserWeightModel user, _) => user.weight, dataLabelSettings: DataLabelSettings(isVisible: true), enableTooltip: true, ), ], /*primaryXAxis: NumericAxis( edgeLabelPlacement: EdgeLabelPlacement.shift),*/ ); } return Center(child: CircularProgressIndicator(),); }, ), فلاحظ أنه تم استخدام FutureBuilder لأننا نتعامل مع بيانات تأخذ وقت في عملية جلبها و ايضا في future قمنا باستدعاء الدالة التي قمنا بإنشائها مسبقا وهي loadChartData2() ثم لاحظ أنه تم عرض في المحور x التاريخ xValueMapper: (UserWeightModel user, _) => user.week.substring(5), و في المحور y تم عرض الوزن yValueMapper: (UserWeightModel user, _) => user.weight, و كانت dataSource الخاصة بهذا الشارت هي List chartData dataSource: chartData, 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Khaled Mohammed7 نشر 15 أغسطس 2021 الكاتب أرسل تقرير مشاركة نشر 15 أغسطس 2021 شكرا كثير اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Khaled Mohammed7
عرض بيانات الوزن و التاريخ في شارت في فلاتر و يكون البيانات راجعة من api كيف ممكن اعمله
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.