مخطط 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]
