象限チャート
象限図は、データを 4 つの象限に分ける可視化図です。2 次元グリッド上にデータポイントをプロットするために使用され、1 つの変数は x 軸に、もう 1 つの変数は y 軸に表されます。象限の分割は、分析対象のデータに固有の一連の基準に従って、図を 4 等分することで決定されます。象限図は通常、データ内のパターンと傾向を識別し、図内のデータポイントの位置に基づいてアクションの優先順位を決定するために使用されます。これらは通常、ビジネス、マーケティング、リスク管理などのシナリオで使用されます。
例
コピー
埋め込み
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
構文
図に使用可能なデータポイントがない場合、軸テキストと象限名は対応する象限の中央にレンダリングされます。データポイントがある場合、x 軸ラベルは対応する象限の左側からレンダリングされ、象限テキストは図の下部に表示されます。y 軸ラベルは対応する象限の下部にレンダリングされ、象限テキストは対応する象限の上部にレンダリングされます。
データポイントの座標値については、最小値は 0、最大値は 1 です。
タイトル
タイトルは図の簡単な説明で、常に図の上部にレンダリングされます。
例
コピー
埋め込み
quadrantChart
title This is a sample example
x-axis
x 軸は x 軸に表示されるテキストを決定します。x 軸は「左」「右」の 2 つの部分に分かれており、両方を入力するか、「左」のみを入力できます。文は x-axis で始まり、次に left axis text、続いて区切り文字 -->、最後に right axis text を記述します。
例
1. x-axis --> 左軸と右軸のテキストの両方がレンダリングされます。
2. x-axis は左軸のテキストのみをレンダリングします。
y-axis
y 軸は y 軸に表示されるテキストを決定します。y 軸は「上」「下」の 2 つの部分に分かれており、両方を入力するか、「下」のみを入力できます。この文は y-axis で始まり、次に bottom axis text、続いて区切り文字 -->、最後に top axis text を記述します。
例
1. y-axis --> 下部と上部の軸テキストの両方がレンダリングされます。
2. y-axis は下部軸のテキストのみをレンダリングします。
象限テキスト
quadrant-[1,2,3,4] は各象限に表示されるテキスト内容を決定します。
例
1. quadrant-1 は右上象限に表示されるテキストを決定します
2. quadrant-2 は左上象限に表示されるテキストを決定します。
3. quadrant-3 は左下象限に表示されるテキストを決定します。
4. quadrant-4 は右下象限に表示されるテキストを決定します。
円点
象限図内に円を描画するために使用します。構文は : [x, y] で、x と y の値の範囲は 0 - 1 です。
例
1. Point 1: [0.75, 0.80] 、円点 1 は右上象限に描画されます。
2. Point 2: [0.35, 0.24] 、円点 2 は左下象限に描画されます。
図の構成
| パラメータ | 説明 | デフォルト値 |
|---|---|---|
| chartWidth | 図の幅 | 500 |
| chartHeight | 図の高さ | 500 |
| titlePadding | タイトルの上下パディング | 10 |
| titleFontSize | タイトルのフォントサイズ | 20 |
| quadrantPadding | すべての象限の外側のパディング | 5 |
| quadrantTextTopPadding | テキストが上部に描画されるときの象限テキストの上マージン（データポイント上ではない） | 5 |
| quadrantLabelFontSize | 象限テキストのフォントサイズ | 16 |
| quadrantInternalBorderStrokeWidth | 象限内部の枠線の幅 | 1 |
| quadrantExternalBorderStrokeWidth | 象限外枠のストローク幅 | 2 |
| xAxisLabelPadding | x 軸テキストの上下パディング | 5 |
| xAxisLabelFontSize | x 軸テキストのフォントサイズ | 16 |
| xAxisPosition | x 軸の位置（上部、下部）。データポイントが存在する場合、x 軸は常に下部にレンダリングされます | top |
| yAxisLabelPadding | y 軸テキストの左右パディング | 5 |
| yAxisLabelFontSize | y 軸テキストのフォントサイズ | 16 |
| yAxisPosition | y 軸の位置（左、右） | left |
| pointTextPadding | データポイントとその下のテキストとの間隔 | 5 |
| pointLabelFontSize | データポイントテキストのフォントサイズ | 12 |
| pointRadius | データポイントの半径 | 5 |
図のテーマ変数
| パラメータ | 説明 |
|---|---|
| quadrant1Fill | 右上象限の塗りつぶし色 |
| quadrant2Fill | 左上象限の塗りつぶし色 |
| quadrant3Fill | 左下象限の塗りつぶし色 |
| quadrant4Fill | 右下象限の塗りつぶし色 |
| quadrant1TextFill | 右上象限のテキスト色 |
| quadrant2TextFill | 左上象限のテキスト色 |
| quadrant3TextFill | 左下象限のテキスト色 |
| quadrant4TextFill | 右下象限のテキスト色 |
| quadrantPointFill | データポイントの塗りつぶし色 |
| quadrantPointTextFill | データポイントのテキスト色 |
| quadrantXAxisTextFill | x 軸テキストの色 |
| quadrantYAxisTextFill | y 軸テキストの色 |
| quadrantInternalBorderStrokeFill | 象限内枠の色 |
| quadrantExternalBorderStrokeFill | 象限外枠の色 |
| quadrantTitleFill | タイトルの色 |
構成とテーマの例
コピー
埋め込み
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete
データポイントのスタイル
データポイントはスタイルを直接設定するか、定義済みの共有クラスを使用できます
直接スタイル
コピー
埋め込み
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
クラススタイル
コピー
埋め込み
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
使用可能なスタイル:
| パラメータ | 説明 |
|---|---|
| color | データポイントの塗りつぶし色 |
| radius | データポイントの半径 |
| stroke-width | データポイントの枠線幅 |
| stroke-color | データポイントの枠線色（stroke-width が指定されていない場合は無効） |
優先順序：1. 直接スタイル 2. クラススタイル 3. テーマスタイル
スタイルの例
コピー
埋め込み
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
