مكتبة Charts في Swift: دليل شامل مع أمثلة عملية

مقدمة عن مكتبة Charts في Swift

مكتبة Charts هي مكتبة قوية ومرنة مفتوحة المصدر لتصور البيانات على منصات Apple (iOS، tvOS، macOS، watchOS). وهي مكتوبة بلغة Swift وتوفر مجموعة واسعة من أنواع الرسوم البيانية: من الخطوط البسيطة والأعمدة إلى الرسوم البيانية المركبة والفقاعية المعقدة. المكتبة هي فرع من مكتبة iOS الشهيرة ios-charts، والتي بدورها تم نقلها من مكتبة MPAndroidChart الخاصة بلغة Java.

لماذا تحتاج إلى مكتبة Charts؟

• تصور البيانات: تحويل الأرقام المملة إلى رسوم بيانية ومخططات بصرية واضحة.
• وظائف غنية: تدعم الرسوم المتحركة، والتفاعل (اللمس، التحديد)، والعناوين، والمحاور، وعلامات البيانات، وغيرها الكثير.
• أداء أصلي: مكتوبة بلغة Swift وتستخدم Core Graphics و Core Animation، مما يضمن أداءً سلسًا حتى مع مجموعات البيانات الكبيرة.
• سهولة التكامل: يمكن تثبيتها بسهولة عبر Swift Package Manager أو CocoaPods أو Carthage.
• مجتمع نشط: يتم تحديثها بانتظام، وتحتوي على وثائق شاملة والعديد من الأمثلة.

تثبيت مكتبة Charts

يمكن تثبيت مكتبة Charts بإحدى ثلاث طرق رئيسية. الطريقة الموصى بها هي Swift Package Manager (SPM).

1. Swift Package Manager (SPM) - الطريقة الموصى بها

1. في Xcode، افتح مشروعك.
2. اختر File → Add Packages...
3. في حقل البحث، أدخل رابط المستودع: https://github.com/danielgindi/Charts.git
4. اختر الإصدار المطلوب (عادةً آخر إصدار مستقر).
5. اضغط على Add Package.
6. تأكد من إضافة الحزمة إلى هدفك (target).

2. CocoaPods

أضف إلى ملف Podfile الخاص بك:

platform :ios, '13.0'
use_frameworks!

target 'YourApp' do
  pod 'Charts'
end

ثم نفذ الأمر في الطرفية:

pod install

3. Carthage

أضف إلى ملف Cartfile الخاص بك:

github "danielgindi/Charts"

ثم نفذ:

carthage update

بداية سريعة: إنشاء أول رسم بياني

لنقم بإنشاء رسم بياني خطي بسيط يعرض تغير درجة الحرارة خلال أسبوع.

1. استيراد المكتبة إلى وحدة التحكم الخاصة بك:

   import UIKit
   import Charts

2. إضافة View على Storyboard أو برمجيًا:

   على الـ Storyboard، اسحب UIView وقم بتغيير صنفه إلى LineChartView في Identity Inspector. أنشئ IBOutlet:

   @IBOutlet weak var lineChartView: LineChartView!

3. إعداد البيانات:

   func setupLineChart() {
       // 1. إنشاء نقاط البيانات
       let dataEntries: [ChartDataEntry] = [
           ChartDataEntry(x: 1.0, y: 20.0),
           ChartDataEntry(x: 2.0, y: 22.0),
           ChartDataEntry(x: 3.0, y: 19.0),
           ChartDataEntry(x: 4.0, y: 25.0),
           ChartDataEntry(x: 5.0, y: 23.0),
           ChartDataEntry(x: 6.0, y: 21.0),
           ChartDataEntry(x: 7.0, y: 26.0)
       ]
   
       // 2. إنشاء مجموعة البيانات
       let lineDataSet = LineChartDataSet(entries: dataEntries, label: "درجة الحرارة (°C)")
       lineDataSet.colors = [.systemBlue] // لون الخط
       lineDataSet.circleColors = [.systemRed] // لون النقاط
       lineDataSet.circleRadius = 4.0
       lineDataSet.lineWidth = 2.0
   
       // 3. إنشاء كائن البيانات
       let lineData = LineChartData(dataSet: lineDataSet)
   
       // 4. تعيين البيانات للرسم البياني
       lineChartView.data = lineData
   
       // 5. إعدادات إضافية
       lineChartView.xAxis.labelPosition = .bottom
       lineChartView.rightAxis.enabled