كيف يمكنني اضافة رسوم بيانية Charts الى موقعي ؟ تعرف على Charts.js

كيف يمكنني اضافة رسوم بيانية Charts الى موقعي ؟ تعرف على Charts.js

تعتبر مكتبة Charts.js من المكتبات الرائدة في انشاء الرسوم البيانية او ما يعرف بال Charts لمواقع الويب , تقدم ال Charts تجربة فريدة للمستخدم لفهم البيانات بصورة سهلة و سريعة , ونجد الحاجة الكبرى لهذه الأدوات في لوحة تحكم الموقع بالشكل الأكبر , او في المواقع التي تقدم بيانات احصائية و على عكس المعروف انشاء رسوم بيانية Chart ليس بالصعوبة المتوقعة اذا كان لديك معرفة بسيطة بجافاسكريبت , و في هذا المقال سنقدم لك الأداة السحرية التي تساعدك على تطويع لغة جافاسكريبت و الاستفادة منها بشكل ملموس وقوي , لنبدأ حديثنا عن Charts.js

ما هي مكتبة Charts.js ؟

هي مجموعة من الأكواد الجاهزة المكتوبة بلغة جافاسكريبت , مهمتها الأساسية تحويل البيانات الى رسوم بيانية Charts مفهومة و تقوم بذلك عبر استخدام ميزات HTML 5 الحديثة و تطبيق البيانات عليها لاظهار رسوم بيانية , مكتبة Charts.js مفتوحة المصدر ومتاحة للاستخدام العام , أي يمكنك استخدامها كما تشاء دون القلق من أي تبعات قانونية و ستوفر عليك الكثير من العمل لمحاولة بناء ال Charts الخاصة بك بدونها , أضف الى ذلك أنها تعتبر Industry Standard , ولن تواجه صعوبة في العمل مع فريقك او أي مبرمج يأتي لاحقاً للعمل على مشروعك , لأنها ببساطة أشهر مكتبات جافاسكريبت في العمل على الرسوم البيانية Charts

ما هي أنواع ال Charts المدعومة في Charts.js ؟

تدعم مكتبة Charts.js جميع أنواع الرسوم البيانية Charts المستخدمة بكثرة - كما سنشاهد في الأمثلة بعد قليل - و الجميل في الأمر أنك لن تحتاج الى تعلم كود مخصص لكل نوع , فجميع الأنواع تعمل بنفس الكود تماماً :)

هل من متطلبات خاصة لاستخدام Charts.js ؟

تقريباً , تتطلب هذه المكتبة بعض المهارات البسيطة للتعامل معها بالاضافة الى متطلبات تقنية محددة لكي تظهر ال Charts بدون مشاكل , وسنقوم بتقسيم المتطلبات الى قسمين هنا وهما : 

متطلبات شخصية للمبرمج

ليس الكثير حقاً , مجرد خبرة بسيطة الى متوسطة في لغة جافاسكريبت , عليك أن تكون متقن لأنواع البيانات و تستطيع التعامل مع الكائنات Objects بشكل بسيط , ليس أكثر من ذلك

متطلبات تقنية للمتصفح

من المهم أن يدعم المتصفح الاصدار الخامس من HTML لأنه و في النهاية , ستظهر ال Chart الخاصة بك ضمن وسم canvas , ومعظم المتصفحات الحديثة تدعم هذا الاصدار , يمكنك التأكد من الدعم المتوافر عبر هذه الصفحة : https://caniuse.com/#search=canvas

مقال مرتبط : كل ما تحتاج معرفته عن التاريخ و الوقت في Javascript

اضافة Charts.js الى المشروع

لنبدأ العمل الحقيقي الآن , بعد أن اخذنا مقدمة بسيطة عن Charts.js وتعرفنا على طبيعتها , سنبدأ الآن في كتابة بعض الأكواد التي تمكننا من رؤية نتائج حقيقية , وسنبدأ أولاً بتنصيب Charts.js على مشروعنا 

عبر CDN

يمكنك اضافة مكتبة Charts.js عبر CDN الى صفحتك , توفر مواقع عدة رابط لاضافة Charts.js منها jsDelivr و CDNJS , سنستخدم الرابط المتوفر في ال Documentation الخاصة ب Charts.js , ابدأ بكتابة الكود التالي قبل اغلاق وسم body

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

عبر npm او bower

npm install chart.js --save
#or
bower install chart.js --save

ان كنت قد نصبت Charts.js عبر npm أو bower فغالباً أنت تعلم تماماً ما تفعله , لكن كتذكير بسيط لا تنسى ان تقوم باضافتها فعلياً الى المشروع عبر عمل import للمكتية في ملف جافاسكريبت الذي تعمل عليه .

الآن و قد قمنا بتنصيب المكتبة , سنبدأ ببعض الأمثلة البسيطة عليها .

استخدام Charts.js في مشروعك

تأتي Charts.js بكود أساسي يمكنك نسخه أو حفظه واضافته الى المشروع , غالباً ما نقوم بتعديل هذا الكود فهو دائماً ما يكون نقطة البداية , ولكي نستطيع البدء برؤية نتائج حقيقة سنقوم الآن بكتابة الكود التالي ضمن وسم body

<canvas id="myChart" width="400" height="400"></canvas>

في هذا المكان بالتحديد ستظهر ال Chart الخاصة بنا بعد أن نقوم بكتابة كود الجافاسكريبت , هنا يمكنك التلاعب بالحجم و التصميم كما تحتاج , لكن تأكد من أن يكون ال id غير متكرر في الصفحة تجنباً لأي أخطاء , أما بالنسبة لكود جافاسكريبت فهو كالتالي : 

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

من المهم أن تتأكد من نقطتين , الأولى أن يكون ال id المستخدم في الكود السابق مطابق لل id الموجود في عنصر canvas , وثانياً أن يكون الكود السابق في أي مكان في الصفحة بعد استدعاء مكتبة Charts.js , ومن المهم معرفته أنه يمكنك أن تضع جميع أكوادك في ملف جافاسكريبت منفصل واستدعائه أسفل مكتبة Charts.js

لنبدأ الآن في تفصيل الكود السابق قليلاً , سنحاول فهم الكود بدئاً من أول سطر و حتى النهاية : 

تحديد العنصر Selector

var ctx = document.getElementById('myChart').getContext('2d');

اذاً هنا في هذا السطر نقوم بانشاء متغير باسم ctx , يمكنك تسمية المتغير بالاسم الذي يناسبك طبعاً , ويقوم هذا المتغير بحفظ العنصر #myChart لاستخدامه لاحقاً 

تفعيل Charts.js على العنصر

var myChart = new Chart(ctx, {});

و هو ما يحصل هنا في هذا السطر , عند استدعاء مكتبة Charts.js تحصل على كائن Object باسم Chart و ما نقوم به فعلياً هنا هو فقط انشاء instance جديدة من هذا الكائن و حفظها في متغير باسم myChart ويمكنك تسمية هذا المتغير بما تشاء طبعاً , لكن النقطة الأهم في هذا السطر هي الأقواس المعقوفة التي تتبع المتغير ctx , و هي الخيارات الممكن اضافتها التي تقوم مجتمعة بانشاء الرسم البياني الذي نريده في النهاية :)

أنواع ال Charts المدعومة في  Charts.js 

المرحلة التالية هي اضافة خيارات ومعلومات الى مكتبة Charts.js لانشاء ال Chart بالصيغة التي نحتاجها , و تبدأ ب الخيار type , هذا الخيار يحدد نوع ال Chart التي ستظهر في النهاية و يمكنك هنا اختيار أحد الأنواع التالية : 

line : رسم بياني يتم تمثيله بخطوط تظهر البيانات على محوري x , y 

Create a Line Chart in Excel - Easy Excel Tutorial

bar : رسم يمثل البيانات بأعمدة 

What is a Bar Chart?

doughnut or pie : يشبه ال bar الى حد ما , ولكنه يمثل البيانات بشكل دائري 

A Complete Guide to Pie Charts | Tutorial by Chartio

تدعم Charts.js الكثير من الأنواع , واليك القائمة : line , bar , doughnut , pie , radar, polar , scatter , area

و حتى لا نخرج عن محتوى المقال سأترك لك مهمة تجربة باقي الأنواع , عليك فقط تغيير قيمة type الى النوع المناسب لك ! 

اضافة البيانات الى ال Chart في Charts.js 

يتم تعريف البيانات في Charts.js عبر اضافة كائن Object باسم data:{} , يحتوي على كل المعلومات الخاصة بهذه البيانات , ومن الممتع معرفته أن Charts.js تدعم عدة أنواع من البيانات في Chart واحدة ! كل ما عليك فعله هو تحويل الكائن dataset الموجود ضمن data الى صيغة مصفوفة array و تكرار القيمة فيه وتحديد النوع المطلوب .

ضمن الكائن data يمكنك أولاً اضافة Labels وهي عبارة عن مصفوفة تكتب فيها العناصر التي ستظهر في محور x 

labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']

جميع العناصر السابقة سيتم عرضها في محور x وهي بيانات ثابتة , يمكن أن تكون أيام الأسبوع أو اسم مورد خدمة ما , الأمر يعتمد عليك وعلى حاجتك , اما المحور y فهو الذي يتم اضافة البيانات فيه , والبيانات تضاف بنفس ترتيب ال labels السابقة ويجب أن تكون بنفس العدد , فلو كان لدينا 3 Labels فيجب أن يكون هناك 3 قيم لها لكي تظهر معها .

في الكود التالي تمثيل للبيانات وهو ما يظهر في محور y 

        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },

قم بحفظ ما كتبته واستعرضه في المتصفح , ستجد أمامك Chart بها كل البيانات التي أدخلتها سابقاً .

في الواقع , عند استخدامك لهذه المكتبة من المستبعد أن تقوم بكتابة البيانات يدوياً , فالحل الوحيد أمامك هنا هو استخدام بيانات من قاعدة البيانات بديك و ادخالها , يمكنك اعتبار هذا المقال هو المدخل الى بوابة كبيرة من الاحتمالات و النتائج الرائعة التي يمكنك عملها !

مزيد من المصادر و المعلومات عن Charts.js

لا يمكن فعلاً تلخيص Charts.js في مقال واحد , لكن يمكننا المساعدة عبر توفير مصادر لاكمال البحث و معرفة المزيد عن Charts.js , و اليك القائمة : 

التوثيق Documentaion الخاص ب Charts.js

من الموقع الرسمي للمكتبة , يمكنك من هناك تصفح جميع أنواع الخيارات التي يمكن اضافتها الى ال Chart الخاصة بك و كذلك الأمر الكثير من الأمثلة العملية التي تساعدك على فهم الأمور تماماً , الرابط : https://www.chartjs.org/docs/latest/

Geeting Started With Charts.js

سلسلة تعليمية على يوتيوب مقدمة من قناة CodeTime تشرح بشكل واضح الخطوات الأساسية لتعلم هذه المكتبة الرائعة مع الكثير من الأمثلة التوضيحية , رابط السلسلة : https://www.youtube.com/watch?v=2UVHI9UaONw&list=PLylMDDjFIp1B6IE1Dib_bucx7JJ_zsvZP

في النهاية ...

تعد مكتبة Charts.js من الاختيارات الرائعة التي أنتجتها لنا جافاسكريبت , وتبين لنا قوة هذه اللغة والإمكانيات المتاحة لنا عند تعلمها , لذلك لا تتوقف عند هذا المقال و أكمل رحلة التعلم , يمكنك ايجاد الكثير من الموارد لتعلم هذه المكتبة و من أهمها الموقع الرسمي للمكتبة : www.chartjs.org