시작하기

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>RealPivot2 - Tutorial</title>
    <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>
    <div id="pivot" style="width: 100%; height: 480px;"></div>
    <script type="text/javascript">
      (async () => {
        const rows = [
          { 국가: '한국', 차종: '승용', 판매수량: 12 },
          { 국가: '한국', 차종: 'SUV', 판매수량: 8 },
          { 국가: '미국', 차종: '승용', 판매수량: 15 },
          { 국가: '미국', 차종: 'SUV', 판매수량: 10 },
        ];
 
        const ds = await RealPivot2.createDataSet([
          {
            name: 'sales',
            source: rows,
            table: {
              fields: [
                { name: '국가', type: 'text' },
                { name: '차종', type: 'text' },
                { name: '판매수량', type: 'number' },
              ],
            },
          },
        ]);
 
        const cm = RealPivot2.createCubeManager(ds, [
          {
            name: 'sales',
            table: 'sales',
            schema: {
              dimensions: [
                { name: '국가', type: 'str' },
                { name: '차종', type: 'str' },
              ],
              measures: [
                { name: '판매수량', type: 'f64', aggregate: 'sum' },
              ],
            },
          },
        ]);
 
        RealPivot2.createControl(document, 'pivot', cm, {
          general: { title: '첫 번째 RealPivot2' },
          tables: {
            name: 'sales',
            cube: 'sales',
            fields: {
              rows: ['국가'],
              columns: ['차종'],
              values: ['판매수량'],
            },
          },
        });
      })();
    </script>
  </body>
</html>

피벗이 표시될 div 영역에 크기를 지정한 다음, 데이터·큐브·북 설정과 함께 createControl을 호출합니다.

createDataSet — 행 배열을 source 속성으로 전달합니다. (sourceUrl로 JSON 파일을 가져올 수도 있습니다.)
createCubeManager — 차원·측정값 스키마를 정의합니다.
createControl — 컨테이너 id(pivot)와 Book 설정(fields.rows / columns / values)으로 화면을 구성합니다.

createDataSet은 비동기이므로 위 예제처럼 async 함수 안에서 await로 호출해야 합니다.

시작하기

See Also