مخطط دائري
المخطط الدائري شكل إحصائي دائري يُقسَّم إلى عدة قطاعات لعرض النسب العددية. وفي المخطط الدائري، يتناسب طول قوس كل قطاع مع الكمية التي يمثّلها.
يمكن لـ Mermaid تصيير المخططات الدائرية.
كود
نسخ
تضمين
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
الصيغة
رسم مخطط دائري في Mermaid بسيط جدًا.
showData يعني تصيير القيم العددية الفعلية بعد نص مفتاح الإيضاح، وهو اختياري.
- يأتي بعد ذلك صيغة title وقيمتها النصية لتعيين عنوان للمخطط الدائري، وهو اختياري.
- ثم تأتي مجموعة البيانات، وستُرتَّب قطاعات المخطط الدائري في اتجاه عقارب الساعة وفق ترتيب التسميات.
label جزء في المخطط الدائري، محاطًا بعلامتي اقتباس مزدوجتين.
متبوعًا بنقطتين : كفاصل.
يأتي بعد ذلك positive numeric value ، الذي يمثّل قيمة محدّدة، ويدعم حتى منزلتين عشريتين.
mermaid.grammar_pie_data_option_title_value
مثال
كود
نسخ
تضمين
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
التكوين
يدعم المخطط الدائري معاملات التكوين التالية:
| معامل | الوصف | القيمة الافتراضية |
|---|---|---|
| textPosition | الموضع المحوري لتسمية قطاع المخطط الدائري، من 0.0 في المركز إلى 1.0 عند حافة الدائرة. | 0.75 |
| donutHole | نسبة الفتحة الحلقية. ويتراوح نطاق القيم الصالحة بين 0 و 0.9. | 0.1 |
| legendPosition | موضع مفتاح الإيضاح بالنسبة إلى المخطط. والقيم الصالحة هي top و bottom و left و right و center. | top |
| highlightSlice | إبراز قطاع معيّن له تسمية مطابقة، وعند التعيين إلى hover يُبرَز القطاع الذي يمرّ فوقه المؤشر. | hover |
