Pie & Bar Chart Sample
데이터
각 분야별 기관수 데이터를 활용합니다.
RealChart 0.9.19
차트의 의도
같은 데이터 이지만 파이 차트를 사용해서 비율을, 또 순위별로 나타내기 위해 막대 차트를 사용했습니다.
파이차트는 같은 데이터에서 비율 데이터로, 막대차트는 순위별로 기관 수 데이터로 표현했습니다.
파이 차트
파이 차트는 전체 대비 부문별 구성 비율을 볼때 용이한 차트입니다.
아래의 시리즈 설정으로 파이 차트를 생성할 수 있습니다.
const pieConfig = {
xAxis: {},
yAxis: {},
series: {
type: 'pie',
legendByPoint: true,
radius: '25%',
data: [
{ name: "수질일반", y: 16.25, sliced: true },
{ name: "축산", y: 11.58 },
{ name: "식품", y: 11.25 },
{ name: "대기", y: 9.93 },
{ name: "폐수", y: 9.93 },
{ name: "정수기", y: 6.95 },
{ name: "농약", y: 6.29 },
{ name: "악취", y: 4.30 },
{ name: "실내공기", y: 2.31 },
{ name: "용역", y: 2.31 },
{ name: "폐기물", y: 2.31 },
{ name: "노로바이러스", y: 1.98 },
{ name: "etc...", y: 14.57 }
],
};
}
const chart = RealChart.createChart(document, 'realchart', pieConfig);막대 차트
막대 차트는 여러 범주의 값을 비교할 때 용이한 차트입니다.
이번 막대 차트에 사용했던 유용한 속성 중 예시로 x, y축 데이터를 뒤바꿔서 표현하고 싶은경우 inverted 속성을 활용해보았습니다.
막대차트 & Inverted 설정
export const invertedConfig = {
xAxis: {
title: "분야"
},
yAxis: {
title: "분야별 기관 수",
},
inverted: true, // x, y축 바꾸기
series: [{
name: 'bar',
data: [
["협력업체", 1],
["해양수질", 1],
["해양저질", 1],
["일반", 1],
["잔류농약", 1],
["저수조", 1],
["농산물", 1],
["먹는물", 1],
["수질", 2],
["위생용품", 2],
["오폐수", 2],
["학교", 2],
["현황/평가", 2],
["혈액투석수", 2],
["수질자가", 3],
["전기/전자", 4],
["토양", 4],
["비료", 4],
["소음진동", 4],
["화장품", 5]
]
}]
}
const chart = RealChart.createChart(document, 'realchart', invertedConfig);