תרשים עוגה
תרשים עוגה הוא צורה סטטיסטית מעגלית, המחולקת למספר גזרות כדי להציג פרופורציות מספריות. בתרשים עוגה, אורך הקשת של כל גזרה פרופורציוני לכמות שהיא מייצגת.
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 |
