يوجد عدد قليل جدًا من مكتبات JavaScript لرسم المخططات المختلفة ، بدءًا من الرسوم البيانية الشريطية إلى المخططات الخطية والمزيد. إذا كنت تتعلم كيفية عرض البيانات ديناميكيًا على موقع الويب الخاص بك باستخدام JavaScript ، فإن Chart.js هي إحدى المكتبات التي يجب أن تجربها.
كيف يمكنك البدء في إنشاء تصورات البيانات باستخدام Chart.js؟ ستتعلم كيف في هذا المقال.
هيا بنا نبدأ.
ما هو Chart.js؟
Chart.js عبارة عن مكتبة جافا سكريبت لتصور البيانات مفتوحة المصدر تُستخدم لرسم مخططات HTML قابلة للعرض. يدعم حاليًا ثمانية أنواع مختلفة من المخططات التفاعلية التي يمكنك أيضًا تحريكها. لإنشاء رسم بياني مستند إلى HTML باستخدام chart.js ، تحتاج إلى لوحة HTML لتثبيتها.
تقبل المكتبة مجموعة من مجموعات البيانات ومعلمات التخصيص الأخرى مثل لون الخلفية ولون الحدود والمزيد. إحدى مجموعات البيانات هي ملف ضع الكلمة المناسبة، والتي تمثل القيم على المحور السيني. الآخر عبارة عن مجموعة من القيم العددية ، والتي تقع عادةً على المحور ص.
تحتاج أيضًا إلى تحديد نوع الرسم البياني داخل كائن المخطط حتى تعرف المكتبة الرسم البياني الذي تريد رسمه.
كيفية إنشاء الرسوم البيانية باستخدام Chart.js
كما ذكرنا سابقًا ، يمكنك إنشاء أنواع مختلفة من المخططات باستخدام chart.js. في هذا البرنامج التعليمي ، ستبدأ بالرسوم البيانية الخطية والشريطية. بمجرد أن تفهم المفهوم الكامن وراء ذلك ، ستحصل على كل الأدوات والثقة التي تحتاجها لرسم المخططات الأخرى المتاحة.
متعلق ب:كيفية جعل موقع الويب الخاص بك مستجيبًا وتفاعليًا باستخدام CSS و JavaScript
لبدء استخدام chart.js، قم بإنشاء الملفات الضرورية. بالنسبة لهذا البرنامج التعليمي ، أسماء الملفات هي chart.html, مؤامرة. js، و index.css. يمكنك استخدام أي اصطلاح تسمية لملفاتك.
الآن ، الصق ما يلي في ملف رأس قسم من ملف HTML للربط بشبكة تسليم محتوى Chart.js (CDN).
في chart.html:
src = " https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
بعد ذلك ، قم بإنشاء لوحة HTML للاحتفاظ بالمخطط الخاص بك ومنحه ملف بطاقة تعريف. أيضًا ، قم بالاتصال بملف CSS (index.css) في ملف رأس وأشر إلى ملف JavaScript (plot.js) في ملف الجسم الجزء.
تبدو بنية ملف HTML كما يلي:
<br> مخطط <br>
الرسوم البيانية
وفيك CSS:
الجسم{
لون الخلفية: # 383735 ؛
}
h1 {
اللون: # e9f0e9 ؛
الهامش الأيسر: 43٪ ؛
}
# مؤامرات {
الهامش: تلقائي ؛
لون الخلفية: # 2e2d2d ؛
}
نمط CSS أعلاه ليس اصطلاحًا محددًا. لذا يمكنك تصميم ما تريد اعتمادًا على هيكل DOM الخاص بك. بمجرد أن تصبح ملفات HTML و CSS جاهزة ، فقد حان الوقت لرسم مخططاتك باستخدام JavaScript.
المخطط الخطي
لعمل مخطط خطي مع chart.js، ستقوم بتعيين المخطط نوع ل خط. هذا يخبر المكتبة برسم مخطط خطي.
لتوضيح ذلك ، في ملف JavaScript الخاص بك:
// احصل على لوحة HTML من خلال المعرف الخاص بها
المؤامرات = document.getElementById ("المؤامرات") ؛
// أمثلة على مجموعات البيانات لمحاور س وص
var months = ["يناير" ، "فبراير" ، "مارس" ، "أبريل" ، "مايو" ، "يونيو" ، "يوليو"] ؛ // يبقى على المحور السيني
var traffic = [65، 59، 80، 81، 56، 55، 60] // يبقى على المحور ص
// إنشاء مثيل لكائن المخطط:
مخطط جديد (المؤامرات ، {
اكتب: "خط" ، // قم بتعريف نوع الرسم البياني
البيانات: {
تسميات: أشهر ، // بيانات المحور السيني
مجموعات البيانات: [{
حركة البيانات، // بيانات المحور ص
لون الخلفية: "# 5e440f" ،
الحدوداللون: "أبيض" ،
ملء: خطأ ، // يملأ المنحنى الموجود أسفل الخط بلون خلفية باب الطفل. هذا صحيح بشكل افتراضي
}]
},
});
انتاج |:
لا تتردد في تغيير يملأ قيمة ل صحيح، استخدام المزيد من البيانات ، أو إضعاف الألوان لمعرفة ما سيحدث.
كما ترى ، يوجد مربع أسطورة صغير في أعلى الرسم البياني. يمكنك إزالة ذلك داخل اختياري والخيارات معامل.
ال والخيارات تساعد المعلمة أيضًا في التخصيصات الأخرى إلى جانب إزالة مفتاح الرسم أو تضمينه. على سبيل المثال ، يمكنك استخدامه لفرض بدء المحور من الصفر.
للإعلان عن والخيارات المعلمة ، إليك كيف يبدو قسم الرسم البياني في ملف JavaScript الخاص بك:
// إنشاء مثيل لكائن المخطط:
مخطط جديد (المؤامرات ، {
اكتب: "خط" ، // قم بتعريف نوع الرسم البياني
البيانات: {
تسميات: أشهر ، // بيانات المحور السيني
مجموعات البيانات: [{
حركة البيانات، // بيانات المحور ص
لون الخلفية: "# 5e440f" ، // لون النقاط
الحدوداللون: "أبيض" ، // لون الخط
ملء: خطأ ، // يملأ المنحنى الموجود أسفل الخط بلون خلفية باب الطفل. هذا صحيح بشكل افتراضي
}]
},
// تحديد الخيارات المخصصة:
والخيارات:{
أسطورة: {display: false}، // إزالة مربع وسيلة الإيضاح عن طريق تعيينه على "خطأ". هذا صحيح بشكل افتراضي.
// تحديد إعدادات المقاييس. لجعل المحور الصادي يبدأ من الصفر ، على سبيل المثال:
مقاييس:{
yAxes: [{العلامات: {min: 0}}] // يمكنك تكرار الأمر نفسه للمحور X إذا كان يحتوي على أعداد صحيحة.
}
}
});
انتاج |:
يمكنك أيضًا استخدام ألوان خلفية مختلفة لكل نقطة. عادة ما يكون تنوع ألوان الخلفية بهذه الطريقة أكثر فائدة مع الرسوم البيانية الشريطية.
عمل الرسوم البيانية الشريطية باستخدام Chart.js
هنا ، ما عليك سوى تغيير الرسم البياني نوع ل شريط. لا تحتاج إلى ضبط ملف يملأ الخيار لأن الأشرطة ترث لون الخلفية تلقائيًا:
// إنشاء مثيل لكائن المخطط:
مخطط جديد (المؤامرات ، {
اكتب: "بار" ، // قم بتعريف نوع الرسم البياني
البيانات: {
تسميات: أشهر ، // بيانات المحور السيني
مجموعات البيانات: [{
حركة البيانات، // بيانات المحور ص
لون الخلفية: "# 3bf70c" ، // لون القضبان
}]
},
والخيارات:{
أسطورة: {display: false}، // إزالة مربع وسيلة الإيضاح عن طريق تعيينه على "خطأ". هذا صحيح بشكل افتراضي.
}
});
انتاج |:
لا تتردد في إجبار المحور الصادي على البدء من الصفر أو أي قيمة كما فعلت مع المخطط الخطي.
متعلق ب:طرق مصفوفة جافا سكريبت يجب أن تتقنها
لاستخدام ألوان مختلفة لكل شريط ، قم بتمرير مصفوفة من الألوان التي تطابق عدد العناصر الموجودة في بياناتك إلى ملف لون الخلفية معامل:
// إنشاء مثيل لكائن المخطط:
مخطط جديد (المؤامرات ، {
اكتب: "بار" ، // قم بتعريف نوع الرسم البياني
البيانات: {
تسميات: أشهر ، // بيانات المحور السيني
مجموعات البيانات: [{
حركة البيانات، // بيانات المحور ص
// لون كل شريط:
لون الخلفية: [
"rgba (196 ، 190 ، 183)" ،
"rgba (21 ، 227 ، 235)" ،
"rgba (7 ، 150 ، 245)" ،
"rgba (240 ، 5 ، 252)" ،
"rgba (252 ، 5 ، 79)" ،
"rgb (0،12،255)" ،
"rgb (17 ، 252 ، 5)"] ،
}]
},
والخيارات:{
أسطورة: {display: false}، // إزالة مربع وسيلة الإيضاح عن طريق تعيينه على "خطأ". هذا صحيح بشكل افتراضي.
}
});
انتاج |:
عمل مخطط دائري باستخدام Chart.js
لرسم مخطط دائري ، قم بتغيير نوع المخطط إلى فطيرة. قد ترغب أيضًا في تعيين عرض وسيلة الإيضاح على صحيح لمعرفة ما يمثله كل جزء من الكعكة:
// إنشاء مثيل لكائن المخطط:
مخطط جديد (المؤامرات ، {
اكتب: 'pie' ، // قم بتعريف نوع المخطط
البيانات: {
labels: الشهور ، // يحدد كل جزء
مجموعات البيانات: [{
البيانات: حركة المرور ، // تحدد حجم المقطع
// لون كل جزء
لون الخلفية: [
"rgba (196 ، 190 ، 183)" ،
"rgba (21 ، 227 ، 235)" ،
"rgba (7 ، 150 ، 245)" ،
"rgba (240 ، 5 ، 252)" ،
"rgba (252 ، 5 ، 79)" ،
"rgb (0،12،255)" ،
"rgb (17 ، 252 ، 5)"] ،
}]
},
والخيارات:{
أسطورة: {display: true}، // This is true افتراضيًا.}
});
انتاج |:
كما فعلت في الأمثلة أعلاه ، يمكنك تجربة مخططات أخرى عن طريق تغيير نوع.
ومع ذلك ، إليك قائمة بالدعم chart.js أنواع المخططات التي يمكنك تجربتها باستخدام اصطلاحات الترميز المذكورة أعلاه:
- شريط
- خط
- مبعثر
- كعكة محلاة
- فطيرة
- رادار
- المنطقة القطبية
- فقاعة
العب مع Chart.js
على الرغم من أنك قمت فقط بالتعامل مع الرسوم البيانية الخطية والدائرية والشريطية في هذا البرنامج التعليمي ، إلا أن نمط الكود لرسم المخططات الأخرى باستخدام chart.js يتبع نفس الاصطلاح. لذلك لا تتردد في اللعب مع الآخرين أيضًا.
مع ذلك ، إذا كنت تريد أكثر مما تقدمه chart.js ، فقد ترغب في إلقاء نظرة على بعض مكتبات مخططات JavaScript الأخرى أيضًا.
هناك العديد من أطر عمل JavaScript للمساعدة في التطوير. إليك بعض ما يجب أن تعرفه.
اقرأ التالي
- برمجة
- جافا سكريبت
- تحليل البيانات
- برمجة
- لغة البرمجة
Idowu شغوف بأي شيء التكنولوجيا الذكية والإنتاجية. في أوقات فراغه ، يلعب بالبرمجة ويتحول إلى رقعة الشطرنج عندما يشعر بالملل ، لكنه أيضًا يحب الابتعاد عن الروتين من حين لآخر. يحفزه شغفه بإظهار طريقة حول التكنولوجيا الحديثة للناس على كتابة المزيد.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
