تحديث بيانات الرسوم البيانية باستخدام Angular وJavaScript

يعد تحديث البيانات في المخططات من المهام الأساسية التي يحتاجها المطورون عند العمل على تطبيقات الويب باستخدام JavaScript وAngular. علاوة على ذلك، فإن إضافة بيانات جديدة أو تحديث البيانات الحالية في المخططات يمكن أن يؤدي إلى تحسين تجربة المستخدم بشكل ملحوظ. في هذا المقال، سنستعرض كيفية تحديث البيانات في مخططات Chart.js باستخدام Angular ونستعرض أمثلة عملية تبين كيفية القيام بذلك.

التعرف على Chart.js في Angular

تعتبر مكتبة Chart.js واحدة من أشهر المكتبات المستخدمة لإنشاء المخططات في تطبيقات الويب. توفر هذه المكتبة مجموعة متنوعة من أنواع المخططات، مثل المخططات الشريطية، والمخططات الدائرية، ومخططات الخطوط، مما يجعلها مثالية لمختلف أنواع البيانات. يتيح استخدام Chart.js في إطار Angular إمكانية دمج الرسوم البيانية بسهولة في واجهة المستخدم وتحديثها بشكل ديناميكي استنادًا إلى الأحداث المختلفة.

كيفية تحديث البيانات في المخططات

عند العمل على تحديث البيانات في مخطط شريطي باستخدام Angular وChart.js، يمكننا استخدام نموذجًا بسيطًا كما يلي:

barChartData: ChartConfiguration['data'] = {
    labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
    datasets: [
        { data: [65, 59, 80, 81, 56, 55, 40], label: 'السلسلة أ' },
        { data: [65, 59, 80, 81, 56, 55, 40], label: 'السلسلة ب' },
        { data: [28, 48, 40, 19, 86, 27, 90], label: 'السلسلة ج' }
    ]
};

في الكود السابق، نقوم بتعريف مجموعة من البيانات لمخطط شريطي. لكن في حالة إذا أردنا تحديث البيانات بناءً على خيار المستخدم (مثل اختيار فترة زمنية: يومية، شهرية، أو سنوية)، سنحتاج إلى تعديل هذه البيانات عند كل تفاعل.

تعديل البيانات بناءً على اختيار المستخدم

لتنفيذ ذلك، يمكننا إنشاء دالة setBar() التي ستقوم بتحديث البيانات حسب خيارات المستخدم، كما في المثال التالي:

setBar() {
    this.barChartData.datasets = [];
    this.barChartData.labels = [];
    if (this.statisticsRes.length > 0) {
        let labelsSet: string[] = [];
        switch (this.optionTimer) {
            case Environment.statisticTime.daily:
                labelsSet = this.getLast24Hours();
                break;
            case Environment.statisticTime.monthly:
                labelsSet = this.getLast30Days();
                break;
            case Environment.statisticTime.annual:
                labelsSet = this.getLast12Months();
                break;
        }
        this.barChartData.labels = labelsSet;
        this.barChartData.datasets = [
            {
                data: this.statisticsRes.map((o) => o.travelcounter).reverse(),
                label: 'Travelcounter'
            },
            {
                data: this.statisticsRes.map((o) => o.odometer).reverse(),
                label: 'Odometer [m]'
            },
            {
                data: this.statisticsRes.map((o) => o.countoutofservice).reverse(),
                label: 'عدد أخطاء الحظر'
            }
        ];
    }
}

التحدي والبحث عن الحلول

عند القيام بأعمال التحديث، قد تواجه بعض التحديات، مثل عدم وجود دالة مدمجة مثل this.barChartData.update()، وهذا يمكن أن يربك المطورين. يعتمد الحل الصحيح على إعادة تعيين البيانات في كائن المخطط، مما يتيح لChart.js إعادة رسم المخطط بناءً على البيانات الجديدة.

خلاصة

باستخدام JavaScript وAngular لتحديث بيانات المخططات في Chart.js، يمكنك تحقيق عرض ديناميكي وجذاب للمعلومات. من خلال توفير خيارات للمستخدم لتحديث البيانات بحسب الحاجة، سيكون لديك تطبيق يمكنه تقديم البيانات بطريقة سهلة وسريعة. استمر في استكشاف مزايا Chart.js وطرق تحسين تطبيقاتك بالاعتماد على البيانات المتغيرة.

في النهاية، تذكر أن القدرة على تحديث البيانات بشكل ديناميكي تعتبر من العناصر الرئيسية التي تدعم تحسين تجربة المستخدم في تطبيقات الويب. من خلال ممارستك المستمرة وتنفيذ التقنيات المذكورة، يمكنك بناء واجهات مستخدم أكثر تفاعلية وديناميكية.