كيفية إنشاء رسومات بيانية باستخدام HTML و JavaScript

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 18 سبتمبر 2024

محتوى المقال

ما هي Chart.js؟
الخطوة الأولى: إعداد بيئة العمل
الخطوة الثانية: إنشاء عنصر الرسم البياني في HTML
الخطوة الثالثة: إنشاء الرسم البياني باستخدام JavaScript
فهم مكونات الرسم البياني
الخطوة الرابعة: تخصيص الرسومات البيانية
الخطوة الخامسة: إنشاء أنواع أخرى من الرسومات البيانية
الخلاصة

كيفية إنشاء رسومات بيانية باستخدام HTML و JavaScript

الرسومات البيانية هي وسيلة فعالة لتصور البيانات بطريقة سهلة الفهم. باستخدام HTML و JavaScript، يمكنك إنشاء رسومات بيانية تفاعلية وسهلة الاستخدام لتوضيح المعلومات. في هذا المقال، سنستعرض كيفية استخدام مكتبة JavaScript الشهيرة Chart.js لإنشاء مخططات بيانية متقدمة. سنتعلم كيفية إعداد البيئة، بناء رسومات بيانية، وتخصيصها وفقًا لاحتياجاتك.

ما هي Chart.js؟

Chart.js هي مكتبة JavaScript مفتوحة المصدر تتيح للمطورين إنشاء رسومات بيانية جميلة وتفاعلية بسهولة. تدعم المكتبة عدة أنواع من المخططات مثل المخططات الخطية، الدائرية، الشريطية، وغيرها. الميزة الرئيسية لـ Chart.js هي بساطتها وسهولة استخدامها.

الخطوة الأولى: إعداد بيئة العمل

للبدء في استخدام Chart.js، تحتاج إلى تضمين مكتبة Chart.js في مشروعك. يمكنك إما تحميل المكتبة أو استخدام CDN (شبكة توصيل المحتوى).

إضافة Chart.js باستخدام CDN

أسهل طريقة لاستخدام Chart.js هي عبر تضمين المكتبة مباشرة باستخدام CDN. أضف الكود التالي داخل وسم <head> في ملف HTML الخاص بك:


            <head>

                <!-إضافة مكتبة Chart.js من CDN -->

                <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

            </head>

الآن تم تضمين مكتبة Chart.js في مشروعك، وأنت جاهز لإنشاء أول رسم بياني.

الخطوة الثانية: إنشاء عنصر الرسم البياني في HTML

لإنشاء رسم بياني باستخدام Chart.js، يجب أن يكون لديك عنصر <canvas> في HTML. هذا العنصر هو المكان الذي سيتم فيه رسم المخطط.

أضف عنصر <canvas> إلى ملف HTML الخاص بك:


            <body>

                <!-عنصر Canvas لعرض الرسم البياني -->

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

            </body>

الآن لدينا عنصر <canvas> الذي سنستخدمه لعرض الرسم البياني.

الخطوة الثالثة: إنشاء الرسم البياني باستخدام JavaScript

الخطوة التالية هي كتابة JavaScript لإنشاء الرسم البياني. سنقوم بإنشاء مخطط بياني بسيط يعرض بعض البيانات.

أضف الكود التالي أسفل عنصر <canvas>، أو في ملف JavaScript منفصل:


            <script>

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

                const myChart = new Chart(ctx, {

                    type: 'bar',  

                    data: {

                        labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],

                        datasets: [{

                            label: 'المبيعات (بالآلاف)',

                            data: [12, 19, 3, 5, 2, 3],

                            backgroundColor: 'rgba(75, 192, 192, 0.2)',

                            borderColor: 'rgba(75, 192, 192, 1)',

                            borderWidth: 1

                        }]

                    },

                    options: {

                        scales: {

                            y: {

                                beginAtZero: true

                            }

                        }

                    }

                });

            </script>

هذا الكود ينشئ مخططًا شريطيًا (bar chart) باستخدام مكتبة Chart.js. البيانات التي يتم عرضها تمثل مبيعات (افتراضية) للشهور من يناير إلى يونيو. المخطط يظهر بألوان مخصصة مع حدود لكل شريط.

فهم مكونات الرسم البياني

لفهم كيفية عمل الرسم البياني في Chart.js، دعونا نستعرض بعض المكونات الأساسية:

type: نوع المخطط (في هذا المثال، نستخدم "bar" للمخطط الشريطي).
labels: تسميات المحور الأفقي (x-axis)، وهي عبارة عن الشهور التي تظهر أسفل كل شريط.
datasets: البيانات التي سيتم عرضها، وتشمل القيم الخاصة بكل شريط، بالإضافة إلى خصائص التصميم مثل الألوان وسمك الحدود.
options: الإعدادات الإضافية للتحكم بالمخطط مثل محاور الرسم وإعدادات التفاعل.

الخطوة الرابعة: تخصيص الرسومات البيانية

يمكنك تخصيص الرسم البياني بشكل كبير باستخدام Chart.js. إليك بعض الطرق التي يمكنك من خلالها تخصيص المخطط:

1. تغيير نوع المخطط

Chart.js تدعم العديد من أنواع المخططات، مثل المخطط الخطي (line)، الدائري (pie)، والفقاعي (bubble). لتغيير نوع المخطط، يمكنك ببساطة تغيير قيمة type:


            type: 'line',

تجربة تغيير نوع المخطط إلى line سيعرض البيانات في شكل خطي بدلاً من الأعمدة.

2. تخصيص الألوان

يمكنك تخصيص الألوان باستخدام خصائص backgroundColor وborderColor. يمكنك حتى تعيين ألوان مختلفة لكل عنصر في المخطط.


            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)'

            ]

هذا الكود يحدد لونًا مختلفًا لكل شريط في الرسم البياني الشريطي.

3. تخصيص المحاور

يمكنك تخصيص إعدادات المحاور (axes) لتتناسب مع البيانات التي تعرضها. على سبيل المثال، يمكنك تعيين مقياس المحور y للبدء من الصفر:


            options: {

                scales: {

                    y: {

                        beginAtZero: true

                    }

                }

            }

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

الخطوة الخامسة: إنشاء أنواع أخرى من الرسومات البيانية

بفضل مرونة Chart.js، يمكنك إنشاء مجموعة متنوعة من المخططات. فيما يلي بعض الأنواع الأكثر شيوعًا:

1. المخطط الدائري (Pie Chart)

لإنشاء مخطط دائري، يمكنك تغيير نوع المخطط إلى pie وتوفير بيانات تتناسب مع هذا النوع من المخططات:


            type: 'pie', 

            data: {

                labels: ['التفاح', 'الموز', 'العنب'],

                datasets: [{

                    data: [10, 20, 30],

                    backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe']

                }]

هذا الكود ينشئ مخططًا دائريًا يوضح توزيع القيم بين "التفاح"، "الموز"، و"العنب".

2. المخطط الخطي (Line Chart)

المخططات الخطية مفيدة لعرض البيانات الزمنية أو تسلسل الأحداث. لتغيير المخطط إلى خطي، قم بتعديل type إلى line:


            type: 'line', 

            data: {

                labels: ['يناير', 'فبراير', 'مارس', 'أبريل'],

                datasets: [{

                    label: 'الإيرادات',

                    data: [30, 40, 45, 50],

                    backgroundColor: 'rgba(75, 192, 192, 0.2)',

                    borderColor: 'rgba(75, 192, 192, 1)',

                    borderWidth: 2

                }]

المخطط الخطي يعرض الإيرادات عبر عدة أشهر ويظهر كسلسلة خطية.

الخلاصة

في هذا المقال، استعرضنا كيفية استخدام مكتبة Chart.js لإنشاء رسومات بيانية باستخدام HTML و JavaScript. تعلمنا كيفية إعداد البيئة، إنشاء المخططات الشريطية، تخصيصها، وتجربة أنواع أخرى من المخططات مثل المخططات الدائرية والخطية. يمكن لـ Chart.js مساعدتك في عرض بياناتك بطريقة تفاعلية وجذابة لمستخدمي موقعك.