Area Chart Sample
데이터
서버 일일 네트워크 사용량 데이터를 활용합니다.
차트의 의도
영역 차트와 라인차트를 동시에 활용하여 각 서버의 네트워크 사용량과 CPU 지표를 표현해보았습니다.
서버 네트워크 사용량에는 한계점이 존재하기 때문에 한계점을 표시할 수 있는 가이드 라인 활용했습니다.
한계점을 넘은 데이터는 포인트를 강조할 수 있는 pointStyleCallback을 적용시켰습니다.
라인 차트
라인 차트를 활용해서 특정 지표와 데이터의 흐름을 파악할 수 있습니다.
이번 예제에서는 서버의 네트워크 사용량과 더불어 동시에 CPU 상태의 흐름을 표기하였습니다.
영역 차트
영역 차트를 활용하면 시간에 따른 특정 데이터의 구성비나 흐름을 파악하기에 용이합니다.
흐름이나 트렌드 등을 나타내는 차트 종류를 활용할 경우 가이드라인을 활용하면 한계치, 목표치 등을 용이하게 표시할 수 있습니다.
가이드라인 & pointStyleCallback
- xAxis (opens in a new tab), yAxis (opens in a new tab)를 사용하는 차트는 한계점이나, 목표점을 표시할 수 있는 가이드 라인을 표시할 수 있습니다.
- 시리즈에
pointStyleCallback통해 특정 마커에 색상을 동적으로 적용시킬 수 있습니다.
const config = {
type: "area",
title: "Guide, pointStyleCallback Area Chart",
xAxis: {
type: 'category',
},
yAxis: {
guide: [{
type: 'line', // 라인 가이드 설정
value: 5,
label: 'line guid',
style: {
stroke: 'red',
}
}, {
type: 'range', // 범위 가이드 설정
start: 5,
end: 6,
label: 'range guid'
}]
},
series: [{
name: 'series',
marker: true,
data: [1, 3, 5, 7, 9, 10],
pointStyleCallback: (args: any) => {
// y축 데이터가 5가 넘을경우 포인트 마커를 빨갛게 표시
if (args.yValue > 5) return {
fill: 'red',
stroke: 'red',
}
},
}]
}
const chart = RealChart.createChart(document, 'realchart', config); // 차트 초기설정가이드 & pointStyleCallback 적용
위 설정 예시로 아래 차트에 3가지 사항을 적용시켰습니다.
- y축에 5 값에 가이드 라인 지정
- y축에 5~6 범위값에 범위 가이드 라인 지정
- y축 데이터가 5를 초과할경우 pointStyelCallback을 통하여 빨간색 마커로 표시