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

데이터 설정

Pivot Table을 사용하면 데이터 소스의 변경 사항을 피벗 테이블에 반영할 수 있습니다. 또한 다음과 같은 방법으로 피벗 테이블의 데이터 영역에 있는 값을 편집할 수 있습니다.

  • 데이터 소스 새로 고침

  • 데이터 소스 변경

  • 데이터 값 편집

데이터 소스 새로 고침

피벗 테이블의 데이터 소스가 변경된 경우 최신 정보를 반영하려면 피벗 테이블을 새로 고쳐야 합니다. SpreadJS에서는 피벗 테이블의 updateSource 메서드를 사용하여 데이터 소스를 새로 고치고 최신 데이터를 피벗 테이블에 반영할 수 있습니다.

다음 GIF는 "데이터 소스 새로 고침" 버튼을 사용하여 데이터 소스의 변경 사항을 피벗 테이블에 반영하는 방법을 보여 줍니다.

SpreadJS PivotTable workflow demonstrates changing source data and clicking Refresh Datasource to update the summarized values through the updateSource method.

다음 예제 코드는 데이터 소스의 변경 사항을 피벗 테이블에 반영하는 방법을 보여 줍니다.

function refreshDataSource() {
    myPivotTable.updateSource();
}

SpreadJS 디자이너를 사용하여 피벗 테이블 데이터를 새로 고칠 수도 있습니다. 이렇게 하려면 피벗 테이블을 선택하여 피벗 테이블 분석 탭을 표시한 다음 데이터 그룹에서 새로 고침 버튼을 선택합니다.

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

데이터 매니저 테이블 또는 뷰에서 피벗 테이블을 만들면 데이터 매니저 소스를 사용하여 관련 PivotCache를 생성하거나 새로 고칩니다. 그런 다음 피벗 테이블은 PivotCache에 저장된 데이터를 분석합니다.

피벗 테이블 소스 설명자의 autoRefresh 속성을 사용하여 데이터 매니저의 변경 사항이 관련 PivotCache를 자동으로 새로 고칠지 여부를 제어할 수 있습니다.

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

autoRefresh를 true로 설정하면 데이터 매니저 테이블 또는 뷰의 변경 사항에 따라 관련 PivotCache가 자동으로 새로 고쳐집니다. 새로 고쳐진 캐시를 사용하는 피벗 테이블에는 업데이트된 분석 결과가 표시됩니다.

autoRefresh를 false로 설정하면 데이터 매니저의 변경 사항으로 인해 PivotCache가 자동으로 다시 생성되지 않습니다. 현재 데이터 매니저 소스에서 현재 PivotCache를 새로 고치려면 새 소스를 지정하지 않고 updateSource()를 호출합니다.

pivotTable.updateSource();

updateSource(source)를 호출하여 피벗 테이블의 소스를 다른 데이터 매니저 테이블 또는 뷰로 변경할 수도 있습니다.

pivotTable.updateSource({
    source: "Sales.SalesAnalysisView",
    autoRefresh: true
});

여러 피벗 테이블이 동일한 데이터 매니저 소스 캐시를 사용하는 경우 해당 캐시를 새로 고치면 이에 종속된 피벗 테이블도 업데이트됩니다.

데이터 소스 변경

피벗 테이블에서는 데이터 소스를 변경하고 기존 레이아웃 정보를 새 데이터 소스와 동기화할 수 있으므로 피벗 테이블을 보다 쉽게 사용할 수 있습니다. 이 기능은 행을 추가하거나 기존 데이터 세트를 수정해야 할 때 유용합니다.

현재 데이터 소스를 변경하려면 다음 예제 코드와 같이 updateSource 메서드를 사용하여 새 데이터를 지정합니다.

// Configure different data sources
var sourceSheet = spread.getSheet(0);
var sheet = spread.getSheet(1);
sheet.name("Pivot Table");
spread.setActiveSheet("Pivot Table");
var sourceData = [["Date", "Buyer", "Type", "Amount"],
["01-Jan", "Mom", "Fuel", 74],
["15-Jan", "Mom", "Food", 235],
["17-Jan", "Dad", "Sports", 20],
["21-Jan", "Kelly", "Books", 125]];
sourceSheet.setArray(0, 0, sourceData);
sourceSheet.tables.add('sourceData', 0, 0, 5, 4);

var newSourceData = [["Date", "Buyer", "Type", "Amount", "Location", "Notes"],
["10-Feb", "Mom", "Fuel", 74, "Gas Station", "Paid in cash"],
["27-Mar", "Mom", "Food", 235, "Supermarket", "Bought snacks"],
["13-Jan", "Dad", "Sports", 20, "Sports Store", "Discount applied"],
["21-May", "Kelly", "Books", 125, "Bookstore", "Fiction novels"],
["03-Apr", "John", "Electronics", 340, "Electronics Store", "New phone case"],
["19-Jun", "Mom", "Clothing", 89, "Mall", "Sale purchase"],
["15-Jul", "Dad", "Tools", 75, "Hardware Store", "DIY project"],
["08-Aug", "Kelly", "Furniture", 450, "Furniture Shop", "Living room decor"],
["23-Sep", "John", "Gaming", 120, "Online Store", "Pre-ordered game"],
["11-Oct", "Mom", "Garden", 55, "Garden Center", "Flower seeds"],
["06-Nov", "Dad", "Fuel", 64, "Gas Station", "Highway stop"],
["20-Dec", "Kelly", "Toys", 92, "Toy Store", "Birthday gifts"]];
sourceSheet.setArray(10, 0, newSourceData);
sourceSheet.tables.add('newSourceData', 10, 0, 13, 6);


// Create the pivot table
var layout = GC.Spread.Pivot.PivotTableLayoutType.compact;
var theme = GC.Spread.Pivot.PivotTableThemes.medium2;
var options = { showRowHeader: true, showColumnHeader: true };
sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme, options);
var pivotTable = sheet.pivotTables.get("pivotTable_1");
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", pivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields + GC.Spread.Pivot.PivotPanelSection.area);
pivotTable.add("Buyer", "Buyer", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("Type", "Type", GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("Amount", "Sum of Amount", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
sourceSheet.setValue(1, 3, 1000);


// Get the pivot data source
var pivotDataSource = pivotTable.getSource();
console.log(pivotDataSource);
// Update pivot data source
pivotTable.updateSource("newSourceData");

SpreadJS 디자이너에서도 다음 단계에 따라 데이터 소스를 변경할 수 있습니다.

  1. 피벗 테이블을 선택하고 리본의 피벗 테이블 분석 탭으로 이동합니다.


    image-20260722.23e733.png


  2. 데이터 그룹에서 데이터 원본 변경을 클릭합니다.

  3. 피벗 테이블 데이터 원본 변경 대화 상자에서 데이터 범위를 다시 선택하거나 수정합니다.


    image-20260722.4c90f1.png

참고:

'=Sheet!$A:$B'와 같이 전체 열을 데이터 소스로 사용하는 것도 지원하지만 상대 참조는 지원하지 않습니다.

4. 확인을 클릭하여 새 데이터로 피벗 테이블을 다시 생성합니다.

참고:

  • 데이터 소스를 변경한 후 필드 이름을 찾은 경우:

    • 해당 필드의 정보는 유지됩니다. 그러나 필드에 해당하는 항목은 새 데이터 소스에 맞게 업데이트됩니다.

    • 해당 필드의 슬라이서는 유지되며 데이터가 업데이트됩니다.

    • 필드에 해당하는 항목 그룹 필드가 있는 경우 SpreadJS의 소스 필드 항목은 최신 데이터로 업데이트되지만 그룹 필드는 기존 항목을 유지합니다.

  • 데이터 소스를 변경한 후 필드 이름을 찾을 수 없는 경우:

    • 계산 필드에는 null 값이 표시됩니다.

    • 그룹화된 필드는 제거됩니다.

    • 누락된 필드의 슬라이서는 제거됩니다.

  • 새 데이터 소스가 이미 다른 피벗 테이블에서 사용되고 있는 경우 기존 데이터를 직접 참조합니다.

  • 피벗 테이블의 데이터 소스 변경 작업은 실행 취소를 지원하지 않습니다. 그러나 데이터 소스를 변경한 후 수행하는 피벗 테이블 작업에는 실행 취소가 지원됩니다.

데이터 값 편집

SpreadJS 피벗 테이블에서는 데이터 영역의 값을 편집하거나 덮어쓸 수 있습니다. 덮어쓸 노드 값으로는 숫자 값 유형만 설정할 수 있습니다.

피벗 테이블에서는 부분합 계산에 다음 5가지 유형만 지원합니다.

  • GC.Pivot.SubtotalType.sum

  • GC.Pivot.SubtotalType.count

  • GC.Pivot.SubtotalType.countNums

  • GC.Pivot.SubtotalType.max

  • GC.Pivot.SubtotalType.min

부분합 유형이 위 목록에 포함되지 않은 경우 특정 셀만 덮어쓰며 부분합 결과는 변경되지 않습니다.

런타임에 피벗 테이블의 값을 편집하려면 피벗 테이블의 enableDataValueEditing 옵션을 true로 설정할 수 있습니다. enableDataValueEditing의 기본값은 false입니다. 코드로 피벗 테이블의 데이터 값을 덮어쓰려면 피벗 테이블의 setNodeValue 메서드를 사용할 수 있으며, 이 메서드는 노드 정보 배열과 덮어쓸 값을 인수로 받습니다. 노드 정보 배열은 getNodeInfo 메서드를 사용하거나 특정 값에 대한 노드 배열을 생성하여 가져올 수 있습니다. 또한 getNodeValue, getOverwriteList, clearOverwriteList 메서드를 사용하여 각각 노드 값, 덮어쓴 셀 값 목록을 가져오고 덮어쓴 값 목록을 지울 수 있습니다. 피벗 테이블 소스를 업데이트하면 덮어쓴 값 목록이 손실된다는 점에 유의하세요.

참고: JSON 가져오기/내보내기에는 덮어쓴 값 목록이 포함됩니다. 그러나 Excel 가져오기/내보내기 및 피벗 테이블 직렬화/역직렬화에서는 덮어쓴 값 목록이 무시됩니다.

다음 GIF는 런타임에 부분합 값을 편집하는 방법을 보여 줍니다.

SpreadJS PivotTable workflow demonstrates editing a numeric data-area value at runtime and recalculating supported subtotal results when data value editing is enabled.

다음 코드는 enableDataValueEditing 옵션을 true로 설정하는 방법을 보여 줍니다.

// enable data value editing
pivotTable.options.enableDataValueEditing = true;

다음 코드는 getNodeInfo 및 setNodeValue 메서드를 사용하여 피벗 테이블의 데이터 값을 업데이트하는 방법을 보여 줍니다.

// you can also get the node info by below code
var nodeInfo = pivotTable.getNodeInfo(7, 5);
// change value of cell (7,5) using code
pivotTable.setNodeValue(nodeInfo, 5000);

다음 SpreadJS 디자이너 이미지는 피벗 테이블의 enableDataValueEditing 속성을 true로 설정하는 방법을 보여 줍니다.

image-20260722.545682.png