• 0

عرض بيانات الوزن و التاريخ في شارت في فلاتر

عرض بيانات الوزن و التاريخ في شارت في فلاتر و يكون البيانات راجعة من api كيف ممكن اعمله

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

فلنفرض أن هناك بيانات مرجعة من 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 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن