필터

피벗 테이블에 특정 필터를 적용하여 필요한 정보만 보고 나머지 데이터는 숨길 수 있습니다.

행 및 열 필드 필터

행 또는 열의 데이터를 필터링해야 할 경우 행 및 열 필드 필터를 사용할 수 있습니다. 아래 이미지는 피벗 테이블에 필터를 적용하여 동부(East) 지역의 수량만 표시한 예입니다.

다음 코드 샘플은 Region 열을 필터링하여 East 지역의 데이터만 표시하는 방법을 보여줍니다.

// 필터 필드 추가
myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField);
let itemList = ["East"];
myPivotTable.labelFilter("Region", { textItem: { list: itemList, isAll: false } });

값 필터

값 필터는 피벗 테이블에서 합계, 개수, 최대값, 최소값, 평균 등 요약 값 기반으로 필터링할 수 있습니다. 아래 이미지는 'Sum of quantity'가 2000보다 큰 Category 열만 표시하는 값 필터 예시입니다.

다음 코드 샘플은 'sum of quantity'가 2000보다 큰 데이터를 표시하는 값 필터를 적용하는 방법을 보여줍니다.

// 필터 필드 추가
myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField);
// 'Sum of quantity'가 2000보다 큰 값 필터 적용
let valueFilter = { condition: { conType: GC.Pivot.PivotConditionType.value, val: [2000], operator: 2 }, conditionByName: "Sum of quantity" };
myPivotTable.valueFilter("Category", valueFilter);

라벨 필터

라벨 필터는 행 라벨 항목을 필터링하는 데 사용됩니다. 필터링하려는 필드의 데이터 유형에 따라 다양한 옵션을 제공합니다. 예를 들어 문자열이나 숫자 데이터의 경우 “같음”, “같지 않음”, “시작 문자”, “포함”, “보다 큼” 등의 옵션이 제공되고, 날짜 데이터의 경우 “이전”, “이후”, “내일”, “다음 주” 등의 옵션이 제공됩니다.

다음 예시는 “S”로 시작하는 도시만 표시하도록 라벨 필터를 적용하는 방법입니다.

// 필터 필드 추가
myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField);
// 'City'가 'S'로 시작하는 항목만 표시
let labelFilter = { condition: { conType: GC.Pivot.PivotConditionType.caption, val: 'S', operator: 2 } };
myPivotTable.labelFilter("City", labelFilter);

조건을 정의하는 대신 라벨 필터에 수동 필터를 사용할 수도 있습니다. 아래 이미지는 ‘Jersey’와 ‘Seattle’ 도시의 데이터를 표시하도록 수동 필터를 적용한 예시입니다.

다음 코드 샘플은 수동 필터를 적용하는 방법을 보여줍니다.

// 수동 필터 추가
let parent = { textItem: { list: ["Jersey", "Seattle"], isAll: false } };
myPivotTable.labelFilter("City", parent);

또한, allowMultipleFiltersPerField 옵션을 true로 설정하면 수동 필터와 조건 기반 레이블 필터를 함께 적용할 수도 있습니다. 다음 예제는 피벗 테이블에서 여러 필터를 적용하는 방법을 보여줍니다.

다음 코드 샘플은 피벗 테이블에서 여러 필터를 적용하는 방법을 보여줍니다.

myPivotTable.options.allowMultipleFiltersPerField = true;
// allowMultipleFiltersPerField가 설정되면, 두 필터가 모두 적용
var labelFilter = {
    textItem: { list: ["Jersey", "San Francisco"], isAll: false },
    condition: { conType: GC.Pivot.PivotConditionType.caption, operator: GC.Pivot.PivotCaptionFilterOperator.beginsWith, val: 'S' }
};
myPivotTable.labelFilter("City", labelFilter);

날짜 유형 필터

날짜 유형 필터는 피벗 테이블의 날짜 유형 항목에 적용할 수 있는 조건을 지정하는 데 사용할 수 있습니다. 아래 이미지는 분기별 데이터를 표시하도록 날짜 유형 필터가 적용된 피벗 테이블을 보여줍니다.

다음 코드 샘플은 날짜 유형 필터를 적용하는 방법을 보여줍니다.

let groupInfo = {
     originFieldName: "OrderDate",
     dateGroups: [
         { by: GC.Pivot.DateGroupType.quarters },
         { by: GC.Pivot.DateGroupType.years }]
 };
 myPivotTable.group(groupInfo);
 myPivotTable.add("OrderDate", "Qtr", GC.Spread.Pivot.PivotTableFieldType.columnField);
// FilterInfo를 사용하여 레이블 필터 적용
 let labelFilter = { condition: { conType: GC.Pivot.PivotConditionType.date, val: [], operator: GC.Pivot.PivotDateFilterOperator.Q1 } };
 myPivotTable.labelFilter("Qtr", labelFilter);       

또한, 다음과 같은 내장된 날짜-기준 필터를 사용할 수 있습니다:

• Quarter-to-Date (QTD): 현재 분기의 시작일부터 오늘 날짜까지의 기간

• Month-to-Date (MTD): 현재 월의 시작일부터 오늘 날짜까지의 기간

• Year-to-Date (YTD): 현재 연도의 시작일부터 오늘 날짜까지의 기간

위 옵션 외에도, isParallel 속성을 true로 설정하여 병렬 날짜 필터를 사용할 수 있습니다. 병렬 날짜 필터는 실제 기간에 해당하는 이전 또는 이후 날짜의 동일한 기간을 가져옵니다 (피벗 테이블의 데이터에 따라 다름).

예를 들어, 오늘이 2021년 11월 23일이고, 피벗 테이블에 2021년 9월 1일부터 12월 31일까지의 데이터가 포함되어 있다고 가정합니다.

Month to Date 필터:

• 2021년 11월 1일 - 2021년 11월 23일

병렬 Month to Date 필터:

• 2021년 9월 1일 - 2021년 9월 23일

• 2021년 10월 1일 - 2021년 10월 23일

• 2021년 11월 1일 - 2021년 11월 23일

• 2021년 12월 1일 - 2021년 12월 23일

다음 코드 샘플은 날짜-기준 필터를 적용하는 방법을 보여줍니다.

function DateToDateFilter() {
    var condition = {
        conType: GC.Pivot.PivotConditionType.month,
        operator: GC.Pivot.PivotDateFilterOperator.dateToDate,
        val: [new Date(2021, 7, 15), new Date(2022, 6, 20)],
        isParallel: false,
        isDynamicEndDate: true,
        by: GC.Pivot.PivotAdvancedDateFilterBy.month
    };
    var filterInfo = {
        condition
    };
    myPivotTable.labelFilter("OrderDate", filterInfo);

}

FilterInfo 생성

위의 필터들은 모두 FilterInfo를 생성하여 적용합니다. 아래 표는 FilterInfo를 생성할 때 사용할 수 있는 조건들을 설명합니다:

필터 버튼 숨기기

showFilter 옵션을 사용하여 피벗 테이블에서 필터 버튼을 숨길 수 있습니다.

다음 예제 코드는 필터 버튼을 숨기는 방법을 보여줍니다.

// showFilter를 false로 설정
myPivotTable.options.showFilter = false;

필터 대화 상자

피벗 테이블의 열 머리글을 클릭하여 필터 대화 상자를 사용할 수 있습니다. 이 대화 상자는 다양한 정렬 및 필터링 옵션을 제공합니다. 필터를 적용하려면 필터 대화 상자의 목록 상자에서 필요한 항목을 선택해야 합니다. 아래 이미지는 필터 대화 상자를 보여줍니다.

필터 대화 상자는 필터 설정을 편리하게 적용할 수 있도록 검색 상자도 제공합니다.

검색 항목은 대소문자를 구분하지 않으며, ‘현재 선택 항목을 필터에 추가(Add current selection to filter)’ 옵션을 사용하여 이전 필터 정보에 선택 항목을 병합할 수 있습니다. 이 옵션을 선택 해제하면 현재 선택 항목이 이전 필터 정보를 덮어씁니다.

또한, 아래 이미지와 같이 '?', '*', '~' 등의 정규식 문자를 사용하여 검색할 수 있습니다.

마우스 또는 다양한 키보드 키를 사용하여 필터 대화 상자와 상호작용할 수 있습니다. SpreadJS는 필터 대화 상자와 상호작용하기 위한 다음과 같은 키보드 키를 제공합니다: