시작하기

간단한 설정으로 피벗을 생성하는 방법을 안내한다.

설치 가이드에 따라 모듈과 CSS를 준비했다면, 아래 예제를 통해 피벗을 생성할 수 있다. 순서는 DataSet → CubeManager → Control이다. 자세한 API는 개발 가이드를 참고한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>RealPivot2 - Tutorial</title>
    <!-- [1] 라이선스, 라이브러리, 스타일 로드 -->
    <script type="text/javascript" src="./lib/realpivot2-lic.js"></script>
    <script type="text/javascript" src="./lib/realpivot2.min.js"></script>
    <link href="./styles/realpivot2-style.css" rel="stylesheet" />
  </head>
  <body>
    <!-- [2] 피벗을 표시할 영역과 크기 지정 -->
    <div id="pivot" style="width: 100%; height: 480px;"></div>
    <script type="text/javascript">
      (async () => {
        // [3] 원본 행 데이터 준비
        const rows = [
          { 국가: '한국', 차종: '승용', 판매수량: 12 },
          { 국가: '한국', 차종: 'SUV', 판매수량: 8 },
          { 국가: '미국', 차종: '승용', 판매수량: 15 },
          { 국가: '미국', 차종: 'SUV', 판매수량: 10 },
        ];
 
        // [4] 필드 이름과 자료형을 정의하고 DataSet 생성
        const ds = await RealPivot2.createDataSet([
          {
            name: 'sales',
            source: rows,
            table: {
              fields: [
                { name: '국가', type: 'text' },
                { name: '차종', type: 'text' },
                { name: '판매수량', type: 'number' },
              ],
            },
          },
        ]);
 
        // [5] 차원과 측정값을 정의하고 CubeManager 생성
        const cm = RealPivot2.createCubeManager(ds, [
          {
            name: 'sales',
            table: 'sales',
            schema: {
              dimensions: [
                { name: '국가', type: 'str' },
                { name: '차종', type: 'str' },
              ],
              measures: [
                { name: '판매수량', type: 'f64', aggregate: 'sum' },
              ],
            },
          },
        ]);
 
        // [6] 컨테이너에 피벗 컨트롤 생성
        RealPivot2.createControl(document, 'pivot', cm, {
          tables: {
            name: 'sales',
            title: '첫 번째 RealPivot2',
            cube: 'sales',
            // [7] 행·열·값에 필드 배치
            fields: {
              rows: ['국가'],
              columns: ['차종'],
              values: ['판매수량'],
            },
          },
        });
      })();
    </script>
  </body>
</html>

코드 설명

코드의 [1]~[7] 주석은 아래 설명에 대응한다.

라이브러리 준비 — 라이선스 파일과 RealPivot2 스크립트, CSS를 로드한다. 파일 경로는 프로젝트 구성에 맞게 지정한다. 자세한 내용은 설치를 참고한다.
표시 영역 지정 — id="pivot"인 컨테이너를 만들고 너비·높이를 지정한다. 이 ID를 createControl에 전달한다. 자세한 내용은 createControl을 참고한다.
원본 데이터 준비 — 객체 배열의 각 항목이 데이터 한 행이다. 이 예제는 국가·차종별 판매수량을 사용한다. 자세한 내용은 데이터와 큐브를 참고한다.
DataSet 생성 — source에 행 배열을 전달하고 table.fields에 필드 이름과 자료형을 정의한다. 비동기 함수이므로 await로 완료를 기다린다. 자세한 내용은 DataSet을 참고한다.
CubeManager 생성 — DataSet의 sales 테이블을 참조해 분류 기준인 차원(국가, 차종)과 집계 대상인 측정값(판매수량)을 정의한다. aggregate: 'sum'은 합계 집계이다. 자세한 내용은 Cube를 참고한다.
피벗 컨트롤 생성 — 컨테이너 ID, CubeManager, 북 설정을 전달해 화면을 만든다. tables.cube는 앞에서 등록한 큐브 이름을 참조한다. 자세한 내용은 피벗 북을 참고한다.
필드 배치 — rows에 국가, columns에 차종, values에 판매수량을 배치해 국가·차종별 판매수량 합계를 표시한다. 자세한 내용은 필드 구성을 참고한다.

시작하기

코드 설명

See Also