Wijmo의 PivotEngine 클래스는 itemsSource 속성의 데이터를 기반으로 필드를 자동으로 생성할 수 있습니다 . 이것은 일반적인 데이터 또는 알 수 없는 데이터를 처리 할 때 유용한 기능입니다.

예를 들어, 다음은 데이터 소스에서 자동으로 채워지는 PivotPanel입니다.

var ng1 = new PivotEngine({
    itemsSource: getData(),
    valueFields: ['Amount'],
    rowFields: ['Type', 'Buyer']
});

잘 작동하지만 대부분의 경우 분석하는 객체의 유형을 알고 있습니다.

이를 활용하여 사용자에게 표시할 필드 목록을 지정할 수 있으며, 표시하려는 필드, 표시 순서, 캡션, 기본 집계 모드, 형식 등을 포함하여 목록을 사용자 정의할 수 있습니다.

예를 들어, 다음은 명시적인 필드 목록을 사용하여 채워진 PivotPanel 입니다.

var ng2 = new PivotEngine({
    itemsSource: data,
    fields: [
        { binding: 'buyer', header: 'Buyer' },
        { binding: 'type', header: 'Type' },
        { binding: 'date', header: 'Date' },
        { binding: 'date', header: 'Year', format: 'yyyy' },
        { binding: 'date', header: 'Quarter', format: 'Q' },
        { binding: 'date', header: 'Month', format: 'MMM' },
        { binding: 'amount', header: 'Amount', format: 'c2' }
    ],
    valueFields: ['Amount'],
    rowFields: ['Type', 'Year', 'Quarter']
});

fields 속성을 설정하여 필드 순서를 정의하고 "Amount" 필드에 서식을 추가하고 "date" 값에 바인딩 된 세 개의 추가 필드를 만들고 연도, 분기 및 월을 표시하도록 구성하였습니다.

추가 날짜 필드는 필드 수를 4개에서 7개로 늘렸습니다. 이것은 여전히 ​​상대적으로 적은 숫자이지만 빠르게 숫자가 늘어날 수 있습니다. 필드가 많아지면, 목록을 계층적으로 구성하는 것이 좋습니다.

필드 그룹은 바인딩이 없고 일반 필드(또는 다른 필드 그룹)를 포함하는 subFields 배열이 있는 필드입니다. 필드 그룹은 PivotPanel에 접을 수 있는 항목으로 표시되므로 사용자는 관심이 없는 그룹을 닫을 수 있습니다.

예를 들어, 다음은 계층 필드 목록을 사용하여 채워진 PivotPanel 입니다.

var ng3 = new PivotEngine({
    itemsSource: data,
    fields: [
        { header: 'Dimensions', subFields: [
            { binding: 'buyer', header: 'Buyer' },
            { binding: 'type', header: 'Type' },
            { header: 'Date', subFields: [
                { binding: 'date', header: 'Year', format: 'yyyy' },
                { binding: 'date', header: 'Quarter', format: 'Q' },
                { binding: 'date', header: 'Month', format: 'MMM' },
            ]},
        ]},
        { header: 'Measures', subFields: [
            { binding: 'amount', header: 'Amount', format: 'c2' }
        ]}
    ],
    valueFields: ['Amount'],
    rowFields: ['Type', 'Year', 'Quarter']
});

이제 필드 목록에는 "Dimensions", "Date" 및 "Measures"라는 세 개의 접을 수 있는 그룹이 있습니다. 그룹을 사용하면 사용자가 필드 목록을 더 쉽게 이해하고 탐색할 수 있습니다.

이 포스팅에서 다룬 예제는 매우 간단한 예이지만 실제 시나리오에서는 종종 수백 개의 필드가있는 데이터 소스가 포함됩니다. 이때 계층 목록이 큰 차이를 만들 수 있습니다.