مخطط رباعي
مخطط الأرباع مخطط مرئي يقسّم البيانات إلى أربعة أرباع. ويُستخدم لرسم نقاط البيانات على شبكة ثنائية الأبعاد، حيث يمثّل أحد المتغيّرين المحور 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.
مثال
١. x-axis --> سيُصيَّر نصا المحور الأيسر والأيمن.
٢. x-axis يُصيَّر نص المحور الأيسر فقط.
y-axis
يحدّد المحور y النص المعروض على المحور y. وينقسم المحور y إلى جزأين "أعلى" و"أسفل"، ويمكنك إدخال كليهما أو إدخال "الأسفل" فقط. ويجب أن تبدأ العبارة بـ y-axis، ثم bottom axis text، ثم فاصل -->، وأخيرًا top axis text.
مثال
١. y-axis --> سيُصيَّر نصا المحور السفلي والعلوي.
٢. y-axis يُصيَّر نص المحور السفلي فقط.
نص الربع
quadrant-[1,2,3,4] يحدّد المحتوى النصي المعروض في كل ربع.
مثال
١. quadrant-1 يحدّد النص الذي سيُعرض في الربع الأيمن العلوي
٢. quadrant-2 يحدّد النص الذي سيُعرض في الربع الأيسر العلوي.
٣. quadrant-3 يحدّد النص الذي سيُعرض في الربع الأيسر السفلي.
٤. quadrant-4 يحدّد النص الذي سيُعرض في الربع الأيمن السفلي.
نقطة دائرية
تُستخدم لرسم دائرة داخل مخطط الأرباع. والصيغة هي : [x, y]، حيث تتراوح قيم x و y بين 0 - 1.
مثال
١. Point 1: [0.75, 0.80] ، ستُرسم النقطة 1 في الربع الأيمن العلوي.
٢. 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
