chart
English시작하기

문서 › 차트 종류

트리맵

크기를 넓이로: 업종별 시가총액, 채널별 매출. 등락률 색(빨강 상승·파랑 하락).

type: 'treemap' 는 값을 넓이로 나눕니다(정사각형에 가깝게 배치하는 squarified 방식). 칸에 자리가 있으면 안쪽에 이름과 값(420조원 처럼 만·억 단위)을 적고, 좁으면 말줄임(…)이나 생략합니다. 칸 사이는 2px 띄웁니다.

한 단계 묶음 + 등락률 색

시리즈 하나가 묶음(업종) 하나이고, 점은 { x: 이름, y: 크기, change: 등락률 } 입니다. colorBy: 'change' 면 change 로 칠합니다. 0은 회색, 오르면 한 색, 내리면 다른 색으로 갈수록 진해집니다. deltaColors: 'korea' 는 증권 앱처럼 빨강 상승·파랑 하락, 기본 'semantic' 은 좋음 초록·나쁨 빨강입니다(deltaUpIsGood: false 면 반대).

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'treemap',
  title: '업종별 시가총액',
  subtitle: '등락률 · 예시 데이터',
  colorBy: 'change',
  deltaColors: 'korea',
  unit: '원',
  data: {
    series: [
      { name: '반도체', data: [{ x: '삼성전자', y: 420e12, change: 1.8 }, { x: 'SK하이닉스', y: 140e12, change: 3.2 }, { x: '한미반도체', y: 12e12, change: -2.1 }] },
      { name: '자동차', data: [{ x: '현대차', y: 52e12, change: -0.6 }, { x: '기아', y: 41e12, change: -1.4 }, { x: '현대모비스', y: 22e12, change: 0.4 }] },
      { name: '바이오', data: [{ x: '삼성바이오로직스', y: 58e12, change: 0.9 }, { x: '셀트리온', y: 39e12, change: -2.7 }] },
      { name: '금융', data: [{ x: 'KB금융', y: 32e12, change: 0.2 }, { x: '신한지주', y: 25e12, change: 0 }, { x: '하나금융', y: 17e12, change: -0.3 }] },
    ],
  },
});

가장 큰 |등락률|이 가장 진한 색입니다. 시장 지도처럼 ±3%에서 가장 진하게 하려면 treemap: { range: 3 }. 아래 색 범례에 그 범위가 나옵니다. 묶음 이름은 묶음 위쪽에 적고, 툴팁은 묶음·이름·값·전체 대비 비율·등락률을 보여 줍니다.

묶음 없이

labels 와 숫자 배열 하나면 됩니다. 칸마다 기본 팔레트 순서대로 색이 붙습니다(8개를 넘으면 회색).

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'treemap',
  title: '채널별 매출 비중',
  unit: '원',
  data: {
    labels: ['검색', 'SNS', '직접 방문', '제휴', '이메일', '기타'],
    series: [{ name: '매출', data: [52e6, 31e6, 22e6, 12e6, 6e6, 2e6] }],
  },
});
옵션기본값설명
colorBy'series''series': 묶음마다(묶음이 없으면 칸마다) 색. 'change': change 로 두 색 + 회색 0
deltaColors'semantic''korea': 빨강 상승·파랑 하락
deltaUpIsGoodtruesemantic 색에서 오름이 좋은지
treemap.range가장 큰 |change|가장 진한 색이 되는 등락률(%)
heatmap.legendtruecolorBy: 'change' 의 색 범례