기초가이드 SpreadJS 피벗(Pivot) 테이블 만들어보기
추천0
페이지 정보
작성자 GrapeCity
작성일 21-04-13 16:57 조회 1,815회
댓글 0건
본문
첨부파일
관련링크
해당 피벗 기능은 V14 서비스 팩 1(V14.1)에서 정식 버전으로 여러분께 선보일 예정입니다. (한국, 6월 중 출시 예정)
이번 블로그 포스팅에서는 새롭게 추가된 피벗 테이블 기능을 먼저 사용해보실 수 있도록, 피벗 테이블을 생성, 세팅하는 방법을 안내합니다.
피벗 테이블 적용 화면
SpreadJS 피벗 테이블 생성 화면은 아래와 같으며, 실제 코드와 동작하는 모습을 확인해볼 수 있습니다.
기본적인 SpreadJS 라이브러리 선언
해당 샘플을 생성하기 위해, 사용할 데이터는 아래와 링크를 통해서 다운 받으실 수 있습니다.
프로젝트에 index.html을 생성한 다음 SpreadJS 라이브러리를 참조하세요. SpreadJS를 사용하기 위해 기본적인 라이브러리를 선언해 주어야 합니다. 다운 받으신 SpreadJS의 zip 파일의 압축을 푸시면, 아래의 경로에서 SpreadJS 라이브러리를 가져오실 수 있습니다.
JS 파일경로: SpreadJS.Release.xx.x.x\SpreadJS\scripts\
CSS 파일경로: SpreadJS.Release.xx.x.x\SpreadJS\css\
[HTML header 섹션]
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="gc.spread.sheets.excel2013white.css"> <script src="gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript"></script> <script src="gc.spread.sheets.resources.ko.xx.x.x.min.js" type="text/javascript"></script> <script src="gc.spread.pivot.pivottables.xx.x.x.min.js" type="text/javascript"></script> <script src="http://www.grapecity.co.kr/files/SpreadJS/sample/pivotSales.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css">
[HTML body 섹션]
스프레드시트를 위한 ss라는 id를 갖는 div 요소와 pivot(피벗) 패널을 위한 panel이라는 id를 갖는 div 요소를 만들어 줍니다.
<body> <div class="sample-tutorial"> <!-- 스프레드 시트 영역 --> <div id="ss" class="sample-spreadsheets"></div> <!-- 피벗 패널 영역 --> <div class="sample-panel"> <div id="panel"></div> </div> </div> </body>index.html 전체 코드는 아래와 같습니다.
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="gc.spread.sheets.excel2013white.css"> <script src="gc.spread.sheets.all.xx.x.x.min.js" type="text/javascript"></script> <script src="gc.spread.sheets.resources.ko.xx.x.x.min.js" type="text/javascript"></script> <script src="gc.spread.pivot.pivottables.xx.x.x.min.js" type="text/javascript"></script> <script src="http://www.grapecity.co.kr/files/SpreadJS/sample/pivotSales.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <!-- 스프레드 시트 영역 --> <div id="ss" class="sample-spreadsheets"></div> <!-- 피벗 패널 영역 --> <div class="sample-panel"> <div id="panel"></div> </div> </div> </body> </html>
피벗 기능을 구현하기 위한 주요 코드
[데이터 소스가 될 엑셀 테이블 생성하기]
SpreadJS에서 피벗 기능을 구현하기 위해서는 Excel과 마찬가지로 원본 데이터가 필요하며, 아래 코드는 두 번째 시트에 원본 데이터를 엑셀 테이블 형식으로 만드는 방법을 보여줍니다.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 }); // 렌더링 지연을 통한 성능향상 코드 spread.suspendPaint(); // [시트2] ************************ // 두번째 시트 가져오기 var sheet1 = spread.getSheet(1); // 두번째 시트이름을 DataSource로 선언 sheet1.name("DataSource"); // 두번째 행의 수를 700줄로 설정 sheet1.setRowCount(700); // 6번쨰 열 너비 설정 sheet1.setColumnWidth(5, 150); // 첨부된 샘플 데이터인 pivotSales.js로 부터 데이터를 시트 배열로 가져오기 sheet1.setArray(0, 0, pivotSales); // 시트 배열을 엑셀 테이블로 지정하고, tableSales라는 변수를 설정해줍니다. (피벗 테이블 생성 시 사용 예정) sheet1.tables.add('tableSales', 0, 0, 642, 6); // [시트1] ************************ // 첫번쨰 시트 가져오기 var sheet0 = spread.getSheet(0); // 두번째 시트이름을 PivotLayout로 선언 sheet0.name("PivotLayout"); // 렌더링 활성화를 통해, 화면에 한 번에 그려주어 성능향상 spread.resumePaint();[피벗 테이블 및 피벗 패널 생성 함수 만들기]
위에서 원본 데이터 작업 및 피벗 테이블 생성을 위한 기초 작업을 완료하였다면, 이제 실제로 첫번째 시트에 MS Excel에서 보는 것과 유사한 피벗(Pivot) 테이블을 만드는 방법을 알아보도록 하겠습니다.
아래 코드에서는 피벗 테이블과 패넛을 생성하고, 해당 패널에 들어갈 값들 까지 세팅하여, 원하는 결과 값이 보여지도록 합니다.
function initPivotTable(sheet) { // 시트에 tableSales라는 원본 데이터를 가지는 myPivotTable이라는 이름의 피벗 테이블을 생성합니다. var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark2); // 피벗 테이블이 화면에 그려지는 것을 지연하여 성능을 개선합니다. myPivotTable.suspendLayout(); // 피벗 테이블의 행/열 해더가 보여지도록 설정합니다. myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; // 피벗 테이블에 행 필드에 Region과 Country를 적용합니다. myPivotTable.add("region", "Region", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("country", "Country", GC.Spread.Pivot.PivotTableFieldType.rowField); // Date라는 필드를 분기(Quater)별로 그룹핑 해줍니다. var groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); // 피벗 테이블의 열 필드에 분기로 그룹핑한 date 필드를 Qt라는 이름으로 추가해줍니다. myPivotTable.add("date", "Qt", GC.Spread.Pivot.PivotTableFieldType.columnField); // 피벗 테이블의 열 필드에 분기로 그룹핑한 date 필드를 Qt라는 이름으로 추가해줍니다. myPivotTable.add("amount", "Sum of amount", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); //마지막으로 html body에서 panel라소 선언한 div 상에, // 위에서 만든 피벗 테이블과 함께 myPivotPanel 이라는 이름으로 피벗 패널이 함게 보여지도록 선언해줍니다. var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel")); // 피벗 테이블이 화면에 그려지는 것을 활성화 성능을 개선합니다. myPivotTable.resumeLayout(); return myPivotTable; }app.js 전체 코드는 아래와 같습니다.
window.onload = function () { GC.Spread.Common.CultureManager.culture("ko-kr"); var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 }); // 원본 데이터 시트 생성 initSpread(spread); var pivotLayoutSheet = spread.getSheet(0); // 피벗 테이블 및 패널 생성 initPivotTable(pivotLayoutSheet); // 피벗 테이블 열 너비 자동 맞춤 doAutoFitColumn(pivotLayoutSheet); }; // 원본 데이터 시트 생성 function initSpread(spread) { spread.suspendPaint(); var sheet1 = spread.getSheet(1); sheet1.name("DataSource"); sheet1.setRowCount(700); sheet1.setColumnWidth(5, 150); sheet1.setArray(0, 0, pivotSales); sheet1.tables.add('tableSales', 0, 0, 642, 6); var sheet0 = spread.getSheet(0); sheet0.name("PivotLayout"); spread.resumePaint(); } function initPivotTable(sheet) { var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark2); myPivotTable.suspendLayout(); myPivotTable.options.showRowHeader = true; myPivotTable.options.showColumnHeader = true; myPivotTable.add("region", "Region", GC.Spread.Pivot.PivotTableFieldType.rowField); myPivotTable.add("country", "Country", GC.Spread.Pivot.PivotTableFieldType.rowField); var groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] }; myPivotTable.group(groupInfo); myPivotTable.add("date", "Qt", GC.Spread.Pivot.PivotTableFieldType.columnField); myPivotTable.add("amount", "Sum of amount", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum); new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel")); myPivotTable.resumeLayout(); return myPivotTable; } function doAutoFitColumn (sheet) { sheet.suspendPaint(); var colCount = sheet.getColumnCount(); for (var i = 0; i < colCount; i++) { sheet.autoFitColumn(i); } sheet.setColumnWidth(0, 20); sheet.setRowHeight(0, 20); sheet.resumePaint(); }
마지막으로 최초 사용자에게 보기 편안한 피벗 패널을 보여주기 위해, 아래와 같이 style.css를 지정해줍니다.
.sample-tutorial { position: relative; height: 100%; } .sample-spreadsheets { width: calc(100% - 300px); height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .sample-panel { float: right; width: 300px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .gc-panel { padding: 10px; background-color: rgb(230, 230, 230); } #panel { position: absolute; right: 0; width: 300px; height: 100%; top: 0; } #app { height: 100%; }
위의 코드를 실행하면 아래와 같은 결과를 확인할 수 있습니다.
이제 기다리시던 SpreadJS에서 피벗 테이블(beta) 기능을 사용할 수 있습니다.
이를 통해 더욱 완벽한 웹 엑셀(Excel) 스프레드시트 솔루션을 개발하실 수 있었으면 합니다.
위 설명의 완성 샘플은 첨부 파일을 통해서 다운받을 수 있습니다
자세한 내용은 아래의 링크를 통해서 확인이 가능합니다.
댓글목록
등록된 댓글이 없습니다.
