AUISoft
AUIPivot 2.6 Documentation

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

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

3.1 기본 HTML 구조

<!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" />

    <!-- AUIPivot 라이센스 파일입니다. 그리드 출력을 위해 꼭 삽입하십시오. -->
    <script type="text/javascript" src="./AUIPivot/AUIPivotLicense.js"></script>

    <!-- AUIPivot 라이브러리 메인 JS -->
    <script type="text/javascript" src="./AUIPivot/AUIPivot.js"></script>

    <!-- AUIPivot 메세지 파일 JS (원하는 언어로 변경 가능) -->
    <script type="text/javascript" src="./AUIPivot/messages/AUIPivot.messages.kr.js"></script>

    <!-- AUIPivot CSS 테마 파일 (원하는 테마로 변경 가능) -->
    <link rel="stylesheet" href="./AUIPivot/AUIPivot_style.css" />

    <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>

3.2 주요 요소 설명

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

3.3 생성 완료 후 판단

3.4 설치 후 테스트

위 HTML 파일을 브라우저로 열어 결과 화면을 확인하세요. 에러 없이 피벗 그리드가 나타나면 성공입니다.

3.5 최종 확인 라이브 샘플

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

https://www.auisoft.net/blog/auipivot/quick_start.html
⚠️ 주의: 이 예제는 복사하여 바로 실행할 수 있는 구조이지만, fetch 경로에 맞는 JSON 파일이 반드시 존재해야 합니다.