기초튜토리얼 [Wijmo 시작하기] FlexChart 사용법 - 기본기능편
페이지 정보
작성자 GCK루시
작성일 2022-12-20 16:27 조회 493회
댓글 0건
본문
관련링크
Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.
Wijmo에는 다양한 기능과 함께 확장성이 높은 차트 컨트롤인 'FlexChart(플렉스차트)'가 포함되어 있습니다. 이번 포스팅에서는 FlexChart의 기본 사용법을 소개하도록 하겠습니다.
목차
- 개발 환경 준비 및 Wijmo 참조
- 세로 막대형 차트 만들기
1) 누적 세로 막대형 차트로 변경하기
2) 꺾은선형 차트를 추가하여 다중 차트 만들기 - 조건부 서식 설정
- 마치며
개발 환경 준비 및 Wijmo 참조
이번 포스팅에서는 아래 개발 환경을 사용하였습니다.
FlexChart를 사용하는 방법은 매우 간단하며 아래 세 가지 파일을 준비해주시면 됩니다.
index.html |
페이지 메인. 페이지의 요소로 FlexChart를 배치합니다. |
app.js |
FlexChart의 데이터 표시 등 다양한 기능을 구현하기 위한 코드를 입력합니다. |
data.js |
FlexChart에 표시할 데이터를 나열합니다. |
FlexChart를 사용하는 데 필요한 Wijmo 모듈 등에 대한 참조 설정은 "index.html"에서 수행됩니다. FlexChart의 각종 설정을 구현하는 "app.js"와 표시할 데이터를 설정하는 "data.js"의 참조도 추가합니다.
또한 FlexChart를 표시하는 영역을 <div> 태그로 정의합니다. 이번에는 ID 속성에 "Wijmo_FlexChart"를 설정했습니다.
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FlexChart 시작하기</title>
<link href="css/wijmo.min.css" rel="stylesheet"/>
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.chart.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ko.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/data.js"></script>
</head>
<body>
<div id="Wijmo_FlexChart"></div>
</body>
</html>위와 같이 직접 프로젝트에 모듈을 배치하는 방법 이외에 CDN에서 참조하거나 NPM 패키지를 사용할 수도 있습니다.
세로 막대형 차트 만들기
FlexChart는 80개 이상의 차트 서식을 지원하는 컨트롤이지만, 이번에는 기본적인 세로 막대 그래프를 작성해보도록 하겠습니다. "app.js"와 "data.js"에 다음과 같은 코드를 입력해, 각 제품의 전년도 및 예상 매출을 표시해보겠습니다.
//app.js
document.addEventListener("DOMContentLoaded", function () {
let flexChart = new wijmo.chart.FlexChart('#Wijmo_FlexChart',{
header: '실적',
itemsSource: getData(),
bindingX: '제품',
series: [
{
binding: '전년도 매출',
name: '전년도 매출'
},
{
binding: '예상 매출',
name: '예상 매출'
},
],
});
});
// data.js
function getData() {
return[
{'제품': '제품A', '전년도 매출': 1000000, '예상 매출': 800000, '이익': 500000},
{'제품': '제품B', '전년도 매출': 500000, '예상 매출': 600000, '이익': 300000},
{'제품': '제품C', '전년도 매출': 900000, '예상 매출': 800000, '이익': 400000},
{'제품': '제품D', '전년도 매출': 1600000, '예상 매출': 1800000, '이익': 900000},
{'제품': '제품E', '전년도 매출': 1200000, '예상 매출': 1100000, '이익': 500000},
{'제품': '제품F', '전년도 매출': 1000000, '예상 매출': 900000, '이익': 600000},
{'제품': '제품G', '전년도 매출': 1500000, '예상 매출': 1200000, '이익': -200000},
{'제품': '제품H', '전년도 매출': 1100000, '예상 매출': 1000000, '이익': -100000},
];
}FlexChart에서 설정하고 있는 속성의 기능은 다음과 같습니다.
header |
차트의 제목을 나타내는 문자열 |
itemsSource |
차트의 데이터 |
binding |
X축 값에 해당하는 필드 이름 |
series |
차트 계열 (여기에서는 막대기를 나타냅니다) |
FlexChart의 itemsSource 속성에 "data.js"에서 정의한 getData 메서드의 반환값(JSON 형식의 데이터)을 전달하여 차트에 데이터를 설정합니다. series 속성은 차트 계열이며 binding 속성은 막대 값(Y축 값)에 해당하는 필드 이름을 설정합니다.
Visual Studio Code에서 "index.html"을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server를 선택하면 브라우저에 다음과 같은 세로 막대형 차트가 표시됩니다.
1) 누적 세로 막대형 차트로 변경
작성한 세로 막대 그래프에서는 전년도 매출과 예상 매출의 막대가 옆으로 나란히 표시되어 있지만, 이것을 세로로 쌓아 누적 세로 막대 그래프로 변경해보도록 하겠습니다.
설정은 매우 간단합니다. "app.js"에서 FlexChart의 "stacking"속성을 "Stacking.Stacked"로 설정하면 됩니다.
또, Y축의 눈금에 표시되고 있는 수치의 자리 수가 많아 보기 어렵기 때문에, 아래와 같이 설정하여 조금 더 보기 편하게 표시해 줍니다.
- "format" 속성에 "n0," 을 설정해 천원 단위의 서식으로 변경합니다.
- "min / max" 속성을 이용하여 Y축의 범위와 눈금의 단위를 변경합니다.
- "position" 속성을 "None"으로 설정하여 범례를 숨김 처리합니다.
// app.js
stacking: wijmo.chart.Stacking.Stacked,
axisY: {
axisLine: true,
format: 'n0,',
min: 0,
max: 4000000,
title: '매출액(천원)'
},
legend: {
// 범례 숨기기
position: wijmo.chart.Position.None
},세로 막대형 차트가 다음과 같은 누적 세로 막대형 차트로 변경됩니다.
2) 꺾은선형 차트를 추가하여 다중 차트 만들기
이번에는 매출의 누적 세로 막대형 차트에 제품별 이익을 나타내는 꺾은선형 차트를 추가하여 다중 차트를 만들겠습니다.
① 먼저 이익에 해당하는 Y2 축을 차트의 오른쪽에 배치하도록 지정합니다.
② 그 다음 꺾은선 그래프에 대한 차트 계열을 series 속성에 추가합니다.
③ 차트 계열을 꺾은선 그래프로 만들기 위해 chartType 속성을 ChartType.LineSymbols로 설정합니다.
④ 마지막으로 추가한 차트 계열의 axisY 속성에 앞서 만든 Y2 축(axisY2)을 할당합니다.
// app.js
document.addEventListener("DOMContentLoaded", function () {
let axisY2 = new wijmo.chart.Axis(wijmo.chart.Position.Right);
axisY2.title = '이익';
axisY2.axisLine = true;
axisY2.format = 'n0,';
axisY2.min = -400000;
axisY2.max = 1200000;
let flexChart = new wijmo.chart.FlexChart('#Wijmo_FlexChart',{
・・・（생략）
series: [
{
binding: '전년도 매출',
name: '전년도 매출'
},
{
binding: '예상 매출',
name: '예상 매출'
},
{
binding: '이익',
name: '이익',
chartType: wijmo.chart.ChartType.LineSymbols,
symbolSize: 20,
style:{
strokeWidth: 5
},
axisY: axisY2
}
],
・・・（생략）
});
});
조건부 서식 설정
FlexChart에서는 그래프 표시의 다양한 요건을 실현하는 기능이 다수 포함되어 있지만, 이번에는 데이터의 값에 따라 차트 요소의 스타일을 변경하는 조건부 서식을 소개하도록 하겠습니다.
아래 코드는 꺾은선형 차트의 데이터 포인트(이익)가 마이너스(적자)인 경우 해당 데이터 포인트의 색상을 빨간색으로 변경하는 코드입니다.
itemFormatter 속성에 설정된 코드의 첫 번째 if 문에서는 꺾은선형 차트의 데이터 포인트와 테두리의 색상을 변경합니다. 두 번째 if 문에서는 이익이 마이너스가 되는 제품 매출의 막대 테두리 색상과 선 두께를 변경합니다.
이와 같이 itemFormatter 속성을 이용하면 해당하는 차트 계열의 스타일 뿐만 아니라, 같은 위치에 있는 다른 차트 계열의 스타일도 변경할 수 있기 때문에 매우 편리하게 개발할 수 있습니다.
//app.js
document.addEventListener("DOMContentLoaded", function () {
・・・（생략）
let flexChart = new wijmo.chart.FlexChart('#Wijmo_FlexChart',{
・・・（생략）
itemFormatter: (engine, hitTestInfo, defaultRenderer) => {
var ht = hitTestInfo;
if (ht.series.name == '이익' && ht.y < 0) {
engine.fill = 'red';
engine.stroke = 'red';
};
if(ht.series.name == '전년도 매출' || ht.series.name == '예상 매출'){
var chart = ht.series.chart;
var items = chart.collectionView.items;
if(items[ht.pointIndex]['이익'] < 0){
engine.stroke = 'red';
engine.strokeWidth = 5;
}
}
defaultRenderer();
}
});
});
이번에 소개한 각종 설정은 아래 샘플에서도 확인할 수 있습니다.
마치며
이번에는 Wijmo의 FlexChart의 기본적인 사용법을 소개했습니다. FlexChart는 비즈니스 애플리케이션에 요구되는 다양한 차트 유형과 기능을 지원하고 있습니다. 어플리케이션에서의 데이터 시각화가 필요하실 때 Wijmo FlexChart를 이용하여 더욱 편리하고 빠르게 개발해보시기 바랍니다.
다음 포스팅에서는 FlexChart 기본 기능 2편을 소개하도록 하겠습니다.
다음 시리즈 글도 기대해주세요!
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
