148- دروس جافا سكربت – JS Chart.js

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

### مقدمة عن Chart.js

Chart.js هي مكتبة مفتوحة المصدر تعتمد على HTML5 Canvas لإنشاء الرسوم البيانية. توفر هذه المكتبة أنواعًا متعددة من الرسوم البيانية مثل الرسوم البيانية الخطية، الشريطية، الدائرية، وغيرها.

### كيفية البدء مع Chart.js

#### تثبيت Chart.js

للبدء باستخدام Chart.js، يمكنك تنزيل المكتبة مباشرة من موقعها الرسمي أو تضمينها عبر شبكة CDN:

“`html

“`

#### إعداد الرسم البياني [شركة برمجة مصرية] الأساسي

لنبدأ بإنشاء مثال بسيط لرسم بياني خطي. أولاً، تحتاج إلى توفير عنصر “ في HTML حيث سيتم رسم الرسم البياني:

“`html

“`

بعد ذلك، يمكنك إعداد [شركة برمجة مصرية] الرسم البياني باستخدام JavaScript:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line', // نوع الرسم البياني
    data: {
        labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو'],
        datasets: [{
            label: 'المبيعات',
            data: [12, 19, 3, 5, 2, 3, 7],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
            fill: false
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

### أمثلة متعددة

#### الرسم البياني الشريطي

لإنشاء رسم بياني شريطي، يمكنك تغيير نوع الرسم البياني إلى `’bar’`:

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['يناير', 'فبراير', 'مارس', 'أبريل'],
        datasets: [{
            label: 'الأرباح',
            data: [200, 150, 300, 250],
            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)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

#### الرسم البياني الدائري

لإنشاء رسم بياني دائري، قم بتعيين النوع إلى `’pie’`:

var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['أحمر', 'أزرق', 'أصفر'],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)'
            ],
            hoverOffset: 4
        }]
    }
});

### تخصيص Chart.js

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

### الخاتمة

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