XYチャートは、標準的な二次元グリッド座標レイアウト上で折れ線グラフと棒グラフの両方をレンダリングするために使用される包括的なデータ可視化コンポーネントです。古い独立したチャートスキーマを置き換え、統合するために導入された、xychart-betaレンダリングエンジンは、カスタム数値データセットを動的に処理し、応答性のある構造的グリッドを自動スケーリングし、同時に複数の独立した重複するデータ系列を表示することをサポートします。
基本構文構造
すべてのXYチャートは、xychart-beta宣言ヘッダーから始まります。その後、水平方向のX軸カテゴリ配列、垂直方向のY軸タイトルまたはデータ範囲制限、および少なくとも1つの明示的なデータプロットシリーズ（例：lineまたはbarブロック）を設定します。
xychart-beta
title "サンプルパフォーマンスチャート"
x-axis [1月, 2月, 3月, 4月]
y-axis "収益（USD）"
bar [4500, 5200, 6100, 5800]
構文リファレンス
以下の表は、Mermaid.jsでXYチャートを正しく構造化するために必要な主なデータ定義と設定キーを分解しています。
| 構文コンポーネント | 受け入れられるフォーマット | 説明と使用ルール |
|---|---|---|
| 宣言 | キーワード | 2次元レイアウトチャートワークスペースを初期化します。正確なxychart-beta文字列ブロックを使用する必要があります。 |
| タイトル | 引用符で囲まれた文字列 | チャートキャンバスグリッドのすぐ上に中央に表示されるオプションのグローバル見出しです。 |
| X軸の設定 | 括弧付きリスト / 範囲 | 水平スケールのラベルを定義します。カテゴリカルなテキスト文字列を括弧内に受け入れます[A, B, C] または数値のポイント範囲[100 --> 500]. |
| Y軸の設定 | タイトル文字列 / スケールの範囲 | 垂直スケールのパラメータを設定します。軸のタイトル文字列として単純に使用できるほか、下限／上限の値の範囲を制限するために使用できます"タイトル" 0 --> 100. |
| 棒グラフプロットシリーズ | 数値配列 | データセットを垂直の棒としてレンダリングします。データ配列内の要素数は、X軸のカテゴリ数と完全に一致している必要があります。 |
| 折れ線プロットシリーズ | 数値配列 | データポイントをグリッドワークスペース上で連続する線で結ぶことで、データセットをレンダリングします。 |
高度なデータカスタマイズ（ディレクティブ）
ドキュメントコードスニペットの絶対的な先頭にフロントマター設定ブロックを埋め込むことで、チャートワークスペースの視覚的外観を微調整できます。これにより、カスタムの16進色、プロットシリーズの線の太さ、グリッド表示の可視性フィールドなど、完全なレイアウト制御が可能になります。
XYチャート設定属性マトリクス
| プロパティ設定キー | 値のオプション | 視覚的結果 |
|---|---|---|
showLine |
true | false |
背景の構造的軸線グリッドのストロークが座標上に表示されるかどうかを切り替えます。 |
chartWidth |
整数（ピクセル） | グリッドシステムの固定されたバウンディングキャンバスレイアウト幅を設定します。 |
chartHeight |
整数（ピクセル） | グリッドシステムの固定されたバウンディングキャンバスレイアウト高さを設定します。 |
themeVariables.xyChart |
カラーマッピング配列 | 明示的な16進数スタイルカラーのブロックを挿入します（例：backgroundColor, titleColor、またはカスタムカラーのリストスロットplotColorPalette）をプロットに挿入します。 |
実世界のブループリント：マルチシリーズ技術比較
この包括的なブループリントはインフラストラクチャのパフォーマンスレビューを追跡します。カスタム設定ディレクティブを使用してキャンバスの寸法を固定し、背景のグリッドラインパスを表示し、明示的な16進数カラーパレットを挿入します。4つの異なる四半期フェーズをマッピングし、重なり合う棒グラフシリーズとラインシリーズチャートを組み合わせた視覚的なコンビネーションチャートとして描画します。
---
config:
xychart:
chartWidth: 700
chartHeight: 400
showLine: true
themeVariables:
xychart:
titleColor: "#0072B1"
plotColorPalette: "#0072B1, #E06000"
---
xychart-beta
title "Q1-Q4 リソース対実行メトリクス"
x-axis ["第1四半期", "第2四半期", "第3四半期", "第4四半期"]
y-axis "パフォーマンスメトリクス単位" 0 --> 100
bar [45, 65, 80, 95]
line [55, 60, 72, 88]
構文のヒント： 複数のデータプロットを重ねる場合（たとえば、同じレイアウトキャンバス内にbarデータセットとlineデータセットを同じレイアウトキャンバス内に配置する場合）、レンダリングエンジンは、テキストスクリプトに記述された順序に従って、それらをスタックまたは順次描画します。キャンバスラインでの視覚的なクリッピングを避けるために、データブロックの順序を意図的に配置してください。
一般的な構文の落とし穴とシステム制約
次元行列パスをコンパイルする際、わずかな設定ミスが座標計算を崩すことがあります。以下のトラブルシューティングパラメータを念頭に置いてください：
- データ長の不一致： すべての
barまたはラインデータシリーズ配列は、あなたの指定した数と正確に同じ数のエントリを含む必要があります。X軸リストパラメータ。X軸に4つのカテゴリがあるのに、5つの数値のデータリストを提供すると、チャートのコンパイルが完全に破綻します。 - 引用符の境界： 軸のリストの括弧内にカテゴリを指定する際、スペースや特殊な句読点を含むテキストブロックは、きれいに二重引用符で囲む必要があります（例：
["フェーズ1", "フェーズ2"]). - 数値座標の範囲： 軸スケールに手動範囲を設定する場合（例：
0 --> 500）、明示的にダブルダッシュの後に大なり記号（-->）を使用する必要があります。ダッシュを忘れたり、演算子文字をスペースで分離すると、処理レイアウトエラーが発生します。 - 正の整数の重み： スケール値は線形空間ブロックにマッピングされます。シリーズに渡す値にエスケープされていない文字要素や、配列内の空のパラメータnull値が含まれていないことを確認してください。