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]
