Tsart ng XY
Ang XY chart ay isang komprehensibong chart module, isang chart na gumagamit ng x-axis at y-axis para sa representasyon ng data
Halimbawa
Kopyahin
Embed
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]
Syntax
Ang lahat ng text value na naglalaman lamang ng isang salita ay maaaring isulat nang walang double quotes. Kung ang text value ay naglalaman ng maraming salita, lalo na kung may espasyo, kailangan itong ilagay sa loob ng double quotes.
Direksyon
Ang chart ay maaaring iguhit nang horizontal o vertical, default ay vertical.
Kopyahin
Embed
xychart-beta horizontal
...
Pamagat
Ang pamagat ay isang maikling paglalarawan ng chart, palagi itong ire-render sa tuktok ng chart.
Halimbawa
Kopyahin
Embed
xychart-beta
title "This is a simple example"
...
x-axis
Ang x-axis ay pangunahing kumakatawan sa categorical value, bagaman maaari rin itong gamitin bilang numerikal na saklaw.
Halimbawa
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
y-axis
Ang y-axis ay ginagamit upang kumatawan sa numerikal na saklaw, hindi ito maaaring magkaroon ng categorical value.
Halimbawa
- y-axis title min --> max
- Magdadagdag lamang ito ng pamagat, ang saklaw ay awtomatikong bubuuin batay sa data
Line chart
Ang line chart ay nagbibigay ng feature upang graphical na ipakita ang linya.
Halimbawa
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Bar chart
Ang bar chart ay nakakapagpakita ng bar nang graphical.
Halimbawa
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Simpleng halimbawa
Ang dalawang elemento lamang na kailangan ay ang chart name na xychart at isang dataset. Kaya, makakapagguhit ka ng chart gamit ang simpleng configuration.
Kopyahin
Embed
xychart-beta
line [+1.3, .6, 2.4, -.34]
Configuration ng chart
| Parameter | Paglalarawan | Default value |
|---|---|---|
| width | Lapad ng chart | 700 |
| height | Taas ng chart | 500 |
| titlePadding | Top-bottom padding ng pamagat | 10 |
| titleFontSize | Font size ng pamagat | 20 |
| showTitle | Kung ipapakita ang pamagat | true |
| xAxis | Configuration ng x-axis | AxisConfig |
| yAxis | Configuration ng y-axis | AxisConfig |
| plotReservedSpacePercent | Minimum na porsyento ng espasyong sinasakop ng bawat hugis sa chart | 50 |
| showDataLabel | Kung ipapakita ang katumbas na halaga sa loob ng bar chart | false |
AxisConfig
| Parameter | Paglalarawan | Default value |
|---|---|---|
| showLabel | Kung ipapakita ang axis label o tick value | true |
| labelFontSize | Font size ng label na iguguhit | 14 |
| labelPadding | Top-bottom spacing ng label | 5 |
| showTitle | Kung ipapakita ang axis title | true |
| titleFontSize | Font size ng axis title | 16 |
| titlePadding | Top-bottom spacing ng axis title | 5 |
| showTick | Kung ipapakita ang tick | true |
| tickLength | Haba ng tick | 5 |
| tickWidth | Lapad ng tick | 2 |
| showAxisLine | Kung ipapakita ang axis line | true |
| axisLineWidth | Kapal ng axis line | 2 |
Theme variable ng chart
Ang tema ng xychart ay matatagpuan sa xychart attribute, maaaring i-customize sa pamamagitan ng sumusunod na syntax:
Kopyahin
Embed
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parameter | Paglalarawan |
|---|---|
| backgroundColor | Background color ng buong chart |
| titleColor | Kulay ng teksto ng pamagat |
| xAxisLabelColor | Kulay ng label ng x-axis |
| xAxisTitleColor | Kulay ng pamagat ng x-axis |
| xAxisTickColor | Kulay ng tick ng x-axis |
| xAxisLineColor | Kulay ng linya ng x-axis |
| yAxisLabelColor | Kulay ng label ng y-axis |
| yAxisTitleColor | Kulay ng pamagat ng y-axis |
| yAxisTickColor | Kulay ng tick ng y-axis |
| yAxisLineColor | Kulay ng linya ng y-axis |
| plotColorPalette | Maaaring i-customize sa pamamagitan ng sumusunod na syntax, halimbawa "#f3456, #43445" |
Halimbawa ng configuration at tema
Kopyahin
Embed
---
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]
