HeatmapChart Sample
데이터
서울특별시 온도별 데이터를 활용합니다.
https://www.weather.go.kr/w/obs-climate/land/past-obs/obs-by-element.do (opens in a new tab)
RealChart 0.9.19
차트의 의도
서울 특별시 최저 & 최고 온도를 년도별로 변화점을 보여주기 위해 막대 영역 차트를 활용해보았습니다.
막대 영역차트를 마스터 데이터, 히트맵 차트를 디테일 데이터 형태로 표현하였습니다.
막대 영역 차트의 각 시리즈 데이터 부분을 클릭하면 히트맵 차트에서 년도의 주차별 평균 온도에 대한 디테일 데이터를 확인할 수 있습니다.
막대 영역 차트
막대 영역 차트를 사용하면 최소값과 최대값의 범위를 동시에 표현하기 용이합니다.
막대 차트에서 onPointClick 이벤트를 활용해서 시리즈를 클릭하면 다른 차트에 클릭한 시리즈의 디테일 데이터가 반영되도록 설정했습니다.
const waterfallConfig = {
title: "서울 년도별 최저 & 최고 온도",
options: {},
"xAxis": {},
"yAxis": {},
"series": {
onPointClick: (args) => {
// args 인자를 통해 시리즈 데이터를 활용 가능
// 다른 차트 세팅 로직 작성
},
"type": "barrange",
"data": [
[-17.8, 34.1],
[-17.1, 36.7],
[-16.4, 33.9],
[-13.2, 35.8],
[-13, 36],
[-18, 36.6],
[-12.6, 35.4],
[-17.8, 39.6],
[-10.9, 36.8],
[-12.9, 35.4],
[-18.6, 36.5],
[-13.7, 36.1],
]
}
}
const chart = RealChart.createChart(document, 'realchart', waterfallConfig);히트맵 차트
히트맵 차트는 어떤 패턴과 변화를 표현하기에 용이한 차트입니다.
이번 예제에서는 주차별로 서울시 평균온도의 변화를 표현해보았습니다.
히트맵 차트 설정
히트맵 차트를 활용할 때 특정 데이터 범위마다 원하는 색상을 설정할 수 있습니다.
아래는 데이터는 성장률이 0% 아래인 부분은 빨간색으로 표시되도록 설정하였습니다.
export const heatmapConfig = {
name: "heatmap",
credits: {
visible: false
},
xAxis: {
categories: [
"A기업", "B기업", "C기업", "D기업"
],
grid: true,
},
yAxis: {
title: '년도별 성장률',
categories: ["2017년", "2018년", "2019년", "2020년", "2021년", "2022년"],
grid: true
},
series: {
pointLabel: true,
tooltip: {
text: '성장률:<b> ${yValue}%</b>'
},
// 히트맵 차트는 데이터가 [x, y, z] 형태로 지정되기 때문에 값은 z 기준으로 설정합니다.
viewRangeValue: 'z',
// 값이 0까지는 빨강색으로 표기합니다.
viewRanges: [
{
toValue: 0,
color: 'red'
}
],
type: 'heatmap',
data: [
// [x시리즈 위치, y시리즈 위치, 값]
[0, 0, 10], [1, 0, 5], [2, 0, 3], [3, 0, 20],
[0, 1, 12], [1, 1, 10], [2, 1, 2], [3, 1, 5],
[0, 2, 5], [1, 2, 22], [2, 2, -5], [3, 2, 20],
[0, 3, 4], [1, 3, 24], [2, 3, 1], [3, 3, 44],
[0, 4, 3], [1, 4, 26], [2, 4, 5], [3, 4, 59],
[0, 5, 2], [1, 5, 30], [2, 5, -5], [3, 5, 45],
]
}
}히트맵 차트 적용 샘플
RealChart 0.9.19
Annotation
annotation 설정을 이용하면 차트의 특정위치에 이미지나 글자를 위치시킬 수 있습니다.
이번 예제에서는 아래 이미지를 오른쪽 위에 배치시켰습니다.
Annotation 설정 예제
const anntationConfig = {
name: "bar",
title: "annotation 적용 예제",
body: {
// Image, Text, Shape 등을 특정위치에 배치합니다.
annotations: [{
type: 'image',
align: 'right',
offsetX: -5,
width: 300,
imageUrl: '/images/colors.png',
}],
},
xAxis: {
},
yAxis: {
},
series: {
viewRangeValue: 'y',
viewRanges: [
{
toValue: 2,
color: '#339AF0'
},
{
toValue: 4,
color: '#FF922B'
}
],
pointLabel: true,
type: 'bar',
data: [
[0, 1], [1, 1], [2, 3], [3, 3], [4, 4]
]
}
}