تحويل بيانات MongoDB إلى مخططات Highcharts باستخدام JavaScript

في عالم تطوير الويب، يعتبر التعامل مع البيانات وتنسيقها بشكل صحيح أمرًا حاسمًا لتحقيق الأداء الفعّال والتفاعلي لتطبيقاتك. في هذا السياق، يأتي تعاملك مع استجابة JSON الخاصة بقاعدة البيانات MongoDB كتحدٍ أمامك. يهدف هدفك إلى تنسيق هذه البيانات بشكل يسهل دمجها في مخططات Highcharts. لنلقي نظرة عن كثب على كيفية تحقيق هذه المهمة.

في البداية، يمكنك استخدام لغة JavaScript لتحليل استجابة JSON وتنظيم البيانات بطريقة مناسبة. يمكنك استخدام دوال JavaScript المتقدمة مثل map و reduce لتحويل البيانات إلى التنسيق الذي تريده. إليك مثال على كيفية تحقيق ذلك:

javascriptCopy code
// الاستجابة من MongoDB
const jsonData = [
    {
        "_id" : 4,
        "status" : [ 
            {
                "status" : "Closed",
                "count" : 2
            }, 
            {
                "status" : "Open",
                "count" : 17
            }
        ],
        "count" : 19
    },
    {
        "_id" : 3,
        "status" : [ 
            {
                "status" : "Closed",
                "count" : 6
            }, 
            {
                "status" : "Open",
                "count" : 22
            }
        ],
        "count" : 28
    }
];

// تنسيق البيانات لتناسب Highcharts
const formattedData = jsonData.reduce((acc, item) => {
    const categoryIndex = item._id.toString();
    
    item.status.forEach(status => {
        const statusIndex = acc.findIndex(entry => entry.name === status.status);
        
        if (statusIndex === -1) {
            acc.push({
                name: status.status,
                data: [status.count]
            });
        } else {
            acc[statusIndex].data.push(status.count);
        }
    });

    return acc;
}, []);

// استخراج فئات البيانات
const categories = jsonData.map(item => item._id.toString());

// النتيجة النهائية
const result = {
    categories,
    series: formattedData
};

console.log(result);

في هذا المثال، تم استخدام reduce للتجميع وتنظيم البيانات واستخراج الفئات، مما ينتج عنه الهيكل المرغوب لتضمينه في Highcharts. تذكر أن تكيف الكود وتعديله وفقًا لاحتياجات مشروعك ومتطلبات Highcharts المحددة.

بالتأكيد، سنوسّع المزيد في التعليق على الكود ونقدم بعض المعلومات الإضافية حول كيفية تحقيق هذه العملية بشكل أفضل.

أولاً، يجب عليك أن تكون على دراية بكيفية استخدام Highcharts في تطبيقك. يمكنك استخدام مكتبة Highcharts لرسم مخططات بيانية تفاعلية بسهولة. يجب عليك تضمين مكتبة Highcharts في مشروعك، وتحديد مكان رسم المخططات داخل صفحة الويب الخاصة بك.

عندما تكون قد قمت بتضمين مكتبة Highcharts، يمكنك استخدام الهيكل الذي أعددته لتحقيق مخططات البيانات بشكل ملائم. على سبيل المثال، يمكنك استخدام الكود التالي لرسم مخطط تشعبي (bar chart) باستخدام Highcharts:

javascriptCopy code
// تحضير البيانات
const categories = jsonData.map(item => item._id.toString());
const seriesData = formattedData;

// تكوين الخيارات للمخطط
const chartOptions = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'مخطط البيانات'
    },
    xAxis: {
        categories: categories,
        title: {
            text: 'الفئات'
        }
    },
    yAxis: {
        title: {
            text: 'القيم'
        }
    },
    series: seriesData
};

// رسم المخطط باستخدام Highcharts
Highcharts.chart('chartContainer', chartOptions);

هنا، قمت بتحضير البيانات وتكوين الخيارات اللازمة لرسم المخطط باستخدام Highcharts. يجب أن تحل مكتبة Highcharts مكان ‘chartContainer’ بداخل صفحتك.

علاوة على ذلك، يمكنك تخصيص الرسم البياني بمزيد من التفاصيل مثل إضافة تسميات للمحاور، الألوان، والعناوين. يمكنك الاطلاع على مستندات Highcharts للحصول على مزيد من الخيارات والإعدادات الممكنة.

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