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

데이터 설정

피벗 테이블은 데이터 원본의 변경 사항을 테이블에 반영할 수 있으며, 아래와 같은 방식으로 피벗 테이블의 데이터 영역 값을 편집할 수도 있습니다:

  • 데이터 원본 새로 고침

  • 데이터 원본 변경

  • 데이터 값 편집

데이터 원본 새로 고침

피벗 테이블의 데이터 원본이 변경되었을 경우, 최신 정보를 반영하기 위해 피벗 테이블을 새로 고침해야 합니다. SpreadJS에서는 피벗 테이블의 updateSource 메서드를 사용하여 데이터 원본을 새로 고치고 최신 데이터를 반영할 수 있습니다.

아래 GIF는 "Refresh Datasource" 버튼을 사용하여 데이터 원본의 변경 사항을 피벗 테이블에 새로 고치는 방법을 보여줍니다.




다음 예제 코드는 데이터 원본의 변경 사항을 피벗 테이블에 새로 고침하여 반영하는 방법을 보여줍니다.

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

SpreadJS 디자이너를 사용하여 피벗 테이블 데이터를 새로 고칠 수도 있습니다. 이를 위해 피벗 테이블을 선택하여 PIVOTTABLE ANALYZE 탭을 표시한 후, Data 그룹에서 Refresh 버튼을 선택하면 됩니다.

데이터 원본 변경

피벗 테이블은 데이터 원본을 변경하고 기존 레이아웃 정보를 새로운 데이터 원본에 동기화할 수 있도록 지원합니다. 이 기능은 행을 더 추가하거나 기존 데이터 집합을 수정해야 할 때 유용합니다.

현재 데이터 원본을 변경하려면 updateSource 메서드를 사용하고 다음 예제 코드와 같이 새 데이터를 지정하면 됩니다.

//다른 데이트 원본 구성
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);


// 피벗테이블 생성
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);


// 피벗 데이터 원본 가져오기
var pivotDataSource = pivotTable.getSource();
console.log(pivotDataSource);
// 피벗 데이터 원본 업데이트
pivotTable.updateSource("newSourceData");

SpreadJS 디자이너를 사용하면 아래 단계를 통해 데이터 원본을 변경할 수 있습니다:

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


    image


  2. 데이터(Data) 그룹에서 데이터 원본 변경(Change Data Source) 를 클릭합니다.

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


    image


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

참고:

  • 데이터 원본 변경 후 필드 이름이 존재하는 경우:

    • 해당 필드에 대한 정보는 유지되며, 필드에 해당하는 항목은 새 데이터 원본으로 업데이트됩니다.

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

    • 해당 필드에 대응하는 항목 그룹 필드가 있을 경우, SpreadJS에서 소스 필드의 항목은 최신 데이터로 업데이트되며, 그룹 필드는 원래 항목을 유지합니다.

  • 데이터 원본 변경 후 필드 이름이 존재하지 않는 경우:

    • 계산 필드는 null 값을 표시합니다.

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

    • 해당 필드에 연결된 슬라이서는 손실됩니다.

  • 새 데이터 원본이 이미 다른 피벗 테이블에서 사용 중인 경우, 기존 데이터를 직접 참조합니다.

  • 피벗 테이블의 데이터 원본 변경 작업은 되돌리기(Undo) 를 지원하지 않지만, 데이터 원본 변경 이후의 작업에 대해서는 Undo가 지원됩니다.:

데이터 값 편집

SpreadJS 피벗 테이블은 데이터 영역의 값을 편집하거나 덮어쓸 수 있습니다. 이때 숫자형 값만 덮어쓸 수 있습니다.

피벗 테이블은 다음 5가지 Subtotal 계산 타입만 지원합니다:

  • GC.Pivot.SubtotalType.sum

  • GC.Pivot.SubtotalType.count

  • GC.Pivot.SubtotalType.countNums

  • GC.Pivot.SubtotalType.max

  • GC.Pivot.SubtotalType.min

위 목록에 포함되지 않은 Subtotal 타입의 경우 특정 셀만 덮어써지며, Subtotal 결과는 변경되지 않습니다.

런타임에서 피벗 테이블 값을 편집하려면 enableDataValueEditing 옵션을 true로 설정해야 합니다. 기본값은 false입니다. 코드를 통해 피벗 테이블 데이터를 덮어쓰려면 setNodeValue 메서드를 사용합니다. 이 메서드는 노드 정보 배열과 덮어쓸 값을 인자로 받습니다. 노드 정보 배열은 getNodeInfo 메서드로 가져오거나 특정 값을 위한 노드 배열을 직접 생성할 수 있습니다.

또한, getNodeValue, getOverwriteList, clearOverwriteList 메서드를 사용하여 노드 값 조회, 덮어쓴 셀 값 목록 조회, 덮어쓴 값 목록 초기화 작업을 할 수 있습니다.

주의: 피벗 테이블의 소스를 업데이트하면 덮어쓴 값 목록은 사라집니다.

참고: JSON I/O에서는 덮어쓴 값 목록이 포함되지만, ExcelIO 및 피벗 테이블 직렬화/역직렬화에서는 덮어쓴 값 목록이 무시됩니다.

아래 GIF는 런타임에서 Subtotal 값을 편집하는 방법을 보여줍니다.

editdatavalue.gif


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

// 데이터 값 편집 활성화
pivotTable.options.enableDataValueEditing = true;

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

// 아래 코드를 통해 노드 정보를 가져올 수 있습니다.
var nodeInfo = pivotTable.getNodeInfo(7, 5);
// 코드로 셀 (7,5)의 값을 변경합니다.
pivotTable.setNodeValue(nodeInfo, 5000);

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

data-value-designer.png