생키 차트

단계 사이 흐름의 양을 띠 굵기로 보여 주는 표현 전용 차트입니다. 리드 유입 경로 → 상담 → 결과, 예산 → 부서 → 항목처럼 어디서 와서 어디로 나뉘는지 봅니다. 노드는 links 에서 모으고, 열은 출발점에서의 가장 긴 경로이며, 나가는 흐름이 없는 결과 노드는 마지막 열에 맞춥니다. 모든 열이 같은 배율을 써서 띠 굵기를 비교할 수 있습니다. 순환을 만드는 흐름은 뺍니다.

상태

예산 960백만

개발 520백만

마케팅 260백만

운영 180백만

광고 190백만

행사 70백만

두 단계

검색 420

상담 820

광고 440

활용 방법

리드 유입에서 계약까지

노드에 마우스를 올리거나 탭 · 키보드로 초점을 주면 들어온 양 · 나간 양이 나온다. 띠에 마우스를 올리면 흐름 하나가 진해진다.

Preview

검색 420건

상담 820건

광고 440건

추천 140건

이탈 690건

견적 520건

계약 310건

tsx

<SankeyChart
  links={[
    { source: "검색", target: "상담", value: 420 },
    { source: "광고", target: "상담", value: 260 },
    { source: "상담", target: "견적", value: 520 },
    { source: "견적", target: "계약", value: 310 },
    // ...
  ]}
  formatValue={(v) => `${v}건`}
/>

속성

이름	타입	기본값	설명
links	SankeyLink[]	-	{ source, target, value }. 노드는 이름으로 모은다. 0 이하 · 자기 자신 · 순환 흐름은 뺀다
height	number	240	높이(px)
formatValue	(v: number) => string	ko-KR 콤마	값 포맷