RealGrid HELP3. 피벗의 행과 열, 값 필드 지정
들어가며
지난 강좌에서는 dataProvider의 필드와 피벗 필드를 맵핑하고 피벗 필드의 설정에 대하여 알아 보았습니다.
이번 강좌에서는 피벗화면을 구성하는 행, 열, 값 필드들을 개발자의 의도에 맞게 지정하는 방법에 대해 알아보도록 하겠습니다.
이론
행, 열, 값 필드 지정은 피벗 화면을 구성하는데 필수적인 두번째 단계 입니다.
setPivotFields()를 사용하여 피벗의 구성 형태를 지정할 수 있으며 각 필드들의 정렬방향을 지정할 수 있습니다. 또한 값 필드의 ValueType을 지정할 수 있습니다.
행과 열 필드 지정은 필수 지정요소는 아닙니다. 예를들어 고객사 별로 전체 합계만 행 단위로 보고 싶다면 행 필드속성에 고객사만 지정하고 값 필드속성에 보고 싶은 값 필드를 지정하면 됩니다.
pivot.setPivotFields({
rows: [{
name: "CustomerID",
direction: "ascending"
}],
values: [{
name: "UnitPrice",
expression: "sum"
}]
});
반대의 경우도 마찬가지 입니다. 고객사별 전체 합계를 열 단위로 보고 싶다면 열 필드속성에 고객사를 지정하면 됩니다.
pivot.setPivotFields({
columns: [{
name: "CustomerID",
direction: "ascending"
}],
values: [{
name: "UnitPrice",
expression: "sum"
}]
});
지정하는 방법
행과 열의 경우 정렬 방향을 지정하지 않을 경우 아래와 같이 간략한 방법으로 지정 가능 합니다.
pivot.setPivotFields({
columns: ["OrderYear", "OrderQuarter"],
rows: ["CustomerID"],
values: [{
name: "UnitPrice",
expression: "sum"
}]
});
정렬 방향을 지정하는 경우는 아래와 같이 설정 합니다.
pivot.setPivotFields({
columns: [{
name: "OrderYear",
direction: "ascending"
}, {
name: "OrderQuarter",
direction: "ascending"
}],
rows: [{
name: "CustomerID",
direction: "ascending"
}],
values: [{
name: "UnitPrice",
expression: "sum"
}]
});
ValueType
expression에 지정할 수 있는 ValueType은 sum, count, min, max, avg, distinct 입니다.
실습
열 필드로는 년도와 분기 행 필드로는 고객사와 제품명, 그리고 마지막으로 값 필드로는 판매액의 합계와 평균을 지정하여 피벗을 표시해보도록 하겠습니다.
-
필요한 필드들을 지정 합니다.
pivot.setFieldMapping([{ name: "CustomerID", sourceField: "CustomerID", fieldHeader: "고객사", valueEnable: false }, { name: "ProductName", sourceField: "ProductName", fieldHeader: "제품명", valueEnable: false }, { name: "OrderYear", sourceField: "OrderDate", dateType: "year", fieldHeader: "영업년도", valueEnable: false }, { name: "OrderHalf", sourceField: "OrderDate", dateType: "half", fieldHeader: "영업반기", valueEnable: false, displayLabels: { 1: "상반기", 2: "하반기" } }, { name: "UnitPriceSum", sourceField: "UnitPrice", fieldHeader: "판매액 합", numberFormat: "#,##0", labelEnable: false }, { name: "UnitPriceAvg", sourceField: "UnitPrice", fieldHeader: "판매액 평균", numberFormat: "#,##0", labelEnable: false }]); -
고객사, 제품명별 판매액의 합과 평균을 년, 반기 기준으로 분류하여 피벗으로 표시합니다.
pivot.setPivotFields({ columns: [{ name: "OrderYear", direction: "ascending" }, { name: "OrderHalf", direction: "ascending" }], rows: [{ name: "CustomerID", direction: "ascending" }, { name: "ProductName", direction: "ascending" }], values: [{ name: "UnitPriceSum", expression: "sum" }, { name: "UnitPriceAvg", expression: "avg" }] }); pivot.drawView();
실행화면
피벗 설정이 완료되지 않은 상태이기 때문에 버튼을 누르기 전까지는 빈 화면만 보입니다.
전체 소스코드
SCRIPT
<link rel="stylesheet" type="text/css" href="css/default_blue.css">
<script type="text/javascript" src="scripts/realgridjs-lic.js"></script>
<script type="text/javascript" src="scripts/realgridjs_eval.1.1.27.min.js"></script>
<script type="text/javascript" src="scripts/realgridjs-api.1.1.27.js"></script>
<script type="text/javascript" src="messages/realpivot-messages.js"></script>
<script type="text/javascript" src="scripts/realpivot_eval.0.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jszip.min.js"></script>
<script>
var pivot;
var dataProvider;
$(document).ready( function(){
RealGridJS.setRootContext("/script");
dataProvider = new RealGridJS.LocalDataProvider();
var fields = [{
fieldName: "OrderID"
}, {
fieldName: "CustomerID"
}, {
fieldName: "EmployeeID"
}, {
fieldName: "OrderDate",
dataType: "datetime",
datetimeFormat: "yyyy-MM-dd a hh:mm:ss",
amText: "오전",
pmText: "오후"
}, {
fieldName: "CompanyName"
}, {
fieldName: "Country"
}, {
fieldName: "Phone"
}, {
fieldName: "ProductName"
}, {
fieldName: "QuantityPerUnit"
}, {
fieldName: "Quantity",
dataType: "number"
}, {
fieldName: "UnitPrice",
dataType: "number"
}];
dataProvider.setFields(fields);
var datas = [{
"OrderID":"10248",
"CustomerID":"VINET",
"CustomerID2":"VINAC",
"EmployeeID":"5",
"OrderDate":"1996-01-04 오전 12:00:00",
"RequiredDate":"1996-08-01 오전 12:00:00",
"ShippedDate":"1996-07-16 오전 12:00:00",
"ShipVia":"3",
"Freight":"32.3800",
"ShipName":"Vins et alcools Chevalier\r\nVins et alcools Chevalier\r\nVins et alcools Chevalier",
"ShipAddress":"59 rue de l\u0027Abbaye",
"ShipCity":"Reims",
"ShipRegion":null,
"ShipPostalCode":"51100",
"ShipCountry":"France",
"CompanyName":"Vins et alcools Chevalier\r\n",
"Country":"France",
"Shipping":"True",
"SmallFlag":"http://dev.demo.realgrid.net/img/demo/smallflag/fr.png",
"NormalFlag":"http://dev.demo.realgrid.net/img/demo/normalflag/fr.png",
"Phone":"26.47.15.10",
"ProductName":"Queso Cabrales",
"QuantityPerUnit":"1 kg pkg.",
"Quantity":"1200",
"UnitPrice":"14.0000"
}, {
....
}];
dataProvider.fillJsonData(datas);
$("#btnView").click(function () {
pivot.setFieldMapping([{
name: "CustomerID",
sourceField: "CustomerID",
fieldHeader: "고객사",
valueEnable: false
}, {
name: "ProductName",
sourceField: "ProductName",
fieldHeader: "제품명",
valueEnable: false
}, {
name: "OrderYear",
sourceField: "OrderDate",
dateType: "year",
fieldHeader: "영업년도",
valueEnable: false
}, {
name: "OrderHalf",
sourceField: "OrderDate",
dateType: "half",
fieldHeader: "영업반기",
valueEnable: false,
displayLabels: {
1: "상반기",
2: "하반기"
}
}, {
name: "UnitPriceSum",
sourceField: "UnitPrice",
fieldHeader: "판매액 합",
numberFormat: "#,##0",
labelEnable: false
}, {
name: "UnitPriceAvg",
sourceField: "UnitPrice",
fieldHeader: "판매액 평균",
numberFormat: "#,##0",
labelEnable: false
}]);
pivot.setPivotFields({
columns: [{
name: "OrderYear",
direction: "ascending"
}, {
name: "OrderHalf",
direction: "ascending"
}],
rows: [{
name: "CustomerID",
direction: "ascending"
}, {
name: "ProductName",
direction: "ascending"
}],
values: [{
name: "UnitPriceSum",
expression: "sum"
}, {
name: "UnitPriceAvg",
expression: "avg"
}]
});
pivot.drawView();
});
});
</script>
HTML
<div id="realpivotDiv" style="width: 100%; height: 500px;"></div> <p></p> 1. <button type="button" class="btn btn-primary btn-xs" id="btnView">고객사, 제품명별 판매액의 합과 평균을 년, 반기 기준으로 분류</button>