산점도
두 지표의 관계를 점으로 보여 주는 표현 전용 차트입니다. 모든 점에 size를 주면 점 크기가 세 번째 값을 말하는 버블 차트가 됩니다(면적이 값에 비례). quadrant로 x · y 기준선(평균 · 목표)을 그어 네 구역을 나누고 구석에 구역 이름을 적을 수 있습니다. 축은 0을 꼭 포함하지 않고 데이터 범위에 맞춥니다. 점에 마우스를 올리거나 탭하면 툴팁이 나오고, 처음 그려질 때 x가 작은 점부터 차례로 나타납니다.
상태
검색
방문4,200
전환율(%)3.1
SNS
방문2,600
전환율(%)1.4
추천
방문900
전환율(%)6.2
광고
방문3,100
전환율(%)2.2
아메리카노
판매량1,240
마진율(%)72
크기5,580
카페라떼
판매량980
마진율(%)64
크기4,900
콜드브루
판매량760
마진율(%)78
크기3,800
바닐라라떼
판매량520
마진율(%)58
크기2,860
말차라떼
판매량310
마진율(%)70
크기1,860
티
판매량420
마진율(%)81
크기1,680
케이크
판매량260
마진율(%)41
크기1,820
샌드위치
판매량690
마진율(%)38
크기4,140
활용 방법
메뉴 엔지니어링 (사분면)
판매량 · 마진율의 평균으로 네 구역을 나눈다. 오른쪽 위는 많이 팔리고 남는 메뉴, 왼쪽 아래는 정리할 후보다. 점 크기는 매출이다.
아메리카노
판매량(잔)1,240
마진율(%)72%
크기5,580
카페라떼
판매량(잔)980
마진율(%)64%
크기4,900
콜드브루
판매량(잔)760
마진율(%)78%
크기3,800
바닐라라떼
판매량(잔)520
마진율(%)58%
크기2,860
말차라떼
판매량(잔)310
마진율(%)70%
크기1,860
티
판매량(잔)420
마진율(%)81%
크기1,680
케이크
판매량(잔)260
마진율(%)41%
크기1,820
샌드위치
판매량(잔)690
마진율(%)38%
크기4,140
<ScatterChartshowLabelsxLabel="판매량(잔)"yLabel="마진율(%)"quadrant={{ x: avgSales, y: avgMargin, labels: ["퍼즐", "스타", "정리 후보", "주력 상품"] }}points={menus.map((m) => ({ label: m.name, x: m.sold, y: m.margin, size: m.revenue }))}formatY={(v) => `${v}%`}/>
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| points | ScatterPoint[] | - | { label, x, y, size?, tone? }. 모든 점에 size 가 있으면 버블 |
| xLabel | string | - | x축 이름(아래 오른쪽) |
| yLabel | string | - | y축 이름(위 왼쪽) |
| quadrant | { x, y, labels? } | - | 사분면 기준값과 구석 이름(왼쪽 위 · 오른쪽 위 · 왼쪽 아래 · 오른쪽 아래) |
| showLabels | boolean | false | 점 옆에 label 글자 |
| height | number | 240 | 플롯 영역 높이(px) |
| formatX | (v: number) => string | ko-KR 콤마 | x 값 포맷 |
| formatY | (v: number) => string | ko-KR 콤마 | y 값 포맷 |