[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

피벗 테이블 생성

피벗 테이블은 PivotTable 및 PivotTableManager 클래스를 사용하여 관리됩니다. 피벗 테이블을 만들기 위해서는 아래 단계들을 따르세요:

  1. 프로젝트에 데이터 소스를 추가합니다.

  2. add 메서드를 사용하여 피벗 테이블을 생성합니다.

  3. PivotTableFieldType 열거형을 사용하여 다양한 필드에 데이터를 표시합니다.

일반 데이터 소스를 사용하거나 기존 테이블시트를 소스로 사용하여 피벗 테이블을 만들 수 있습니다.

JSON을 데이터 소스로 사용하기

JSON을 데이터 소스로 사용하여 피벗 테이블을 만들 수 있습니다. 예를 들어, 한 식품 판매 회사는 여러 국가에서 식음료 제품을 판매하며, 일일 판매 데이터를 유지합니다. JSON 데이터 소스를 통해 다음과 같은 인사이트를 제공하는 피벗 테이블을 만들 수 있습니다:

  • 각 국가별로 판매된 각 제품의 총 수량

  • 각 도시에서 판매된 제품의 총 수량

피벗 테이블은 판매 데이터를 쉽게 분류하고 소계 및 총계를 자동으로 계산할 수 있습니다. 아래 이미지는 그 예시입니다.




다음 코드 샘플은 피벗 테이블을 생성하고 필드를 필드 영역에 추가하는 예시입니다:

$(document).ready(function () {
    // Spread 초기화
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
    spread.suspendPaint();
    // 시트 가져오기
    var pivotLayoutSheet = spread.getSheet(0);
    var dataSourceSheet = spread.getSheet(1);
    // 시트 이름 설정
    pivotLayoutSheet.name("PivotLayout");
    dataSourceSheet.name("DataSource");
    // 행 수 설정
    dataSourceSheet.setRowCount(245);
    // 데이터 원본 설정
    dataSourceSheet.setArray(0, 0, pivotDB\_UseCase);
    // dataSourceSheet에 테이블 추가
    dataSourceSheet.tables.add('tableSales', 0, 0, 245, 8);
    spread.resumePaint();
    // pivottable 초기화
    initPivotTable(pivotLayoutSheet);
    // 시트에 자동 열 맞춤
    autoFit(pivotLayoutSheet);
    autoFit(dataSourceSheet);
});
function initPivotTable(sheet) {
    // pivottable 추가
    var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 0, 0, GC.Spread.Pivot.PivotTableLayoutType.tabular, GC.Spread.Pivot.PivotTableThemes.dark3);
    myPivotTable.suspendLayout();
    //피벗테이블의 행헤더와 열 헤더 표시
    myPivotTable.options.showRowHeader = true;
    myPivotTable.options.showColumnHeader = true;
    // 열 필드 추가
    myPivotTable.add("Category", "Category", GC.Spread.Pivot.PivotTableFieldType.columnField);
    myPivotTable.add("Product", "Product", GC.Spread.Pivot.PivotTableFieldType.columnField);
    // 행 필드 추가
    myPivotTable.add("Region", "Region", GC.Spread.Pivot.PivotTableFieldType.rowField);
    myPivotTable.add("City", "City", GC.Spread.Pivot.PivotTableFieldType.rowField);
    // SubtotalType의 sum으로 값 필드 추가
    myPivotTable.add("Quantity", "Sum of quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
    // 필터 필드 추가
    myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField);
    myPivotTable.resumeLayout();
    return myPivotTable;
}
function autoFit(sheet) {
    // 자동 열 맞춤
    let columnCount = sheet.getColumnCount();
    for (let i = 0; i < columnCount; i++) {
    sheet.autoFitColumn(i);
    }
}

테이블 시트를 데이터 소스로 사용하기

기존 테이블 시트를 데이터 소스로 참조하여 피벗 테이블을 생성할 수 있습니다. 이를 통해 데이터를 쉽게 접근하고 테이블 시트와 피벗 테이블에서 정보를 비교 및 표시할 수 있습니다. 또한, 테이블 시트에서 계산된 필드를 피벗 테이블에 추가하여 더 나은 데이터 분석이 가능합니다.


PivotTableManager.add 메서드는 테이블 시트이름을 sourceData 매개변수 값으로 허용합니다.


예를 들어, 아래 이미지는 패키지 구매 시 세금 비율의 최소값 및 최대값을 요약하는 피벗 테이블을 보여줍니다.



다음은 SpreadJS에서 기존 테이블 시트 데이터를 사용하여 피벗 테이블을 생성하는 코드 샘플입니다:

// 테이블 시트 초기화
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
var tableSheetName = "TableSheet1";

// 테이블 시트에 뷰 바인딩
myTable.fetch().then(function () {
    var view = myTable.addView("myView", [

        { value: "stockItemKey", width: 150, caption: "Stock Item Key" },
        { value: "stockItem", width: 120, caption: "Stock Item" },
        { value: "buyingPackage", width: 120, caption: "Buying Package" },
        { value: "sellingPackage", width: 120, caption: "Selling Package" },
        { value: "unitPrice", width: 150, caption: "Unit Price" },
        { value: "taxRate", width: 120, caption: "Tax Rate" },
        { value: "validFrom", width: 200, caption: "Valid From" }
    ]);
    sheet.setDataView(view);
}).then(() => {
    var ptSheet = spread.getSheet(0);
    var myPivotTable = ptSheet.pivotTables.add("pivot1", "TableSheet1", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark3);
   // 행 필드 추가
    myPivotTable.add("buyingPackage", "Buying Package", GC.Spread.Pivot.PivotTableFieldType.rowField);

    // 값 필드 추가 (최소, 최대)
    myPivotTable.add("taxRate", "Minimum Tax Rate", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.min);
    myPivotTable.add("taxRate", "Maximum Tax Rate", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.max);

    // 열 자동 너비 조정
    for (let i = 1; i < 4; i++) {
        ptSheet.autoFitColumn(i);
    }

});

피벗 테이블은 테이블 시트에서 현재 접근 가능한 데이터를 사용합니다. 단, 다음과 같은 경우는 예외입니다:

  • 피벗 테이블은 테이블 시트에서 그룹화 작업 후 새로 추가된 그룹을 포함할 수 없습니다.

  • 테이블 시트에서 필드를 숨김으로 설정해도, 피벗 테이블에는 해당 필드의 데이터가 표시됩니다.

  • 피벗 테이블의 열은 테이블 시트의 caption이 아닌 컬럼 이름을 사용하므로, 계산된 열의 경우 피벗 테이블에서 매우 긴 이름이 표시될 수 있습니다.