תרשים רבעים
תרשים רביעים הוא תרשים חזותי המחלק נתונים לארבעה רביעים. הוא משמש לשרטוט נקודות נתונים על רשת דו-ממדית, כאשר משתנה אחד מיוצג על ציר ה-x ומשתנה אחר על ציר ה-y. חלוקת הרביעים נקבעת על פי קבוצת קריטריונים הספציפית לנתונים המנותחים, המחלקת את התרשים לארבעה חלקים שווים. תרשים רביעים משמש בדרך כלל לזיהוי דפוסים ומגמות בנתונים, ולקביעת עדיפות הפעולות בהתאם למיקום נקודות הנתונים בתרשים. הוא משמש בדרך כלל בתרחישים כגון עסקים, שיווק וניהול סיכונים.
דוגמה
העתק
הטמעה
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
תחביר
אם אין בתרשים נקודות נתונים זמינות, טקסט הצירים ושמות הרביעים ירונדרו במרכז הרביעים המתאימים. אם קיימות נקודות נתונים, תוויות ציר ה-x ירונדרו מצד שמאל של הרביע המתאים, וטקסט הרביע יוצג בתחתית התרשים. תוויות ציר ה-y ירונדרו בתחתית הרביע המתאים, וטקסט הרביע ירונדר בראש הרביע המתאים.
עבור ערכי הקואורדינטות של נקודות הנתונים, הערך המינימלי הוא 0 והמקסימלי הוא 1.
כותרת
כותרת היא תיאור קצר של התרשים, והיא תרונדר תמיד בראש התרשים.
דוגמה
העתק
הטמעה
quadrantChart
title This is a sample example
x-axis
ציר ה-x קובע את הטקסט המוצג על ציר ה-x. ציר ה-x מחולק לשני חלקים, 'שמאל' ו'ימין', וניתן להזין את שניהם או רק את 'שמאל'. ההצהרה צריכה להתחיל ב-x-axis, ואחריו left axis text, לאחריו המפריד -->, ולבסוף right axis text.
דוגמה
1. x-axis --> גם טקסט הציר השמאלי וגם הימני ירונדרו.
2. x-axis מרנדר רק את טקסט הציר השמאלי.
y-axis
ציר ה-y קובע את הטקסט המוצג על ציר ה-y. ציר ה-y מחולק לשני חלקים, 'עליון' ו'תחתון', וניתן להזין את שניהם או רק את 'תחתון'. ההצהרה צריכה להתחיל ב-y-axis, ואחריו bottom axis text, לאחריו המפריד -->, ולבסוף top axis text.
דוגמה
1. y-axis --> גם טקסט הציר התחתון וגם העליון ירונדרו.
2. y-axis מרנדר רק את טקסט הציר התחתון.
טקסט הרביע
quadrant-[1,2,3,4] קובע את תוכן הטקסט המוצג בכל רביע.
דוגמה
1. quadrant-1 קובע את הטקסט שיוצג ברביע הימני-עליון
2. quadrant-2 קובע את הטקסט שיוצג ברביע השמאלי-עליון.
3. quadrant-3 קובע את הטקסט שיוצג ברביע השמאלי-תחתון.
4. quadrant-4 קובע את הטקסט שיוצג ברביע הימני-תחתון.
נקודה עגולה
משמש לשרטוט עיגול בתוך תרשים הרביעים. התחביר הוא : [x, y], כאשר טווח הערכים של x ו-y הוא 0 - 1.
דוגמה
1. Point 1: [0.75, 0.80] , נקודה 1 תשורטט ברביע הימני-עליון.
2. Point 2: [0.35, 0.24] , נקודה 2 תשורטט ברביע השמאלי-תחתון.
תצורת תרשים
| פרמטר | תיאור | ערך ברירת מחדל |
|---|---|---|
| chartWidth | רוחב התרשים | 500 |
| chartHeight | גובה התרשים | 500 |
| titlePadding | הריפוד העליון והתחתון של הכותרת | 10 |
| titleFontSize | גודל גופן הכותרת | 20 |
| quadrantPadding | הריפוד מחוץ לכל הרביעים | 5 |
| quadrantTextTopPadding | השוליים העליונים של טקסט הרביע כאשר הטקסט משורטט בראש (לא מעל נקודת נתונים) | 5 |
| quadrantLabelFontSize | גודל גופן טקסט הרביע | 16 |
| quadrantInternalBorderStrokeWidth | רוחב המסגרת הפנימית של הרביע | 1 |
| quadrantExternalBorderStrokeWidth | רוחב קו המתאר של המסגרת החיצונית של הרביע | 2 |
| xAxisLabelPadding | הריפוד העליון והתחתון של טקסט ציר ה-x | 5 |
| xAxisLabelFontSize | גודל גופן טקסט ציר ה-x | 16 |
| xAxisPosition | מיקום ציר ה-x (עליון, תחתון). אם קיימות נקודות נתונים, ציר ה-x ירונדר תמיד בתחתית | top |
| yAxisLabelPadding | הריפוד השמאלי והימני של טקסט ציר ה-y | 5 |
| yAxisLabelFontSize | גודל גופן טקסט ציר ה-y | 16 |
| yAxisPosition | מיקום ציר ה-y (שמאל, ימין) | left |
| pointTextPadding | המרווח בין נקודת הנתונים לטקסט שמתחתיה | 5 |
| pointLabelFontSize | גודל גופן טקסט נקודת הנתונים | 12 |
| pointRadius | רדיוס נקודת הנתונים | 5 |
משתני ערכת נושא של התרשים
| פרמטר | תיאור |
|---|---|
| quadrant1Fill | צבע המילוי של הרביע הימני-עליון |
| quadrant2Fill | צבע המילוי של הרביע השמאלי-עליון |
| quadrant3Fill | צבע המילוי של הרביע השמאלי-תחתון |
| quadrant4Fill | צבע המילוי של הרביע הימני-תחתון |
| quadrant1TextFill | צבע הטקסט של הרביע הימני-עליון |
| quadrant2TextFill | צבע הטקסט של הרביע השמאלי-עליון |
| quadrant3TextFill | צבע הטקסט של הרביע השמאלי-תחתון |
| quadrant4TextFill | צבע הטקסט של הרביע הימני-תחתון |
| quadrantPointFill | צבע המילוי של נקודת הנתונים |
| quadrantPointTextFill | צבע הטקסט של נקודת הנתונים |
| quadrantXAxisTextFill | צבע הטקסט של ציר ה-x |
| quadrantYAxisTextFill | צבע הטקסט של ציר ה-y |
| quadrantInternalBorderStrokeFill | צבע המסגרת הפנימית של הרביע |
| quadrantExternalBorderStrokeFill | צבע המסגרת החיצונית של הרביע |
| quadrantTitleFill | צבע הכותרת |
דוגמת תצורה וערכת נושא
העתק
הטמעה
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete
סגנון נקודות נתונים
ניתן לעצב נקודות נתונים ישירות, או להשתמש במחלקות משותפות שהוגדרו
סגנון ישיר
העתק
הטמעה
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
סגנון מחלקה
העתק
הטמעה
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
סגנונות זמינים:
| פרמטר | תיאור |
|---|---|
| color | צבע המילוי של נקודת הנתונים |
| radius | רדיוס נקודת הנתונים |
| stroke-width | רוחב המסגרת של נקודת הנתונים |
| stroke-color | צבע המסגרת של נקודת הנתונים (לא תקף כאשר stroke-width לא צוין) |
סדר עדיפויות: 1. סגנון ישיר 2. סגנון מחלקה 3. סגנון ערכת נושא
דוגמת סגנון
העתק
הטמעה
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
