chart
English시작하기

문서 › 차트 종류

히트맵

요일×시간처럼 두 범주의 격자를 한 색의 진하기로.

type: 'heatmap' 는 시리즈 하나가 한 줄(행), labels 가 열입니다. 값이 클수록 진한 한 가지 색(순차 색)으로 칠하고, 아래에 색 범례(최소~최대)를 붙입니다. 칸 사이는 2px 띄웁니다. 열이 12개 이하이고 칸이 충분히 크면 칸 안에 값을 적습니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'heatmap',
  title: '요일·시간대별 주문',
  unit: '건',
  data: {
    labels: ['9시', '10시', '11시', '12시', '13시', '14시', '15시', '16시', '17시', '18시'],
    series: [
      { name: '월', data: [12, 18, 25, 41, 38, 30, 27, 24, 20, 15] },
      { name: '화', data: [10, 16, 22, 39, 36, 29, 25, 23, 19, 14] },
      { name: '수', data: [11, 17, 24, 40, 37, 31, 26, 22, 21, 16] },
      { name: '목', data: [13, 19, 26, 43, 40, 33, 28, 25, 22, 17] },
      { name: '금', data: [15, 21, 29, 47, 44, 36, 33, 31, 30, 28] },
      { name: '토', data: [22, 31, 42, 55, 58, 52, 48, 45, 41, 37] },
      { name: '일', data: [25, 34, 45, 57, 60, 54, 49, 44, 38, 30] },
    ],
  },
});
  • 밝은 테마에서는 옅은 색 → 진한 색, 어두운 테마에서는 배경에 가까운 색 → 밝은 색입니다. 값의 크기가 늘 배경과의 대비로 읽힙니다.
  • null 은 빈 칸(격자 색)으로 남깁니다. 툴팁에는 –.
  • 키보드: 좌·우 화살표는 한 줄 안에서, 위·아래 화살표는 다음 줄로 옮깁니다.
  • 데이터 표와 CSV 도 화면과 같이 한 줄에 한 시리즈입니다.
옵션기본값설명
heatmap.min / max데이터 범위(모두 양수면 0부터)색 범위의 양 끝
heatmap.color첫 시리즈 색색의 기준
heatmap.legendtrue아래 색 범례
heatmap.labels열 12개 이하면 true칸 안의 값