피벗 테이블 생성

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

프로젝트에 데이터 소스를 추가합니다.
add 메서드를 사용하여 피벗 테이블을 생성합니다.
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이 아닌 컬럼 이름을 사용하므로, 계산된 열의 경우 피벗 테이블에서 매우 긴 이름이 표시될 수 있습니다.
데이터 소스로 데이터 매니저 테이블 또는 뷰 사용

데이터 매니저 테이블 또는 뷰에서 직접 피벗 테이블을 만들 수 있습니다. 이를 통해 먼저 데이터를 워크시트 테이블이나 테이블 시트에 구체화하지 않고도 구조화된 데이터 매니저 데이터를 사용하여 피벗 테이블 분석을 수행할 수 있습니다.

피벗 테이블에서 단일 테이블의 필드를 분석하는 경우 데이터 매니저 테이블 소스를 사용합니다. 피벗 테이블에서 프로젝션된 필드, 필터링된 결과, 계산 필드 또는 여러 테이블의 관계 기반 필드와 같이 뷰를 통해 노출되는 필드가 필요한 경우 데이터 매니저 뷰 소스를 사용합니다.

데이터 매니저 테이블 또는 뷰에서 생성된 피벗 테이블은 데이터 매니저 데이터를 사용하여 PivotCache를 생성하거나 새로 고칩니다. 캐시가 생성되면 피벗 테이블 분석은 PivotCache 데이터를 기반으로 수행됩니다.

데이터 매니저 테이블에서 피벗 테이블 만들기

피벗 테이블 소스 설명자는 데이터 매니저 테이블 이름을 source 값으로 사용합니다. 피벗 테이블을 만들기 전에 테이블 데이터를 가져옵니다.

var dataManager = spread.dataManager();

var salesTable = dataManager.addTable("TableSales", {
    data: [
        { date: new Date(2024, 0, 1), salesperson: "Alan", product: "Laptop", quantity: 2, price: 1299, total: 2598 },
        { date: new Date(2024, 0, 2), salesperson: "Bob", product: "Phone", quantity: 3, price: 899, total: 2697 }
    ],
    schema: {
        columns: {
            date: { dataType: "date" },
            salesperson: { dataType: "string" },
            product: { dataType: "string" },
            quantity: { dataType: "number" },
            price: { dataType: "number" },
            total: { dataType: "number" }
        }
    }
});

salesTable.fetch().then(function () {
    var sheet = spread.getSheet(0);

    var pivotTable = sheet.pivotTables.add(
        "dataTablePivot",
        {
            source: "TableSales",
            autoRefresh: true
        },
        1,
        1,
        GC.Spread.Pivot.PivotTableLayoutType.outline,
        GC.Spread.Pivot.PivotTableThemes.medium8
    );

    pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
    pivotTable.add("product", "Product", GC.Spread.Pivot.PivotTableFieldType.rowField);
    pivotTable.add("total", "Total", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
});

image-20260722.4e583b.png

데이터 매니저 뷰에서 피벗 테이블 만들기

피벗 테이블 소스 설명자는 "TableName.ViewName" 형식으로 테이블 이름과 뷰 이름을 source 값으로 사용합니다.

피벗 테이블에서 관계 기반 필드 또는 여러 데이터 매니저 테이블에서 구성된 테이블 형태의 결과가 필요한 경우 데이터 매니저 뷰를 소스로 사용하는 것이 좋습니다. 피벗 테이블은 데이터 매니저의 관계 모델을 직접 해석하지 않습니다. 대신 뷰를 통해 노출되는 필드와 행을 사용합니다.

var dataManager = spread.dataManager();

var productsTable = dataManager.addTable("Products", {
    data: [
        { id: 1, name: "Laptop", category: "Electronics", price: 1299 },
        { id: 2, name: "Phone", category: "Electronics", price: 899 }
    ],
    schema: {
        columns: {
            id: { dataType: "number", isPrimaryKey: true },
            name: { dataType: "string" },
            category: { dataType: "string" },
            price: { dataType: "number" }
        }
    }
});

var salesTable = dataManager.addTable("Sales", {
    data: [
        { date: new Date(2024, 0, 1), productId: 1, quantity: 2, price: 1499 },
        { date: new Date(2024, 0, 2), productId: 2, quantity: 3, price: 999 }
    ],
    schema: {
        columns: {
            date: { dataType: "date" },
            productId: { dataType: "number" },
            quantity: { dataType: "number" },
            price: { dataType: "number" },
            salesTotal: { dataType: "formula", value: "=[@quantity] * [@price]" }
        }
    }
});

dataManager.addRelationship(salesTable, "productId", "product", productsTable, "id", "sales");

var salesAnalysisView = salesTable.addView("SalesAnalysisView", [
    "date",
    "quantity",
    "price",
    "salesTotal",
    "product.name",
    "product.category"
]);

Promise.all([
    productsTable.fetch(),
    salesTable.fetch(),
    salesAnalysisView.fetch()
]).then(function () {
    var sheet = spread.getSheet(0);

    var pivotTable = sheet.pivotTables.add(
        "dataViewPivot",
        {
            source: "Sales.SalesAnalysisView",
            autoRefresh: true
        },
        1,
        1,
        GC.Spread.Pivot.PivotTableLayoutType.outline,
        GC.Spread.Pivot.PivotTableThemes.medium8
    );

    pivotTable.add("product.category", "Category", GC.Spread.Pivot.PivotTableFieldType.rowField);
    pivotTable.add("product.name", "Product", GC.Spread.Pivot.PivotTableFieldType.rowField);
    pivotTable.add("salesTotal", "Sales Total", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
});

image-20260722.6c6267.png

데이터 매니저 소스 자동 새로 고침

피벗 테이블 소스 설명자에서 autoRefresh를 true로 설정하면 데이터 매니저 테이블 또는 뷰가 변경될 때 관련 PivotCache가 자동으로 새로 고쳐집니다.

var pivotSource = {    source: "TableSales",    autoRefresh: true};

autoRefresh가 활성화되어 있지 않은 경우 피벗 테이블에서 updateSource()를 호출하여 PivotCache를 명시적으로 새로 고칠 수 있습니다. 자세한 내용은 데이터 설정을 참조하세요.

참고: 데이터 매니저 소스에 데이터 레코드가 없는 경우 SpreadJS는 해당 스키마를 사용하여 빈 피벗 테이블을 만들 수 있습니다.

피벗 테이블 생성

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

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

데이터 소스로 데이터 매니저 테이블 또는 뷰 사용

데이터 매니저 테이블에서 피벗 테이블 만들기

데이터 매니저 뷰에서 피벗 테이블 만들기

데이터 매니저 소스 자동 새로 고침

제품

고객 서비스

메시어스 정보

정책(Policy)