3. 간단하게 피벗 그리드 생성해 보기(Quick Start)

이 문서는 AUIPivot를 처음 사용하는 개발자를 위한 가장 간단하면서도 완성된 형태의 사용 예제입니다. HTML 구조 작성부터, 피벗 그리드 출력, 원시 데이터(JSON 데이터) 로딩까지 순차적으로 작성합니다.

처음 시작한다면 비상업용 CDN 안내의 HTML 시작 예제로 별도 데이터 파일 없이 실행할 수 있습니다.

localhost, 127.0.0.1 외의 접속 도메인이나 IP에서는 30일 평가판을 제공합니다. 정품과 동일한 기능으로 사전 평가, 적합성 검토(PoC), 테스트에 사용할 수 있습니다. 평가판 사용 안내를 확인하세요.

3.1 기본 HTML 구조

AUIPivot 라이선스, 언어 파일, 엔진, CSS와 자동차 판매 JSON을 배치합니다. 웹 서버에서 이 페이지를 열면 원본 데이터를 불러와 보고서를 생성합니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8" />
    <title>AUIPivot Quick Start</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 피벗 화면 스타일 -->
    <link rel="stylesheet" href="./AUIPivot/AUIPivot_style.css" />
    <!-- 라이선스와 언어를 엔진보다 먼저 로드합니다. -->
    <script src="./AUIPivot/AUIPivotLicense.js"></script>
    <script src="./AUIPivot/messages/AUIPivot.messages.kr.js"></script>
    <script src="./AUIPivot/AUIPivot.js"></script>

    <script>
        // AUIPivot 생성 후 반환 ID
        let myPivotID;

        // DOMContentLoaded: HTML 완료 시점에 실행
        document.addEventListener("DOMContentLoaded", () => {

            // 피벗 속성 설정
            const pivotProps = {
                // layoutType : table 방식은 행 필드로 지정된 필드들이 개별적으로 각각 칼럼의 요소가 되어 출력됨.
                layoutType: "table"
            };

            // 실제로 #pivot_wrap 에 피벗 그리드 생성
            myPivotID = AUIPivot.create("#pivot_wrap", pivotProps);

            // 원시 데이터 요청
            fetch("./data/car_sales.json").then(response => {
                if (!response.ok) throw new Error("HTTP error " + response.status);
                return response.json();
            }).then(data => {
                // 피벗 그리드 해당 데이터로 초기화 및 피벗팅 시작
                initPivotData(data);
            }).catch(error => {
                alert("데이터 요청 실패: " + error.message);
            });
        });

        //피벗 그리드 해당 데이터로 초기화 및 피벗팅 시작
        function initPivotData(data) {
            // 행 필드
            AUIPivot.setRowFields(myPivotID, ["REGION", "NAME", "MODEL"]);
            // 열 필드
            AUIPivot.setColumnFields(myPivotID, ["DATE_HALF", "DATE_QTR", "DATE_MONTH"]);
            // 값 필드
            AUIPivot.setValueFields(myPivotID, [{ "dataField": "TOTAL", "operation": "SUM" }]);
            // 필터 필드, 원하면 주석 제거
            //AUIPivot.setFilterFields(myPivotID, ["COLOR"]);
            // 데이터 중 날짜 필드를 명시하여 연, 반기, 분기 등으로 나눠 표시하도록 지시
            AUIPivot.setDateTypeField(myPivotID, "DATE");
            // 피봇그리드에 데이터 삽입
            AUIPivot.setGridData(myPivotID, data);
        }
    </script>
</head>

<body>
    <h1>AUIPivot Quick Start</h1>
    <!-- 에이유아이 피벗 그리드가 이곳에 생성됩니다. -->
    <div id="pivot_wrap" style="width:1200px;height:600px;"></div>
</body>

</html>

파일 구성은 설치 안내를 참고하세요. JSON은 HTTP(S)로 제공해야 하며 파일을 직접 여는 방식에서는 fetch가 제한될 수 있습니다.

3.2 주요 요소 설명

구성	설명
AUIPivotLicense.js	AUIPivot 라이선스 등록 파일 (필수)
AUIPivot.js	AUIPivot 피벗 엔진과 화면을 제공하는 파일 (필수)
AUIPivot.messages.kr.js	AUIPivot 메세지 파일 JS (원하는 언어로 변경 가능) (필수)
AUIPivot_style.css	AUIPivot 필터, 필드 패널 등 UI 스타일 (필수)
pivotProps	피벗 속성 정의 객체 (선택). 자세한 속성에 대한 내용은 여기 문서를 클릭하세요.
AUIPivot.setGridData()	피벗 원시 데이터 삽입 메소드 (필수). 구체적 메소드에 대한 내용은 여기 문서를 클릭하세요.
AUIPivot.bind()	피벗 이벤트 정의 바인딩 메소드 (선택). 구체적 이벤트에 대한 내용은 여기 문서를 클릭하세요.
AUIPivot.create()	실제 피벗 그리드 생성 함수 (필수)
fetch().then()	외부 JSON 파일로부터 비동기 데이터 로딩

3.3 생성 완료 후 판단

• 단일 HTML 파일로 빠르게 테스트 가능
• 외부 프레임워크 없이 기본적인 AUIPivot 실행 확인
• JSON 데이터는 ./data/car_sales.json에 존재해야 함

3.4 설치 후 테스트

웹 서버에서 위 HTML 페이지를 열어 결과 화면을 확인하세요. 에러 없이 피벗 그리드가 나타나면 성공입니다.

3.5 최종 확인 라이브 샘플

다음 링크에서 확인 가능합니다.

https://www.auisoft.net/blog/auipivot/quick_start.html