اذهب إلى المحتوى
  • 0

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

Khaled Mohammed7

السؤال

Recommended Posts

  • 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,

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...