תרשים XY
תרשים XY הוא מודול תרשימים מקיף, תרשים המשתמש בציר ה-x ובציר ה-y לייצוג נתונים
דוגמה
העתק
הטמעה
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
תחביר
כל ערכי טקסט המכילים מילה אחת בלבד יכולים להיכתב ללא מרכאות כפולות. אם ערך טקסט מכיל מספר מילים, במיוחד אם הוא מכיל רווחים, יש לעטוף אותו במרכאות כפולות.
כיוון
ניתן לשרטט את התרשים אופקית או אנכית, וברירת המחדל היא אנכית.
העתק
הטמעה
xychart-beta horizontal
...
כותרת
כותרת היא תיאור קצר של התרשים, והיא תרונדר תמיד בראש התרשים.
דוגמה
העתק
הטמעה
xychart-beta
title "This is a simple example"
...
ציר ה-x
ציר ה-x מייצג בעיקר ערכים קטגוריאליים, אם כי הוא יכול לשמש גם כטווח מספרי.
דוגמה
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
ציר ה-y
ציר ה-y משמש לייצוג טווח מספרי, והוא אינו יכול להכיל ערכים קטגוריאליים.
דוגמה
- y-axis title min --> max
- הוא יוסיף רק כותרת, והטווח ייווצר אוטומטית בהתאם לנתונים
תרשים קווים
תרשים קווים מספק יכולת להציג קווים באופן גרפי.
דוגמה
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
תרשים עמודות
תרשים עמודות מסוגל להציג עמודות באופן גרפי.
דוגמה
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
דוגמה פשוטה
שני הרכיבים היחידים הנדרשים הם שם התרשים xychart ומערך נתונים. לכן, תוכל לשרטט את התרשים באמצעות תצורה פשוטה.
העתק
הטמעה
xychart-beta
line [+1.3, .6, 2.4, -.34]
תצורת תרשים
| פרמטר | תיאור | ערך ברירת מחדל |
|---|---|---|
| width | רוחב התרשים | 700 |
| height | גובה התרשים | 500 |
| titlePadding | הריפוד העליון והתחתון של הכותרת | 10 |
| titleFontSize | גודל גופן הכותרת | 20 |
| showTitle | האם להציג את הכותרת | true |
| xAxis | תצורת ציר ה-x | AxisConfig |
| yAxis | תצורת ציר ה-y | AxisConfig |
| plotReservedSpacePercent | אחוז השטח המינימלי שתופס כל גרף בתרשים | 50 |
| showDataLabel | האם להציג את הערך המתאים בתוך עמודת התרשים | false |
AxisConfig
| פרמטר | תיאור | ערך ברירת מחדל |
|---|---|---|
| showLabel | האם להציג תוויות ציר או ערכי שנתות | true |
| labelFontSize | גודל הגופן של התוויות לשרטוט | 14 |
| labelPadding | המרווח העליון והתחתון של התווית | 5 |
| showTitle | האם להציג כותרת ציר | true |
| titleFontSize | גודל גופן כותרת הציר | 16 |
| titlePadding | המרווח העליון והתחתון של כותרת הציר | 5 |
| showTick | האם להציג שנתות | true |
| tickLength | אורך השנתה | 5 |
| tickWidth | רוחב השנתה | 2 |
| showAxisLine | האם להציג קו ציר | true |
| axisLineWidth | עובי קו הציר | 2 |
משתני ערכת נושא של התרשים
ערכת הנושא של xychart נמצאת במאפיין xychart, וניתן להתאים אותה אישית באמצעות התחביר שלהלן:
העתק
הטמעה
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| פרמטר | תיאור |
|---|---|
| backgroundColor | צבע הרקע של התרשים כולו |
| titleColor | צבע טקסט הכותרת |
| xAxisLabelColor | צבע תווית ציר ה-x |
| xAxisTitleColor | צבע כותרת ציר ה-x |
| xAxisTickColor | צבע שנתות ציר ה-x |
| xAxisLineColor | צבע קו ציר ה-x |
| yAxisLabelColor | צבע תווית ציר ה-y |
| yAxisTitleColor | צבע כותרת ציר ה-y |
| yAxisTickColor | צבע שנתות ציר ה-y |
| yAxisLineColor | צבע קו ציר ה-y |
| plotColorPalette | ניתן להתאים אישית באמצעות התחביר שלהלן, לדוגמה "#f3456, #43445" |
דוגמת תצורה וערכת נושא
העתק
הטמעה
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
