كيفية عرض الرسوم البيانية باستخدام Entity Field
هل استخدمت وحدة المخططات البيانية دروبال من قبل؟ إذا كانت الإجابة بنعم ، فيجب ملاحظة أنه يعتمد على عرض البيانات والإحصاءات المستردة من عرض طرق العرض ، وهو ما يعني جمع البيانات والحقول المشتركة من كيانات متعددة مع بعض الفلاتر ، أي عدد العقد التي يتم إنشاؤها شهريًا ، وعدد المستخدمين المسجلين يوميًا.
ومع ذلك ، في بعض الحالات ، قد تحتاج إلى إظهار إحصائيات حول الكيان نفسه (العقدة ، المستخدم ، الفقرة) ، في مثل هذه الحالة ستكون البيانات في العقدة على سبيل المثال نفسها ويجب أن يتم عرضها من العقدة إدارة العرض ، وهو غير مدعوم حاليًا بطريقة مباشرة بواسطة وحدة الرسوم البيانية .
في الواقع ، لقد استوفينا المتطلبات مؤخرًا لإظهار إحصائيات المنتج كحقل في عقدة باستخدام هذه الطريقة التي تمنح محرري الموقع القدرة على التحكم في البيانات ونوع الرسم البياني لعرضه دون أي خلفية تقنية أو تجربة بناء موقع.
وبالتالي ، كانت هناك حاجة لتطوير وحدة نمطية جديدة تسمى Charts Field Formator لتحقيق المتطلبات المذكورة أعلاه. في بقية هذا المنشور ، سنصف كيفية تثبيت الوحدة وتطبيق التكوين المطلوب لإظهار الرسم البياني بدون أي رمز مخصص.
1. قم بتثبيت منسق حقل المخططات وتبعياتها
قم بتثبيت وتمكين وحدة Charts Field Fomatter وتبعياتها. يعتمد ذلك بشكل أساسي على وحدتين:
- وحدة الرسوم البيانية وتحديدا الوحدة الفرعية Highcharts التي هي المسؤولة عن عرض الرسم البياني.
- وحدة TableField التي ستسهل تحرير بيانات الرسم البياني أو استيرادها كملف قيم مفصولة بفواصل (CSV).
2. إضافة حقل جديد
قم بإضافة حقل جديد من نوع حقل الجدول في الكيان الذي تريد عرض المخطط فيه

3. اختر "مخططات" في تنسيق الحقل
انتقل إلى وضع عرض الكيان (أي / admin / هيكل / أنواع / إدارة / صفحة / عرض لنوع محتوى الصفحة الأساسي) واختر المخططات كتنسيق حقل.

4. إضافة محتوى جديد
أضف محتوى جديدًا للكيان الذي يحتوي على حقل "حقل الجدول" لإضافة بياناته يدويًا أو عن طريق استيراده كملف CSV. يمكن العثور على نموذج ملف CSV هنا .

5. تكوين الإعدادات الافتراضية لوحدة الرسوم البيانية
انتقل إلى / admin / config / content / المخططات من أجل تغيير التكوين الافتراضي للمخططات مثل نوع المخطط (مثل العمود والخط والدائري وغير ذلك) واللون.

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

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

ملحوظة:
تم اختبار وحدة تنسيق حقل المخططات باستخدام الوحدة الفرعية والمكتبة الفرعية Highcharts ، لذلك تأكد من تثبيت مكتبة Highcharts إلى مكتبات دروبال كما هو موضح هنا . ومع ذلك ، يجب أن تعمل مع أنواع الرسوم البيانية الأخرى مثل مخططات Google .