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

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

شكرا كثير