트리맵

항목의 구성비를 면적으로 보여 주는 표현 전용 차트입니다. 재고 금액 구성, 경비 카테고리처럼 항목이 많아 도넛으로는 조각이 너무 가늘어질 때 씁니다. 한 단계 목록을 큰 순서로 squarified 배치해 칸이 정사각형에 가깝습니다. 상자는 aspectRatio 를 지켜 폭이 바뀌어도 칸 모양이 그대로입니다. 면적이 작은 칸은 글자를 숨기고 마우스를 올리면 값이 나옵니다.

상태

원자재39%4,200만

완제품27%2,900만

반제품15%1,600만

포장재7.6%820만

소모품5.0%540만

부품4.2%460만

샘플1.9%210만

기타1.1%120만

기본 (2:1)

인건비62%5,200만

임차료21%1,800만

광고11%950만

통신3.8%320만

소모품2.1%180만

3:2 · tone

활용 방법

재고 금액 구성

입력 순서와 상관없이 큰 순서로 배치한다. 0 이하 값은 그리지 않는다.

Preview

원자재39%4,200만원

완제품27%2,900만원

반제품15%1,600만원

포장재7.6%820만원

소모품5.0%540만원

부품4.2%460만원

샘플1.9%210만원

기타1.1%120만원

tsx

<Treemap
  aspectRatio={2.4}
  items={[
    { label: "원자재", value: 4200 },
    { label: "완제품", value: 2900 },
    // ...
  ]}
  formatValue={(v) => `${v.toLocaleString("ko-KR")}만원`}
/>

속성

이름	타입	기본값	설명
items	TreemapItem[]	-	{ label, value }. 큰 순서로 배치하고 0 이하는 뺀다
tone	ChartTone	"primary"	칸 색(18% 면 + 테두리, 글자는 글자색)
aspectRatio	number	2	상자 가로/세로 비율. 배치도 이 비율로 계산한다
formatValue	(v: number) => string	ko-KR 콤마	값 포맷