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]
構文
情報
1 つの単語のみを含むすべてのテキスト値は、二重引用符なしで記述できます。テキスト値に複数の単語が含まれる場合、特にスペースが含まれる場合は、二重引用符で囲む必要があります。
方向
図は水平または垂直に描画でき、デフォルトは垂直です。
コピー
埋め込み
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
簡単な例
必要な唯一の 2 つの要素はチャート名 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]
