JavaScript 피벗(Pivot) 테이블을 추가하는 방법

PivotGrid JavaScript 피벗(Pivot) 테이블을 추가하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2023-02-22 15:25 조회 737회 댓글 0건

본문

관련링크

데이터 표 및 그리드는 최신 UI 디자인에서 안정적으로 되었습니다. 이를 통해 사용자는 쉽게 대용량 데이터 집합을 보고, 값을 비교하고, 실증적인 데이터를 기반으로 결정을 내릴 수 있습니다.

하지만 작업 중인 데이터 집합을 기준 표에서 쉽게 볼 수 없는 경우가 있거나 데이터 요소 간에 상관관계를 더욱 쉽게 볼 수 있도록 제외된 특정 데이터를 원하는 인스턴스가 있을 수 있습니다.

감사하게도 소프트웨어 엔지니어와 컴퓨터 프로그래머가 이를 수행할 수 있도록 하는 데이터 표의 더욱 진보된 양식을 개발했습니다. 바로 피벗 테이블입니다.

피벗 테이블은 데이터 발견과 같은 작업에서 사용자를 돕는 데이터 표입니다. 이를 통해 사용자는 로드한 데이터 집합에서 복잡한 분석 계산을 수행하고 표시하려는 데이터를 결정하고 데이터의 방향을 결정할 수 있습니다. 이를 통해 사용자는 기존 데이터 표를 사용하는 경우 일반적으로 놓칠 수 있는 추세를 볼 수 있습니다.

다행히 Wijmo에서는 사용할 수 있는 최고의 JavaScript 피벗 테이블인 PivotGrid를 제공합니다. 간편하게 구현하고 쉽게 사용자 정의할 수 있으며 응용 프로그램에 쉽게 통합할 수 있는 광범위한 기능 목록도 있습니다.

이 문서에서는 Wijmo의 JavaScript 피벗 테이블인 PivotGrid를 사용하여 다음 작업을 수행하는 방법에 대해 간략하게 설명합니다.

PivotEngine으로 데이터 로드
PivotPanel 및 PivotGrid 설정
사용자 정의 필드 만들기
PivotChart를 사용하여 차트 양식으로 데이터 표시

Excel과 같은 웹 기반 피벗 테이블과 차트를 통합하고 싶으신가요?

지금 Wijmo를 다운로드하십시오!

따라가는 데 도움이 되도록 완성된 프로젝트의 소스 코드를 확인하려는 경우,

여기 stackblitz에서 찾아볼 수 있습니다. 이제 한번 시작해 보겠습니다!

Pivot Engine으로 데이터 로드

Wijmo의 JavaScript 피벗 테이블인 PivotGrid를 구현하기 전에 필요한 모든 리소스를 JavaScript 응용 프로그램에 로드해야 합니다.

stackblitz를 사용하여 응용 프로그램을 빌드하는 경우 종속성으로 포함할 패키지를 지정해야 합니다.

다음 패키지를 포함하십시오.

@grapecity/wijmo
@grapecity/wijmo.olap
@grapecity/wijmo.styles

stackblitz를 사용하지 않는 경우, NPM을 사용하여 다음 명령을 통해 Wijmo를 설치할 수 있습니다.

npm i @grapecity/wijmo.all

이제 Wijmo 라이브러리를 설치했으며 컨트롤의 스타일을 적절히 지정하도록 Wijmo의 CSS 파일을 포함해야 합니다. styles.css 파일을 열고 다음을 포함합니다.

@import '@grapecity/wijmo.styles/wijmo.css';

멋집니다! 필요한 모든 관련 Wijmo 파일을 포함했습니다.

Wijmo의 컨트롤을 구현하기 전에 마지막으로 할 일은 JavaScript 피벗 테이블을 채우는 데 사용할 일부 데이터를 생성하는 것입니다.

index.js 파일을 열고 다음을 추가합니다.

var products = [
{ product: 'Wijmo', platform: 'Web' },
{ product: 'ActiveReports', platform: 'Desktop' },
{ product: 'ActiveReportsJS', platform: 'Web' },
{ product: 'ComponentOne', platform: 'Desktop' },
{ product: 'Spread', platform: 'Desktop' },
{ product: 'SpreadJS', platform: 'Web' },
{ product: 'GCDocs', platform: 'Desktop' },
];

var agents = [
{ agent: 'Ashlyn Dunlop', region: 'East' },
{ agent: 'Keith Vang', region: 'East' },
{ agent: 'Bobbi Rodrigues', region: 'West' },
{ agent: 'Charli Medina', region: 'West' },
{ agent: 'Kaitlin Salt', region: 'West' },
];

function randomInt(min, max) {
 return Math.floor(Math.random() * (max - min + 1) + min);
}

function getOrdersList(count) {
 var year = new Date().getFullYear(), data = [];
 for (var i = 0; i < count; i++) {
   let productIdx = randomInt(0, 6);
   let agentIdx = randomInt(0, 4);
   data.push({
     orderId: randomInt(1, 10000),
     platform: products[productIdx].platform,
     product: products[productIdx].product,
     agent: agents[agentIdx].agent,
     region: agents[agentIdx].region,
     date: new Date(
       year - randomInt(0, 2),
       randomInt(0, 11),
       randomInt(0, 27)
    ),
     sales: randomInt(10, 50),
     downloads: randomInt(10, 200),
     revenue: randomInt(500, 3500),
  });
}
 return data;
}

이는 JavaScript 피벗 테이블을 채우는 데 사용할 항목입니다.

여기에서 주목해야 할 중요한 사항은 getOrdersList() 함수의 목적이 agents, products 및 randomInt()를 사용하여 볼 수 있는 판매 데이터 집합을 생성하는 것입니다.

이제 응용 프로그램을 설정하여 Wijmo의 JavaScript 피벗 테이블인 PivotGrid를 마지막으로 구현할 수 있습니다.

index.js 파일 내에서 다음을 추가합니다.

import * as wjOlap from '@grapecity/wijmo.olap';
import './styles.css';

var products = [...];
var agents = [...];

function randomInt(min, max) {...}

function getOrderList(count) {...}

var ng = new wjOlap.PivotEngine({
 itemsSource: getOrdersList(1000),
});

보시다시피 몇 줄의 코드에 불과합니다.

그러나 여기서 무슨 일이 일어나고 있는지 설명하는 것이 중요합니다. 파일에서는 PivotEngine이라는 Wijmo 컴포넌트를 초기화합니다. PivotEngine은 데이터 관리를 처리하며 PivotEngine 없이 Wijmo의 PivotGrid 및 PivotPanel 컨트롤은 작동하지 않습니다.

PivotEngine을 피벗 테이블의 기초로 생각할 수 있으며 PivotEngine 없이 테이블에는 사용자에게 표시할 데이터가 없습니다.

Wijmo 컴포넌트 초기화와 함께 itemsSource 속성도 설정합니다. 이러한 설정은 엔진에, "이게 너가 관리하려는 데이터야."라고 말해주는 것과 같은 역할을 합니다. 이 응용 프로그램의 경우 로드할 데이터 행 1000개를 반환하는 getOrdersList() 함수를 호출합니다.

이제 데이터로 로드한 PivotEngine이 있으며 해당 데이터를 화면에 표시할 시간입니다.

PivotPanel 및 PivotGrid 설정

이제 PivotEngine이 설정되었으며 이를 사용할 시간입니다. 지난 섹션에서 언급한 대로 엔진은 데이터를 관리합니다. 따라서 데이터와 상호작용하는 사용자의 경우 UI 요소인 PivotPanel 및 PivotGrid에 연결해야 합니다.

이전에 Wijmo의 PivotGrid를 언급했지만 PivotPanel에 대해서는 많이 설명하지 않았습니다. PivotPanel은 사용자가 표시 중인 데이터와 직접 상호 작용하는 방법입니다. 여기에는 선택한 필드의 데이터를 추가로 사용자 정의하기 위한 필드 설정 메뉴의 액세스 권한은 물론 데이터 필드가 열, 행, 필터 및 값 필드인지를 결정하는 작업이 포함됩니다.

추가 설명 대신 PivotPanel 및 PivotGrid로 수행할 수 있는 작업을 보여드리는 것이 더 나을 것입니다.

응용 프로그램에 추가하려면 index.html 파일을 열고 다음 코드를 추가합니다.

<div class="flextable">
<div id="pivotPanel"></div>
<div id="pivotGrid"></div>
</div>

이러한 부분은 PivotPanel 및 PivotGrid 컴포넌트가 화면에서 직접 렌더링하는 데 사용됩니다. id를 제공했으므로 컨트롤은 사용할 항목을 알고 있습니다.

이제 index.js 파일 내에서 다음을 추가합니다.

import * as wjOlap from '@grapecity/wijmo.olap';
import './styles.css';

var products = [...];
var agents = [...];

function randomInt(min, max) {...}

function getOrderList(count) {...}

var ng = new wjOlap.PivotEngine({...});

var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', {
 itemsSource : ng
});

var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {
 itemsSource: ng
});

이것이 전부입니다! Wijmo의 JavaScript 피벗 테이블을 구현하기는 정말 쉽습니다.

PivotEngine과 같이 PivotGrid 및 PivotPanel은 모두 itemsSource로 공급해야 합니다. 하지만 PivotEngine과 달리 이러한 컴포넌트는 간단한 배열을 사용하지 않고 PivotEngine을 사용합니다! 따라서 이전 섹션에서 설정한 ng 변수를 사용하여 모든 컴포넌트에 대한 itemsSource로 할당할 수 있습니다.

응용 프로그램을 실행하기 전 마지막 한 가지 작업은 레이아웃을 정리하도록 약간의 스타일을 추가하는 것입니다.

styles.css 파일을 열고 다음을 추가합니다.

.flextable {
   display: flex;
}

.wj-pivotpanel {
   width: 500px;
   margin: 0px 10px;
}

.wj-pivotgrid {
   height: 600px;
}

PivotPanel 및 PivotGrid가 나란히 표시되도록 응용 프로그램을 설정하고 PivotGrid에 더 많은 공간을 만들도록 PivotPanel의 너비를 설정합니다.

이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.

보시다시피 PivotGrid에 아무것도 로드되지 않았으며 이는 예상대로입니다.

PivotPanel에 일부 필드를 설정하지 않는 한 어떤 것도 표시되지 않습니다.

이를 수정하고 몇 개의 필드를 추가해 보겠습니다.

PivotPanel을 통해 볼 수 있듯이 다음 필드를 패널의 다양한 영역에 추가했습니다.

열 필드	행 필드	값 필드
Platform	Region	Sales
Product	Agent	Downloads
		Revenue

이제 지역 전체에서 에이전트별로, 제품 및 플랫폼별로 모든 판매 메트릭의 분석을 확인할 수 있습니다.

계속하기 전에 의논해야 할 마지막 한 가지는 필드 설정 메뉴입니다. 이 메뉴는 PivotGrid에 있는 셀을 마우스 오른쪽 버튼으로 클릭하거나 PivotPanel에서 필드 이름을 마우스 오른쪽 버튼으로 클릭하여 액세스할 수 있습니다.

필드 설정… 옵션을 선택하면 필드 설정 모달이 열립니다.

여기에서는 데이터가 요약되는 방법을 변경하고, 계산을 추가하고(예: 이전 행에서 % 차이), 필터를 추가하고, 선택한 형식을 기반으로 한 미리 보기가 포함된 데이터가 표시되는 방법을 포맷할 수 있습니다.

이는 판매 필드에 대한 필드 설정 메뉴이므로 기본 정수 형식 대신 통화 형식으로 표시할 형식을 변경할 것입니다.

보시다시피 업데이트된 형식의 미리 보기도 보여줍니다.

확인 버튼을 클릭하면 다음이 표시되어야 합니다.

보시다시피 판매(Sales) 열은 이제 정수 형식 대신 통화 형식으로 모두 표시하고 있습니다.

사용자 정의 필드 만들기

이제 PivotPanel 및 PivotGrid를 구현했고 사용의 기본 사항을 검토했으며 PivotEngine을 사용하여 데이터를 사용자 정의할 시간입니다. 자동으로 생성할 수 있도록 허용하는 대신 PivotEngine을 통해 수동으로 속성을 설정하여 이를 수행할 수 있습니다.

index.js 파일을 열고 다음을 추가합니다.

var ng = new wjOlap.PivotEngine({
 itemsSource: dataService.getOrdersList(1000),
 fields:[
  { binding: 'date', header: 'Quarter', format: '\"Q\"q yyyy' },
  { binding: 'date', header: 'Month', format: 'MMMM' },
  { binding: 'agent', header: 'Agent' },
  { binding: 'region', header: 'Region' },
  { binding: 'platform', header: 'Platform' },
  { binding: 'product', header: 'Product' },
  { binding: 'sales', header: 'Sales', format: 'c2' },
  { binding: 'downloads', header: 'Downloads', format: 'n0' },
  { binding: 'revenue', header: 'Revenue', format: 'c2' },
]
});

보시다시피 fields 속성은 개체의 배열을 채택하며 사용자가 PivotPanel에서 선택할 수 있는 다양한 필드를 만드는 데 사용됩니다.

기본적으로 이러한 개체에는 두 개의 속성인 binding 및 header 속성만 있어야 합니다. 바인딩 속성은 엔진에 이 필드가 바인딩되는 속성 이름을 알려줍니다.

Agent, Region, Platform 및 Product에 대해 이는 저희가 설정하는 유일한 속성입니다.

하지만 설정할 수 있는 또 다른 속성이 있으며 이는 format 속성입니다. 사용자가 필드 설정 메뉴를 사용하여 형식을 변경하는 방법과 마찬가지로 개발자는 필드를 표시하려는 기본 형식을 설정할 수 있습니다.

형식 설정과 함께 동일한 데이터 요소에서 여러 필드를 실제로 만들고 양쪽 모두에 대해 다른 형식을 설정할 수 있습니다. 이 응용 프로그램에서는 분기별 및 월별 날짜 필드를 설정합니다.

이제 이를 저장하고 응용 프로그램을 열면 몇 개의 필드를 선택할 것이며 다음과 같이 표시되어야 합니다.

보시다시피 단일 데이터 요소를 사용하여 분기별 및 월별 필드를 만들었습니다.

이제 사용자는 분기별 및 월별 보기로 판매 데이터 분석을 확인하여 더 큰 분석도 볼 수 있습니다.

PivotChart를 사용하여 차트 양식으로 데이터 표시

Wijmo는 Wijmo의 JavaScript 피벗 테이블인 PivotGrid와 함께 PivotPanel 및 PivotGrid에서 작동하는 PivotChart 컨트롤도 제공합니다. PivotGrid와 같이 PivotChart는 PivotPanel의 영역에서 변경 사항을 반영하도록 자동으로 업데이트됩니다.

PivotChart 추가는 PivotGrid 및 PivotPanel 추가와 같이 간단합니다. index.html 파일을 열고 다음과 같이 수정합니다.

<div class="flextable">
<div id="pivotPanel"></div>
<div id="pivotGrid"></div>
</div>
<div id-"pivotChart"></div>

이제 index.js 파일 내에서 다음을 추가합니다.

import * as wjOlap from '@grapecity/wijmo.olap';
import './styles.css';

var products = [...];
var agents = [...];

function randomInt(min, max) {...}

function getOrderList(count) {...}

var ng = new wjOlap.PivotEngine({...});

var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', {});

var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', {});

var pivotChart = new wjOlap.PivotChart('#pivotChart', {
 itemsSource: ng,
 showTitle: true,
 showLegend: 'Auto'
});

다 끝났습니다! PivotEngine을 PivotChart의 itemsSource로 전달하기만 하면 됩니다.

이제 응용 프로그램을 저장하여 다시 로드하고 Value 영역에 필드를 추가하는 경우 PivotChart에 반영된 모습을 볼 수 있습니다.

아래 이미지를 살펴보십시오.