كيفية عرض Js.Chart باللغة العربية على ووردبريس

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

تحديات اللغة العربية في Chart.js

عندما نقوم بتضمين مكتبة Chart.js في موقع ووردبريس الخاص بنا، قد نواجه مشكلتين رئيسيتين؛ الأولى تتعلق بعرض الأرقام باللغة الإنجليزية بدلاً من العربية، والثانية تتعلق بالاتجاه من اليمين إلى اليسار (RTL) بدلاً من اليسار إلى اليمين (LTR). يتطلب التعامل مع هذه التحديات بعض الخطوات الإضافية لتحويل الرسوم البيانية إلى لغة عربية شاملة.

إعداد الرسم البياني باستخدام Chart.js

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

const ctx = document.getElementById('myChart').getContext('2d');
const datasets = [
    { label: 'أسعار الذهب', color: '#085703', rates: [] }
];
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: datasets.map(ds => ({
            label: ds.label,
            data: [],
            backgroundColor: '#fbfbfb',
            borderColor: ds.color
        }))
    },
    options: {
        maintainAspectRatio: false,
        responsive: true,
        interaction: {
            intersect: false,
            axis: 'x'
        },
        plugins: {
            title: { display: true },
            legend: { display: true, position: 'top', align: 'center', rtl: true }
        }
    }
});

حل مشكلة الأرقام والنصوص

لحل مشكلة عرض الأرقام باللغة العربية، يمكن استخدام مكتبة تعداد الأرقام العربية التي تقوم بتحويل الأرقام إلى الشكل المناسب. عندما نأخذ البيانات من المصدر الخاص بنا، نستخدم أسلوب تحويل الأرقام كالآتي:

function toArabicNumbers(num) {
    const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
    return num.toString().replace(/[0-9]/g, (d) => arabicNumbers[d]);
}

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

تحديث الرسم البياني بلغة عربية

عند تحديث الرسم البياني لتظهر بيانات جديدة، يمكنك إعداد وظيفة تسمح بجلب البيانات لعدد معين من الأيام. يتم ذلك عبر استدعاء دالة `updateChart()`، حيث نقوم بتعيين بيانات الرسم البياني بشكل ديناميكي:

function updateChart(days) {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(endDate.getDate() - days);
    const dates = [];
    // مزيد من التعليمات البرمجية لجلب البيانات...
    myChart.update();
}

عندما نقوم بعرض البيانات، يجب أن نحرص على استخدام التنسيق العربي و RTL كما تم ذكره مسبقًا.

إضافة مستمع للأحداث

من خلال إضافة مستمع للأحداث، يمكن للمستخدمين التفاعل مع الرسم البياني بشكل أكثر فعالية. عند انتهاء المستخدم من اختيار عدد الأيام التي يريد عرضها، يتم تحديث الرسم البياني لعرض الأسعار:

document.getElementById('days7').addEventListener('click', () => updateChart(7));

الإعلان عن النتائج النهائية

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

إذا واجهتك أي تحديات في تنفيذ هذا الحل، فلا تتردد في البحث عن المزيد من الدعم أو المساعدة من مجتمعات برمجة React أو مطوري ووردبريس.