مقدمة عن المخطط الراداري
المخطط الراداري طريقة بسيطة لرسم بيانات منخفضة الأبعاد بتنسيق دائري.
يُسمّى المخطط الراداري أيضًا مخطط العنكبوت أو المخطط النجمي أو مخطط الشبكة أو المخطط القطبي.
التطبيق
يكون المخطط الراداري مفيدًا بصفة خاصة للمطوّرين وعلماء البيانات والمهندسين الذين يحتاجون إلى تمثيل البيانات بتنسيق دائري واضح وموجز.
ويُستخدم عادةً لتلخيص ومقارنة أداء كيانات متعددة عبر أبعاد متعددة بصورة رسومية.
الصيغة
نسخ
تضمين
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
مثال
نسخ
تضمين
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
تفاصيل الصيغة
العنوان
title: يُصيَّر في أعلى المخطط الراداري.
نسخ
تضمين
radar-beta
title Title of the Radar Diagram
...
المحور
axis: تُستخدم صيغة axis لتعريف محاور المخطط الراداري.
يُمثَّل كل محور بمعرّف ID وتسمية اختيارية.
يمكن تعريف عدة محاور في سطر واحد.
نسخ
تضمين
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
المنحنى
curve: تُستخدم صيغة curve لتعريف نقاط بيانات المنحنى في المخطط الراداري.
تُمثَّل كل منحنى بمعرّف ID وتسمية اختيارية وقائمة قيم.
يمكن تعريف القيم بقائمة أرقام أو قائمة أزواج مفتاح-قيمة. وإذا استُخدمت أزواج مفتاح-قيمة، فسيمثّل المفتاح معرّف المحور، وتمثّل القيمة نقطة البيانات.
يمكن تعريف عدة منحنيات في سطر واحد.
نسخ
تضمين
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
الخيارات
- showLegend: تُستخدم صيغة showLegend لعرض أو إخفاء مفتاح الإيضاح في المخطط الراداري، والافتراضي هو العرض.
- max: القيمة العظمى للمخطط الراداري، وتُستخدم لقياس المخطط الراداري. إذا لم تُوفَّر، فتُحسب القيمة العظمى من نقاط البيانات.
- min: القيمة الصغرى للمخطط الراداري، وتُستخدم لقياس المخطط الراداري. إذا لم تُوفَّر، فالقيمة الصغرى هي 0.
- graticule: تُستخدم صيغة graticule لتعريف نوع خطوط الطول والعرض المراد تصييرها في المخطط الراداري. ويمكن أن تكون خطوط الطول والعرض circle أو polygon. وإذا لم تُوفَّر، فالافتراضي circle.
- ticks: تُستخدم صيغة ticks لتعريف عدد العلامات على خطوط الطول والعرض. وهو عدد الدوائر أو المضلّعات متحدة المركز المرسومة، ويُستخدم للإشارة إلى مقياس المخطط الراداري. وإذا لم توفَّر، فعدد العلامات الافتراضي هو 5.
نسخ
تضمين
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
التكوين
| معامل | الوصف | القيمة الافتراضية |
|---|---|---|
| width | عرض المخطط الراداري | 600 |
| height | ارتفاع المخطط الراداري | 600 |
| marginTop | الهامش العلوي للمخطط الراداري | 50 |
| marginBottom | الهامش السفلي للمخطط الراداري | 50 |
| marginLeft | الهامش الأيسر للمخطط الراداري | 50 |
| marginRight | الهامش الأيمن للمخطط الراداري | 50 |
| axisScaleFactor | معامل قياس المحور | 1 |
| axisLabelFactor | معامل ضبط موضع تسمية المحور | 1.05 |
| curveTension | شدّ المنحنى ذي الزوايا الدائرية | 0.17 |
متغيّرات السمة
متغيّرات السمة العامة
تعتمد القيم الافتراضية لهذه المتغيّرات على السمة المستخدمة. لتجاوز القيم الافتراضية، عيّن القيم المطلوبة في قسم themeVariables داخل التكوين: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
يدعم المخطط الراداري مقياس الألوان cScale${i}، حيث i رقم من 0 إلى الحد الأقصى لعدد الألوان في مقياس ألوان السمة. وعادةً، الحد الأقصى لعدد الألوان هو 12.
| الخاصية | الوصف |
|---|---|
| fontSize | حجم خط العنوان |
| titleColor | لون العنوان |
| cScale$ | مقياس ألوان المنحنى رقم i |
خيارات تنسيق المخطط الراداري
تقع المتغيّرات الخاصة بالمخطط الراداري داخل المفتاح radar. ولتعيين خيارات تنسيق المخطط الراداري، استخدم الصيغة التالية. config: themeVariables: radar: axisColor: "#FF0000"
| الخاصية | الوصف | القيمة الافتراضية |
|---|---|---|
| axisColor | لون خط المحور | black |
| axisStrokeWidth | عرض خط المحور | 1 |
| axisLabelFontSize | حجم خط تسمية المحور | 12px |
| curveOpacity | شفافية المنحنى | 0.7 |
| curveStrokeWidth | عرض المنحنى | 2 |
| graticuleColor | لون خطوط الطول والعرض | black |
| graticuleOpacity | شفافية خطوط الطول والعرض | 0.5 |
| graticuleStrokeWidth | عرض خطوط الطول والعرض | 1 |
| legendBoxSize | حجم مربع مفتاح الإيضاح | 10 |
| legendFontSize | حجم خط مفتاح الإيضاح | 14px |
مثال على التكوين والسمة
نسخ
تضمين
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
