[Wijmo 시작하기] FlexChart 사용법 - 기본기능편(2) > 온라인 스터디

기초튜토리얼 [Wijmo 시작하기] FlexChart 사용법 - 기본기능편(2)

추천0

페이지 정보

작성자 MESCIUS루시

작성일 2023-01-03 13:47 조회 512회 댓글 0건

검색

본문

관련링크

Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.

Wijmo에는 다양한 기능과 함께 확장성이 높은 차트 컨트롤인 'FlexChart(플렉스차트)'가 포함되어 있습니다. FlexChart라는 이름은 FlexChart 컨트롤의 명칭인 동시에 차트를 구성하는 복수의 컨트롤의 총칭으로도 사용됩니다.

이전 편의 「기본기능편(1)」에서는, FlexChart 컨트롤의 범용적인 기능을 소개했으나 이번 포스팅에서는 차트 컨트롤 중 하나인 FlexPie 컨트롤을 사용해 원형 차트와 도넛 차트를 구현하는 방법을 소개하도록 하겠습니다.

개발 환경 준비 및 Wijmo 참조
원형 차트 만들기
1) 원형 차트 사용자 정의
- 데이터 정렬
- 구성 비율 표시
도넛 차트 만들기
1) 애니메이션 설정
마치며

개발 환경 준비 및 Wijmo 참조

이번 포스팅에서도 전 편과 동일한 개발 환경을 사용하였습니다.

사용할 파일은 이전과 같이 아래 3개 파일을 사용하나 컨트롤 이름이 FlexChart에서 FlexPie로 바뀝니다. FlexPie는 앞에서 언급했듯이 원형 차트와 도넛 차트 전용 컨트롤입니다.

index.html	페이지 메인. 페이지 요소로 FlexPie를 배치합니다.
app.js	FlexPie의 데이터 표시 등 다양한 기능을 구현하기 위한 코드를 입력합니다.
data.js	FlexPie에 표시할 데이터를 나열합니다.

FlexPie를 사용하는 데 필요한 Wijmo 모듈 등에 대한 참조 설정은 "index.html"에서 수행됩니다. FlexPie의 각종 설정을 구현하는 "app.js"와 표시할 데이터를 설정하는 "data.js"의 참조도 추가합니다.

<!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_FlexPie" style="height: 600px; width: 800px"></div>
</body>

</html>

원형 차트 만들기

이제 app.js와 data.js에 다음과 같은 코드를 작성하여 원형 차트를 만듭니다. 여기에서 만드는 원형 차트는 제품별 판매 수량을 표시합니다.

//app.js

document.addEventListener("DOMContentLoaded", function () {
    // 데이터 할당
    const data = getData();

    // 원형 차트 생성
    const flexPie = new wijmo.chart.FlexPie('#Wijmo_FlexPie',{
        header: '판매 구조',
        itemsSource: data,
        binding: '판매수량',
        bindingName: '제품',
        dataLabel: {
            content: '{name}: {value:n0}'
        },
        startAngle: 90,
    });
});

//data.js
function getData() {
      return[
        {'제품': '제품A', '판매수량': 1000000},
        {'제품': '제품B', '판매수량': 500000},
        {'제품': '제품C', '판매수량': 900000},
        {'제품': '제품D', '판매수량': 1600000},
        {'제품': '제품E', '판매수량': 1200000},
    ];
}

flexPie 객체에 설정된 속성의 기능은 다음과 같습니다.

header	원형 차트의 제목을 나타내는 문자열
itemsSource	원형 차트를 만드는 데이터
binding	세그먼트 크기에 해당하는 필드 이름
bindingName	세그먼트 이름에 해당하는 필드 이름
dataLabel	세그먼트에 표시할 문자열 서식
startAngle	세그먼트의 시작 위치

flexPie 객체의 itemsSource 속성에 "data.js"로 정의한 getData 메서드의 반환값(JSON 형식의 데이터)을 전달하여 원형 차트에 데이터를 설정합니다.

원형 차트의 각 세그먼트의 중심각(설정 값에서 자동으로 계산됨)과 binding 및 bindingName 속성에 표시할 세그먼트 이름에 해당하는 필드의 이름을 지정합니다. 그리고 dataLabel 속성은 세그먼트에 실제로 표시되는 문자열 형식을 설정합니다.

또한 startAngle 속성을 사용하여 첫 번째 세그먼트의 시작 위치를 지정할 수 있습니다. 기준 위치는 동서남북을 기준으로 서쪽 위치이고 기본값은 0도이며 세그먼트는 서쪽 위치에서 시작됩니다. 여기서 90도로 설정하면 북쪽 위치에서 시작합니다. 자세한 내용은 제품 도움말을 참조해주시기 바랍니다.

'원형 차트' 도움말 보기

Visual Studio Code에서 index.html을 마우스 오른쪽 단추로 클릭하고 Open with Live Server를 선택하면 브라우저에 다음과 같은 원형 차트가 표시됩니다.

원형 차트 사용자 정의

일반적인 원형 차트에서 각 세그먼트는 내림차순으로 정렬됩니다. 원형 차트의 목적은 전체 값에서 각 세그먼트의 구성 비율을 직관적으로 보여주는 것입니다. 따라서 이번 포스팅에서는 이러한 조건을 충족하는 원형 차트를 만들어 볼 예정입니다

데이터 정렬

먼저 큰 세그먼트들부터 정렬되도록 변경합니다. FlexPie 컨트롤에는 데이터를 정렬하는 기능이 없기 때문에, itemsSource 속성에 JSON 형식의 데이터를 미리 정렬해줍니다.

//app.js

・・・（생략）

// 데이터 가져오기 및 정렬
const data = getData();
data.sort(compare);

function compare( a, b ){
    let r = 0;
    if( a.판매수량 < b.판매수량){ r = -1; }
    else if( a.판매수량> b.판매수량){ r = 1; }
    return ( -1 * r );
}

・・・（생략）

원형 차트의 세그먼트 순서는 다음과 같이 변경됩니다.

구성 비율 표시

처음에 만든 원형 차트에서는 각 세그먼트에 '제품 이름'과 '매출 수'를 표시했지만 '제품 이름'과 '매출 수 구성 비율'을 표시하도록 변경합니다.

이를 위해 모든 제품의 판매 수의 합계를 계산합니다. 여기서도 JSON 형식의 데이터를 사용하여 합계를 계산합니다.

//app.js

・・・（생략）
// 합계 계산
let sum = data.map(c => c.판매수량).reduce((sum, cur) => sum + cur);
// 파이차트 생성
const flexPie = new wijmo.chart.FlexPie('#Wijmo_FlexPie', {
・・・（생략）

또한 dataLabel 속성의 설정을 다음과 같이 변경하여 각 세그먼트의 구성 비율을 소수 2자리 백분율로 표시합니다.

//app.js
・・・（생략）
dataLabel: {
    // content: '{name}: {value:n0}'
    content: (ht) => {
        return `${ht.name}: ${wijmo.Globalize.format(ht.value / sum, 'p2')}`;
    }
},
・・・（생략）

원형 차트 세그먼트에 '제품 이름'과 '매출 수 구성 비율'이 표시됩니다.

도넛 차트 만들기

원형 차트를 도넛 차트로 만드는 것은 매우 간단합니다. innerRadius 및 offset 속성을 설정하기만 하면 됩니다. innerRadius 속성은 도넛의 중간에 있는 빈 반지름을 지정하고 offset 속성은 각 세그먼트의 간격을 지정합니다.

//app.js
・・・（생략）

// 도넛 차트로 변경
flexPie.innerRadius = 0.3;
flexPie.offset = 0.1;
・・・（생략）

원형 차트를 도넛 차트로 변경하면 다음과 같습니다.

여기에 두 개의 버튼을 추가하여 원형 차트와 도넛 차트를 전환해보도록 하겠습니다. 이를 위해 "index.html"의 <body> 태그를 다음과 같이 변경합니다.

<!-- index.html -->
・・・（생략）
<body>
    <div>
        <input type="radio" id="pie" name="pietype" value="pie" checked="true">
        <label for="pie">원형 차트</label>
        <input type="radio" id="donut" name="pietype" value="donut">
        <label for="donut">도넛 차트</label>
    </div>
    <br/>
    <div id="Wijmo_FlexPie" style="height: 600px; width: 800px"></div>
</body>
・・・（생략）

그런 다음 app.js에 다음 코드를 추가합니다.

//app.js

・・・（생략）
// 원형 차트
document.getElementById("pie").onclick = function () {
    flexPie.innerRadius = 0;
    flexPie.offset = 0;
};

// 도넛 차트
document.getElementById("donut").onclick = function () {
    flexPie.innerRadius = 0.3;
    flexPie.offset = 0.1;
};
・・・（생략）

이와 같이 innerRadius 및 offset 속성을 변경하여 원형 차트와 도넛 차트 간의 전환을 할 수 있습니다.

애니메이션 설정

FlexPie 컨트롤에는 전용 애니메이션 기능이 있습니다.

이 애니메이션 기능을 사용하려면 프로젝트의 scripts 폴더에 wijmo.chart.animation.min.js 파일을 추가하고 index.html 파일에 다음 태그를 추가합니다.

<!-- index.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/wijmo.chart.animation.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>
・・・（생략）

그 다음 app.js에 다음 코드를 추가하여 그래프가 표시될 때 애니메이션을 적용할 수 있습니다.

//app.js

・・・（생략）
// 애니메이션
const pieAnimation = new wijmo.chart.animation.ChartAnimation(flexPie, {
    animationMode: wijmo.chart.animation.AnimationMode.All,
    easing: wijmo.chart.animation.Easing.Swing,
    duration: 400
});
・・・（생략）

이번에 소개한 각종 설정은 아래의 샘플에서도 확인할 수 있습니다.

마치며

이번에는 Wijmo의 차트를 구성하는 컨트롤 중 하나인 FlexPie를 사용하여 원형 차트와 도넛 차트를 만들었습니다. 차트 컨트롤에서는 FlexPie를 비롯한 여러 컨트롤이 포함되어 비즈니스 애플리케이션에 필요한 다양한 차트를 만들 수 있습니다. 애플리케이션의 효과적인 데이터 시각화 도구로 Wijmo 차트를 이용하여 개발해보시기 바랍니다.

다음 포스팅에서는 데이터 관리 클래스인 "CollectionView"를 소개하도록 하겠습니다.

다음 시리즈 글도 기대해주세요!

지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!