象限図

象限図は、データを4つの象限に分割して視覚的に表現したものです。これは、2次元グリッド上にデータ点をプロットするために使用され、1つの変数がx軸に、別の変数がy軸に表されます。象限は、分析対象のデータに固有の基準に基づいてチャートを4等分することによって決定されます。象限図は、データ内のパターンと傾向を特定したり、チャート内のデータ点の位置に基づいてアクションの優先順位を付けたりするために使用されることがよくあります。ビジネス、マーケティング、リスク管理などの分野で一般的に使用されています。

例

構文

情報

チャートに利用可能なポイントがない場合、軸テキストと象限の両方がそれぞれの象限の中央にレンダリングされます。ポイントがある場合、x軸ラベルはそれぞれの象限の左側からレンダリングされ、チャートの下部に表示され、y軸ラベルはそれぞれの象限の下部にレンダリングされ、象限テキストはそれぞれの象限の上部にレンダリングされます。

情報

ポイントのxおよびy値の最小値は0で、最大値は1です。

タイトル

タイトルはチャートの短い説明であり、常にチャートの上にレンダリングされます。

例

quadrantChart
    title This is a sample example

x軸

x軸は、x軸に表示されるテキストを決定します。x軸には、左と右の2つの部分があり、両方を渡すことも、左のみを渡すこともできます。ステートメントは、最初にx-axisで始まり、次に左軸テキスト、その後に区切り文字-->、最後に右軸テキストが続きます。

例

1. x-axis <テキスト> --> <テキスト> 左軸と右軸の両方のテキストがレンダリングされます。
2. x-axis <テキスト> 左軸テキストのみがレンダリングされます。

y軸

y軸は、y軸に表示されるテキストを決定します。y軸には、上と下の2つの部分があり、両方を渡すことも、下のみを渡すこともできます。ステートメントは、最初にy-axisで始まり、次に下軸テキスト、その後に区切り文字-->、最後に上軸テキストが続きます。

例

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] ここで、Point 1は右上象限に描画されます。
2. 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	タイトルの色

設定とテーマの例

ポイントのスタイル設定

ポイントは、直接スタイル設定するか、定義済みの共有クラスを使用してスタイル設定できます。

1. 直接スタイル設定

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

2. クラスのスタイル設定

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. テーマスタイル

スタイル設定の例