بناءً على الكود الذي قدمته، يبدو أنك تستخدم مكتبة Chart.js لعرض رسم بياني من نوع البيتزا (Pie Chart)، وترغب في إضافة أرقام القيم المتعلقة بكل قطاع في الرسم البياني إلى الوصف (التعليقات) الخاص بكل قطاع في العنوان (الأسطورة).
لتحقيق هذا الهدف، يمكنك استخدام خاصية الـ “tooltips” في مكتبة Chart.js التي تسمح لك بعرض معلومات إضافية عن البيانات عند تحويب المؤشر فوق القطاعات. يمكنك أيضًا استخدام دالة مخصصة لتنسيق المعلومات وإضافتها إلى العنوان.
-
تحديث إصدار Swift في Carthage05/03/2024
-
مشكلة ظهور الصور في شريط التبويب08/04/2024
-
تحديات تطوير ألعاب Android باستخدام Java31/01/2024
لنقم بتعديل الكود الخاص بك ليتم عرض القيم المتعلقة بكل قطاع في الأسطورة:
javascriptvar 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
لتوليد التسميات بشكل مخصص. لفهم كيف يعمل هذا التعديل، دعنا نقوم بتحليل الكود خطوة بخطوة:
-
تعريف دالة
generateLabels
: يتم تعريف دالةgenerateLabels
داخل خيارات الأسطورة (legend) في كائن الخيارات (options) للرسم البياني. هذه الدالة تقوم بإنشاء التسميات (labels) لكل عنصر في الأسطورة. -
استخدام البيانات من الرسم البياني: تقوم الدالة بالوصول إلى بيانات الرسم البياني (chart data) وتحليلها لإنشاء التسميات المناسبة. يتم الحصول على معلومات القطاعات (slices) من مجموعة البيانات الأولى في الرسم البياني.
-
إنشاء التسميات: يتم إنشاء التسميات باستخدام بيانات الرسم البياني. لكل قطاع، يتم استخدام اسمه (label) مع قيمته المقابلة لإنشاء تسمية. تمت إضافة القيمة إلى النص لكل تسمية باستخدام الجملة
label + ": " + value
. -
تخصيص العرض: يمكنك تخصيص عرض التسميات كما تشاء، مثل تغيير لون النص أو حجم الخط، من خلال تعديل الخيارات المتاحة في
labels
في خيارات الأسطورة.
باستخدام هذا التعديل، يجب أن يظهر الرسم البياني مع قيم كل قطاع في الأسطورة، مما يساعد على فهم البيانات بشكل أفضل من قبل المستخدمين. يمكنك أيضًا تغيير التنسيق وفقًا لاحتياجاتك الخاصة، مثل تغيير ترتيب العناصر في الأسطورة أو تعديل النصوص المعروضة لكل قطاع.