クアドラントチャート
クアドラントチャートは、データを4つのクアドラントに分割した視覚的表現です。2次元グリッド上にデータポイントをプロットするために使用され、1つの変数がx軸に、もう1つの変数がy軸に表示されます。クアドラントは、分析されるデータに特有の基準に基づいてチャートを4つの等しい部分に分割することで決定されます。クアドラントチャートは、データのパターンやトレンドを特定し、チャート内のデータポイントの位置に基づいてアクションを優先順位付けするためにしばしば使用されます。ビジネス、マーケティング、リスク管理などの分野で一般的に使用されています。
例
Code:
構文
NOTE
チャートにポイントがない場合、**軸**のテキストと**クアドラント**はそれぞれのクアドラントの中央に表示されます。 ポイントがある場合、**x軸**のラベルはそれぞれのクアドラントの左側から表示され、チャートの下部にも表示され、**y軸**のラベルはそれぞれのクアドラントの下部に表示され、クアドラントのテキストはそれぞれのクアドラントの上部に表示されます。
NOTE
ポイントのxおよびy値の最小値は0、最大値は1です。
タイトル
タイトルはチャートの短い説明であり、常にチャートの上部に表示されます。
例
quadrantChart
title これはサンプル例ですx-axis
x軸は、x軸に表示されるテキストを決定します。x軸には、左と右の2つの部分があり、両方を渡すことができますが、左だけを渡すこともできます。文はx-axisで始まり、次に左軸テキストが続き、デリミタ-->の後に右軸テキストが続きます。
例
x-axis <text> --> <text>両方の左と右の軸テキストが表示されます。x-axis <text>左軸テキストのみが表示されます。
y-axis
y軸は、y軸に表示されるテキストを決定します。y軸には、上部と下部の2つの部分があり、両方を渡すことができますが、下部だけを渡すこともできます。文はy-axisで始まり、その後下軸テキストが続き、デリミタ-->の後に上軸テキストが続きます。
例
y-axis <text> --> <text>両方の下と上の軸テキストが表示されます。y-axis <text>下軸テキストのみが表示されます。
クアドラントのテキスト
quadrant-[1,2,3,4]は、クアドラント内に表示されるテキストを決定します。
例
quadrant-1 <text>は、右上のクアドラントにレンダリングされるテキストを決定します。quadrant-2 <text>は、左上のクアドラントにレンダリングされるテキストを決定します。quadrant-3 <text>は、左下のクアドラントにレンダリングされるテキストを決定します。quadrant-4 <text>は、右下のクアドラントにレンダリングされるテキストを決定します。
ポイント
ポイントは、quadrantChart内に円をプロットするために使用されます。構文は<text>: [x, y]であり、ここでxとyの値は0から1の範囲にあります。
例
Point 1: [0.75, 0.80]ここでPoint 1は右上のクアドラントに描画されます。Point 2: [0.35, 0.24]ここでPoint 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 | タイトルの色 |
設定およびテーマの例
Code:
ポイントスタイリング
ポイントは、直接スタイリングすることも、定義された共通クラスでスタイリングすることもできます。
- 直接スタイリング
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 | ポイントの境界色（ストローク幅が指定されていない場合は無効） |
NOTE
優先順位の順序: 1. 直接スタイル 2. クラススタイル 3. テーマスタイル
スタイリングの例
Code: