히스토그램

값 하나하나를 구간으로 묶어 분포를 막대로 보여 주는 표현 전용 차트입니다. 처리 시간, 주문 금액, 점수처럼 개별 값이 많을 때 어디에 몰리고 꼬리가 얼마나 긴지 봅니다. 막대 차트와 달리 x 가 연속 값이라 막대가 붙어 있고 눈금은 구간 경계에 놓입니다. 구간 폭은 깔끔한 수로 잡고, 마지막 구간은 끝값을 포함합니다.

상태

0204060

10분30분50분70분80분

기본 구간(스터지스)

051015

60점70점80점90점100점

bins · tone

활용 방법

주문 처리 시간 분포

막대에 마우스를 올리거나 탭 · 키보드로 초점을 주면 구간 범위와 개수 · 비율이 나온다.

Preview

0102030

15분25분35분45분55분65분75분

tsx

<Histogram
  values={minutes} // 주문마다 처리 시간(분)
  bins={12}
  formatValue={(v) => `${v}분`}
/>

속성

이름	타입	기본값	설명
values	number[]	-	개별 값. 유한하지 않은 값은 뺀다
bins	number	스터지스 공식	대략의 구간 수(구간 폭을 깔끔한 수로 맞춘다)
tone	ChartTone	"primary"	막대 색
height	number	180	플롯 높이(px)
formatValue	(v: number) => string	ko-KR 콤마	구간 경계 포맷
unit	string	"건"	개수 단위