문서 › 차트 종류

퍼널 차트

방문 → 장바구니 → 결제처럼 단계별 인원과 전환율.

type: 'funnel' 은 첫 번째 시리즈의 값을 단계로 그립니다. 막대 폭은 가장 큰 단계 대비 값, 단계 사이에는 이전 단계 대비 전환율(↓ 44.7%), 오른쪽에는 값과 첫 단계 대비 비율이 붙습니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'funnel',
  title: '구매 전환 퍼널',
  unit: '명',
  data: {
    labels: ['방문', '상품 조회', '장바구니', '결제 시작', '구매 완료'],
    series: [{ name: '사용자', data: [48210, 21530, 8240, 4910, 3120] }],
  },
});

툴팁: 단계 값, 전환율(이전 단계 대비), 첫 단계 대비.
키보드: 위·아래 화살표로 단계를 옮깁니다.
단계는 위에서 아래로 넘긴 순서 그대로입니다. 값이 늘어나는 단계가 있어도 그대로 그립니다(전환율이 100%를 넘음).