ישנן מספר לא מבוטל של ספריות JavaScript לשרטוט תרשימים שונים, החל מגרף עמודות ועד תרשימי קווים ועוד. אם אתה לומד כיצד להציג נתונים באופן דינמי באתר האינטרנט שלך עם JavaScript, Chart.js היא ספרייה כזו שכדאי לך לנסות.

איך אתה יכול להתחיל ליצור הדמיות נתונים עם Chart.js? תוכל ללמוד כיצד במאמר זה.

בואו נתחיל.

מה זה Chart.js?

Chart.js היא ספריית JavaScript להדמיה של נתונים בקוד פתוח המשמשת ליצירת תרשימים הניתנים לעיבוד HTML. כרגע הוא תומך בשמונה סוגי תרשימים אינטראקטיביים שונים שתוכלו גם להנפיש. כדי ליצור גרף מבוסס HTML עם chart.js, אתה צריך בד קנבס HTML כדי להחזיק אותו.

הספרייה מקבלת קבוצה של מערכי נתונים ופרמטרים אחרים של התאמה אישית כגון צבע הרקע, צבע הגבול ועוד. אחד מערכי הנתונים הוא ה תווית, המייצג את הערכים על ציר ה-X. השני הוא קבוצה של ערכים מספריים, שבדרך כלל נמצאים על ציר ה-Y.

אתה גם צריך לציין את סוג הגרף בתוך אובייקט התרשים כדי שהספרייה תדע איזה גרף לשרטט.

כיצד ליצור תרשימים עם Chart.js

כפי שהזכרנו קודם, אתה יכול ליצור סוגים שונים של תרשימים עם chart.js. עבור מדריך זה, תתחיל עם גרפי קווים ועמודות. ברגע שתביני את הרעיון שמאחורי אלה, יהיו לך את כל הכלים והביטחון שאתה צריך כדי לשרטט את התרשימים הזמינים האחרים.

instagram viewer

קָשׁוּר:כיצד להפוך את האתר שלך לרספונסיבי ואינטראקטיבי עם CSS ו-JavaScript

כדי להתחיל להשתמש chart.js, צור את הקבצים הדרושים. עבור הדרכה זו, שמות הקבצים הם chart.html, plot.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{
 color:#e9f0e9;
 שוליים-שמאליים: 43%;
}
#מזימות{
 שוליים: אוטומטי;
 צבע רקע: #2e2d2d;
}

עיצוב ה-CSS שלמעלה אינו מוסכמה קבועה. אז אתה יכול לעצב את שלך כמו שאתה רוצה בהתאם למבנה ה-DOM שלך. לאחר שקובצי ה-HTML וה-CSS שלך מוכנים, הגיע הזמן לשרטט את התרשימים שלך עם JavaScript.

תרשים הקווים

לעשות תרשים קווים עם chart.js, תגדיר את התרשים סוּג ל קַו. זה אומר לספרייה לצייר תרשים קו.

כדי להדגים זאת, בקובץ ה-JavaScript שלך:

// קבל את בד ה-HTML לפי המזהה שלו
plots = document.getElementById("plots");
// מערכי נתונים לדוגמה עבור צירי X ו-Y
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; //נשאר על ציר ה-X
var traffic = [65, 59, 80, 81, 56, 55, 60] //נשאר על ציר ה-Y
// צור מופע של אובייקט תרשים:
תרשים חדש (עלילות, {
 סוג: 'קו', //הכרז על סוג התרשים
 נתונים: {
 תוויות: חודשים, //נתוני ציר X
 מערכי נתונים: [{
 תעבורת נתונים, //נתוני ציר Y
 צבע רקע: '#5e440f',
 borderColor: 'לבן',
 מילוי: שקר, //ממלא את העקומה מתחת לקו עם צבע babckground. זה נכון כברירת מחדל
 }]
 },
});

תְפוּקָה:

אתה מוזמן לשנות את למלא ערך ל נָכוֹן, השתמש בעוד נתונים, או החלש את הצבעים כדי לראות מה קורה.

כפי שאתה יכול גם לראות, יש תיבת אגדה קטנה בראש הטבלה. אתה יכול להסיר את זה בתוך אופציונלי אפשרויות פָּרָמֶטֶר.

ה אפשרויות פרמטר עוזר גם בהתאמות אישיות אחרות מלבד הסרה או הכללה של האגדה. לדוגמה, אתה יכול להשתמש בו כדי לאלץ ציר להתחיל באפס.

להכריז על א אפשרויות פרמטר, כך נראה קטע התרשים בקובץ ה-JavaScript שלך:

// צור מופע של אובייקט תרשים:
תרשים חדש (עלילות, {
 סוג: 'קו', //הכרז על סוג התרשים
 נתונים: {
 תוויות: חודשים, //נתוני ציר X
 מערכי נתונים: [{
 תעבורת נתונים, //נתוני ציר Y
 צבע רקע: '#5e440f', //צבע הנקודות
 borderColor: 'לבן', //צבע קו
 מילוי: שקר, //ממלא את העקומה מתחת לקו עם צבע babckground. זה נכון כברירת מחדל
 }]
 },
 //ציין אפשרויות מותאמות אישית:
 אפשרויות:{
 מקרא: {display: false}, //הסר את תיבת האגדה על ידי הגדרתה ל-false. זה נכון כברירת מחדל.
//ציין הגדרות עבור המאזניים. כדי לגרום לציר ה-Y להתחיל מאפס, למשל:
 מאזניים:{
 yAxes: [{טיקים: {דקה: 0}}] //תוכל לחזור על אותו הדבר עבור ציר X אם הוא מכיל מספרים שלמים.
 }
 } 
});

תְפוּקָה:

ניתן גם להשתמש בצבעי רקע שונים עבור כל נקודה. עם זאת, שינוי צבעי הרקע בדרך זו בדרך כלל מועיל יותר עם גרפי עמודות.

יצירת גרפי עמודות עם Chart.js

כאן, אתה רק צריך לשנות את התרשים סוּג ל בָּר. אתה לא צריך להגדיר את למלא אפשרות מכיוון שהפסים יורשים את צבע הרקע באופן אוטומטי:

// צור מופע של אובייקט תרשים:
תרשים חדש (עלילות, {
 סוג: 'בר', //הכרז על סוג התרשים
 נתונים: {
 תוויות: חודשים, //נתוני ציר X
 מערכי נתונים: [{
 תעבורת נתונים, //נתוני ציר Y
 צבע רקע: '#3bf70c', //צבע הסורגים
 }]
 },
 אפשרויות:{
 מקרא: {display: false}, //הסר את תיבת האגדה על ידי הגדרתה ל-false. זה נכון כברירת מחדל.
 }
});

תְפוּקָה:

אל תהסס להכריח את ציר ה-Y להתחיל מאפס או מכל ערך כפי שעשית עבור תרשים הקו.

קָשׁוּר:שיטות מערך JavaScript שכדאי לשלוט בהן

כדי להשתמש בצבעים שונים עבור כל סרגל, העבר מערך של צבעים התואמים למספר הפריטים בנתונים שלך לתוך צבע רקע פָּרָמֶטֶר:

// צור מופע של אובייקט תרשים:
תרשים חדש (עלילות, {
 סוג: 'בר', //הכרז על סוג התרשים
 נתונים: {
 תוויות: חודשים, //נתוני ציר X
 מערכי נתונים: [{
 תעבורת נתונים, //נתוני ציר Y
//צבע של כל פס:
 צבע רקע: [
 "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}, //הסר את תיבת האגדה על ידי הגדרתה ל-false. זה נכון כברירת מחדל.
 }
});

תְפוּקָה:

יצירת תרשים עוגה עם Chart.js

כדי לצייר תרשים עוגה, שנה את סוג התרשים ל פַּאִי. ייתכן שתרצה גם להגדיר את התצוגה של האגדה ל נָכוֹן כדי לראות מה מייצג כל חלק של העוגה:

// צור מופע של אובייקט תרשים:
תרשים חדש (עלילות, {
 type: 'pie', //הכרז על סוג התרשים
 נתונים: {
 תוויות: חודשים, //מגדיר כל פלח
 מערכי נתונים: [{
 נתונים: תנועה, //קובע את גודל הפלח
 //צבע של כל קטע
 צבע רקע: [
 "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)"],
 }]
 },
 אפשרויות:{
 legend: {display: true}, //זה נכון כברירת מחדל.
}
});

תְפוּקָה:

כפי שעשית בדוגמאות למעלה, תוכל לנסות תרשימים אחרים על ידי שינוי ה- סוּג.

עם זאת, הנה רשימה של נתמכים chart.js סוגי תרשימים שאתה יכול לנסות באמצעות מוסכמות הקידוד לעיל:

  • בָּר
  • קַו
  • לְפַזֵר
  • סופגניה
  • פַּאִי
  • מכ"ם
  • polarArea
  • בּוּעָה

שחק עם Chart.js

למרות שהסתפקת רק בגרפי קווים, עוגה ועמודות במדריך זה, תבנית הקוד לשרטוט תרשימים אחרים עם chart.js עוקב אחר אותה מוסכמה. אז אל תהסס לשחק גם עם האחרים.

עם זאת, אם אתה רוצה יותר ממה שמציע chart.js, אולי תרצה להסתכל גם על מספר ספריות תרשימים אחרות של JavaScript.

6 מסגרות JavaScript שכדאי ללמוד

ישנן מסגרות JavaScript רבות בחוץ כדי לעזור בפיתוח. הנה כמה שכדאי להכיר.

קרא הבא

לַחֲלוֹקצִיוּץאימייל
נושאים קשורים
  • תִכנוּת
  • JavaScript
  • ניתוח נתונים
  • תִכנוּת
  • HTML
על הסופר
Idowu Omisola (126 מאמרים שפורסמו)

Idowu נלהב מכל דבר טכנולוגי ופרודוקטיביות חכמה. בזמנו הפנוי הוא משתעשע בקידוד ועובר ללוח השחמט כשהוא משועמם, אבל הוא גם אוהב להתנתק מהשגרה מדי פעם. התשוקה שלו להראות לאנשים את הדרך סביב הטכנולוגיה המודרנית מניעה אותו לכתוב יותר.

עוד מאת Idowu Omisola

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחץ כאן כדי להירשם