عرض قيم البيانات في أسطورة الرسم البياني

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

لتحقيق هذا الهدف، يمكنك استخدام خاصية الـ “tooltips” في مكتبة Chart.js التي تسمح لك بعرض معلومات إضافية عن البيانات عند تحويب المؤشر فوق القطاعات. يمكنك أيضًا استخدام دالة مخصصة لتنسيق المعلومات وإضافتها إلى العنوان.

لنقم بتعديل الكود الخاص بك ليتم عرض القيم المتعلقة بكل قطاع في الأسطورة:

javascriptCopy code
var tempData = {
    labels: Status,
    datasets: [{
        label: "Status",
        data: Qtd,
        backgroundColor: randColor
    }]
};

var ctx = $("#pieStatus").get(0).getContext("2d");
var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: tempData,
    options: {
        title: {
            display: true,
            fontsize: 14,
            text: 'Total de Pedidos por Situação'
        },
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                generateLabels: function(chart) {
                    var data = chart.data;
                    if (data.labels.length && data.datasets.length) {
                        return data.labels.map(function(label, i) {
                            var meta = chart.getDatasetMeta(0);
                            var ds = data.datasets[0];
                            var arc = meta.data[i];
                            var value = ds.data[i];
                            var bgColor = arc._model.backgroundColor;
                            return {
                                text: label + ": " + value, // Add value to label
                                fillStyle: bgColor,
                                strokeStyle: bgColor,
                                lineWidth: 2,
                                hidden: isNaN(ds.data[i]), // Hide label if value is NaN
                                index: i
                            };
                        });
                    } else {
                        return [];
                    }
                }
            }
        },
        responsive: false
    }
});

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

باستخدام هذا التعديل، يجب أن تظهر القيم المتعلقة بكل قطاع في الأسطورة بجانب اسم القطاع. يمكنك تخصيص التنسيق وفقًا لاحتياجاتك، مثل تغيير لون النص أو حجم الخط، وذلك باستخدام الخيارات المتاحة في الـ “legend” و “labels” في الكود.

بالطبع، دعنا نستكمل المقال لإضافة بعض الشروحات والتوضيحات حول كيفية تخصيص وتفسير الكود المُعدَّل لعرض القيم في الأسطورة بجانب كل قطاع في الرسم البياني.

التعديل الذي قمت به يعتمد على استخدام دالة generateLabels لتوليد التسميات بشكل مخصص. لفهم كيف يعمل هذا التعديل، دعنا نقوم بتحليل الكود خطوة بخطوة:

1. تعريف دالة generateLabels: يتم تعريف دالة generateLabels داخل خيارات الأسطورة (legend) في كائن الخيارات (options) للرسم البياني. هذه الدالة تقوم بإنشاء التسميات (labels) لكل عنصر في الأسطورة.

2. استخدام البيانات من الرسم البياني: تقوم الدالة بالوصول إلى بيانات الرسم البياني (chart data) وتحليلها لإنشاء التسميات المناسبة. يتم الحصول على معلومات القطاعات (slices) من مجموعة البيانات الأولى في الرسم البياني.

3. إنشاء التسميات: يتم إنشاء التسميات باستخدام بيانات الرسم البياني. لكل قطاع، يتم استخدام اسمه (label) مع قيمته المقابلة لإنشاء تسمية. تمت إضافة القيمة إلى النص لكل تسمية باستخدام الجملة label + ": " + value.

4. تخصيص العرض: يمكنك تخصيص عرض التسميات كما تشاء، مثل تغيير لون النص أو حجم الخط، من خلال تعديل الخيارات المتاحة في labels في خيارات الأسطورة.

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