XY チャート

mermaid-jsの文脈において、XYチャートは、データ表現のためにx軸とy軸の両方を利用するさまざまな種類のチャートを網羅する包括的なチャートモジュールです。現在、基本的なチャートタイプとして、棒グラフと折れ線グラフの2種類が含まれています。これらのチャートは、2つの数値変数を含むデータを視覚的に表示し、分析するために設計されています。

現在のmermaid-jsの実装にこれらの2つのチャートタイプが含まれていることは重要ですが、フレームワークは動的で適応可能であるように設計されています。したがって、将来的には追加のチャートタイプを含む拡張能力があります。これにより、ユーザーは新しいチャートタイプが導入されるにつれて、XYチャートモジュール内でさまざまなデータ可視化ニーズに応える進化したチャートオプションを期待できるでしょう。

例

Code:

構文

NOTE

単語のみを含むすべてのテキスト値は、`"`なしで書くことができます。テキスト値が複数の単語を含む場合、特にスペースを含む場合は、値を`"`で囲む必要があります。

オリエンテーション

チャートは横向きまたは縦向きに描画できます。デフォルトの値は縦向きです。

xychart-beta horizontal
...

タイトル

タイトルはチャートの短い説明であり、常にチャートの上部に表示されます。

例

xychart-beta
    title "これはシンプルな例です"
    ...

NOTE

タイトルが単語のみの場合は、`"`を使用する必要はありませんが、スペースを含む場合は`"`が必要です。

x軸

x軸は主にカテゴリー値として機能しますが、必要に応じて数値範囲値としても機能します。

例

1. x-axis title min --> max x軸は指定された範囲で数値機能します。
2. x-axis "スペースを含むタイトル" [cat1, "スペースを含むcat2", cat3] x軸がカテゴリーの場合、カテゴリーはテキストタイプです。

y軸

y軸は数値範囲値を表すために使用され、カテゴリー値は持つことができません。

例

1. y-axis title min --> max
2. y-axis title タイトルだけが追加され、範囲はデータから自動生成されます。

NOTE

x軸とy軸はオプションであり、提供されない場合は範囲が作成されるようにします。

折れ線グラフ

折れ線グラフは、グラフィカルに線を描写する機能を提供します。

例

1. line [2.3, 45, .98, -3.4] 有効な数値を全て含むことができます。

棒グラフ

棒グラフは、グラフィカルに棒を描写する機能を提供します。

例

1. bar [2.3, 45, .98, -3.4] 有効な数値を全て含むことができます。

最もシンプルな例

チャート名（xychart-beta）と1つのデータセットの2つだけが必要です。ですので、次のようにシンプルな設定でチャートを描画できます。

xychart-beta
    line [+1.3, .6, 2.4, -.34]

チャート構成

パラメータ	説明	デフォルト値
width	チャートの幅	700
height	チャートの高さ	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

チャートテーマ変数

NOTE

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"

設定とテーマの例

Code: