사분면 차트
사분면 차트는 데이터를 네 개의 사분면으로 나누는 시각화 차트입니다. 2차원 격자 위에 데이터 포인트를 그리는 데 사용되며, 하나의 변수는 x축에, 다른 변수는 y축에 나타냅니다. 사분면의 구분은 분석되는 데이터에 특정한 기준 집합에 따라 차트를 네 등분으로 나누어 결정됩니다. 사분면 차트는 일반적으로 데이터의 패턴과 추세를 식별하고 차트에서 데이터 포인트의 위치에 따라 작업의 우선순위를 정하는 데 사용됩니다. 일반적으로 비즈니스, 마케팅 및 리스크 관리 등의 시나리오에서 사용됩니다.
예시
복사
임베드
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축은 '왼쪽''오른쪽' 두 부분으로 나뉘며, 둘 다 입력하거나 '왼쪽'만 입력할 수 있습니다. 문은 x-axis 로 시작하고, 이어서 left axis text, 그다음 구분 기호 -->, 마지막으로 right axis text 가 옵니다.
예시
1. x-axis --> 왼쪽 축과 오른쪽 축 텍스트가 모두 렌더링됩니다.
2. x-axis 왼쪽 축 텍스트만 렌더링됩니다.
y-axis
y축은 y축에 표시되는 텍스트를 결정합니다. y축은 '위''아래' 두 부분으로 나뉘며, 둘 다 입력하거나 '아래'만 입력할 수 있습니다. 해당 문은 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
