إنشاء مخططات بيانات مدعومة بلغة JavaScript باستخدام Billboard.js

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

لكن هناك رؤية أخرى مفاجئة يمكنك بناءها من نقطة الصفر وهي مخطط ويب.

هذا يمكن أن تساعدك رسم بياني البيانات بصريا بحيث يمكن للزائرين بسرعة مقشود المعلومات ذات الصلة. وبدلاً من ترميز الرسم البياني بنفسك ، يمكنك استخدام مكتبة مثل Billboard.js للقيام بكل الأحمال الثقيلة.

تم بناء هذا بالفعل على قمة D3 وهي مكتبة لتصور بيانات JavaScript. إنها الأكثر شعبية بسهولة مما يجعلها الأكثر أمانًا في التبعية.

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

لاحظ فقط أن قاعدة الشفرة بأكملها تستخدم بناء جملة ES6 والذي يمكن أن يكون مربكًا لـ devs JS الأقل خبرة.

طالما انك معرفة كيفية تجميع التعليمات البرمجية يجب أن تكون بخير. لقد قمنا في الواقع بتغطية بعض الميزات الساخنة من ES6 إذا كنت تريد معرفة المزيد.

قد تبدو جميع التفاصيل الفنية حول هذا البرنامج المساعد لطيفة. ولكن ربما تريد فقط أن تعرف ما هذا يمكن القيام به.

إلقاء نظرة على الصفحة التجريبية وانقر من خلال بعض الأمثلة الحية.

ستجد كل شيء بدءًا من الرسوم البيانية الدائرية إلى المخططات المبعثرة والرسوم البيانية لأشرطة الرسوم المتحركة المخصصة.

مع Billboard.js لديك السيطرة الكاملة على البيانات الخاصة بك. يمكنك التحكم في كيفية ظهورها على الصفحة ، وكيفية هيكلتها ، ونوع ميزات واجهة المستخدم / UX التي تضيفها (إن وجدت).

إنها مكتبة رسوم بيانية رائعة بالفعل ، وهي واحدة من أسهل المكتبات. إلقاء نظرة على الريبو جيثب المشروع لمعرفة المزيد.

يمكنك أيضًا البحث في هذا المقتطف على CodePen إذا كنت تريد اللعب باستخدام الكود في متصفحك.