XY チャート
mermaid-js のコンテキストにおいて、XY チャートは、データ表現に x 軸と y 軸の両方を使用する様々な種類のチャートを含む包括的なチャートモジュールです。現在、棒グラフと折れ線グラフという2つの基本的なチャートタイプが含まれています。これらのチャートは、2つの数値変数を伴うデータを視覚的に表示および分析するために設計されています。
mermaid-js の現在の実装にはこれらの2つのチャートタイプが含まれていますが、このフレームワークは動的で適応可能な設計になっています。そのため、将来、追加のチャートタイプの拡張と組み込みが可能です。これは、新しいチャートタイプが導入されるにつれて、様々なデータ視覚化のニーズに対応する、XY チャートモジュール内で進化するチャートオプションのスイートをユーザーが期待できることを意味します。
例
構文
情報
1語のみを含むすべてのテキスト値は、"なしで記述できます。テキスト値に複数の単語が含まれている場合、特にスペースが含まれている場合は、値を"で囲みます。
方向
チャートは水平または垂直に描画できます。デフォルト値は垂直です。
xychart-beta horizontal
...タイトル
タイトルはチャートの簡単な説明であり、常にチャートの上に表示されます。
例
xychart-beta
title "This is a simple example"
...情報
タイトルが1語だけの場合は"を使用する必要はありませんが、スペースが含まれる場合は"が必要です。
x軸
x 軸は主にカテゴリ値として機能しますが、必要に応じて数値範囲値としても機能できます。
例
x-axis title min --> maxx 軸は、指定された範囲で数値として機能します。x-axis "title with space" [cat1, "cat2 with space", cat3]x 軸がカテゴリの場合、カテゴリはテキストタイプです。
y軸
y 軸は数値範囲値を表すために使用され、カテゴリ値を持つことはできません。
例
y-axis title min --> maxy-axis titleタイトルのみが追加され、範囲はデータから自動的に生成されます。
情報
x 軸と y 軸の両方がオプションです。指定されていない場合、範囲の作成を試みます。
折れ線グラフ
折れ線グラフは、線をグラフィカルに描写する機能を提供します。
例
line [2.3, 45, .98, -3.4]有効な数値をすべて使用できます。
棒グラフ
棒グラフは、棒をグラフィカルに描写する機能を提供します。
例
bar [2.3, 45, .98, -3.4]有効な数値をすべて使用できます。
最も簡単な例
必要なのは、チャート名 (xychart-beta) と1つのデータセットのみです。そのため、次のような簡単な設定でチャートを描画できます。
xychart-beta
line [+1.3, .6, 2.4, -.34]チャート設定
| パラメータ | 説明 | デフォルト値 |
|---|---|---|
| 幅 | チャートの幅 | 700 |
| 高さ | チャートの高さ | 500 |
| titlePadding | タイトルの上下のパディング | 10 |
| titleFontSize | タイトルのフォントサイズ | 20 |
| showTitle | タイトルの表示/非表示 | true |
| xAxis | xAxis 設定 | AxisConfig |
| yAxis | yAxis 設定 | AxisConfig |
| chartOrientation | 'vertical' または 'horizontal' | 'vertical' |
| plotReservedSpacePercent | チャート内でプロットが占める最小スペース | 50 |
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 属性内に存在するため、変数を設定するには、この構文を使用します。%%{init: { "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"） |