# PivotChart

## Content

피벗 그리드는 훌륭하지만, 경우에 따라 차트가 요약된 데이터를 전달하는 데 더 효과적일 수 있습니다.
**PivotChart**는 **FlexChart** 컨트롤의 확장이므로 비슷한 속성을 가지고 있습니다.

**PivotChart**를 사용하려면 **PivotChart.itemsSource** 속성을 **PivotEngine** 또는 **PivotPanel**의 인스턴스로 설정하여 두 구성 요소를 연결합니다.

**PivotEngine** 사용:

```javascript
var ng = new wjOlap.PivotEngine({
    itemsSource: getData(),
    valueFields: ['Amount'],
    rowFields: ['Buyer', 'Type'],
});

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

**PivotPanel** 사용:

```javascript
var ng = new wjOlap.PivotEngine({
    itemsSource: getData(),
    valueFields: ['Amount'],
    rowFields: ['Buyer', 'Type'],
});

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

## 차트 유형

**PivotChart** 6가지 차트 유형을 지원합니다. 아래의 **PivotChartType** 열거형에서 선택할 수 있습니다.

| 차트 유형 | 값 | 설명 |
| ----- | --- | --- |
| Column  | 0 | 수직 막대를 표시하며, 카테고리 간의 항목 값을 비교할 수 있습니다. |
| Bar  | 1 | 수평 막대를 표시합니다. |
| Line | 2 | X와 Y 좌표를 사용하여 데이터 내의 패턴을 표시합니다. |
| Scatter | 3 | 시간의 경과나 카테고리 간의 추세를 표시합니다. |
| Area | 4 | 선 차트와 함께 선 아래의 영역이 색으로 채워집니다. |
| Pie | 5 | 파이 차트를 표시합니다. |

특정 차트를 사용하려면 **PivotChart**의 **chartType** 속성을 위의 값 중 하나로 설정하세요.

```javascript
pivotChart.chartType = wjOlap.PivotChartType.Column
// or
pivotChart.chartType = 0;
```

## 제목

차트의 **showTitle** 속성을 사용하여 차트에 자동 생성된 제목을 포함할지 결정할 수 있습니다. 기본적으로 이 속성은 true로 설정되어 있어, 속성 설정을 생략하면 제목이 표시됩니다.

## 범례


차트의 **showLegend** 속성을 사용하여 차트에 자동 생성된 범례를 포함할지 결정할 수 있습니다:
**wijmo.olap.LegendVisibility** 열거형을 사용하여 동작을 결정합니다.

| 옵션 | 값 | 설 |
| --- | --- | --- |
| Always | 0 | 항상 범례 표시 |
| Never | 1 | 범례 절대 표시하지 않음 |
| Auto | 2 | 차트의 시리즈가 두 개 이상있는 경우에만 범례 표시 |

```javascript
pivotChart.showLegend = wjOlap.LegendVisibility.Column
// or
pivotChart.showLegend = 0;
```

## 내보내기

PivotChart를 내보낼 수도 있습니다. 차트의 **saveImageToFile** 메서드를 사용하여 차트를 이미지 파일로 내보낼 수 있습니다.
이 예제는 버튼의 이벤트 리스너를 사용하여 작업을 수행합니다.

```javascript
// export the chart to an image
document.getElementById('export').addEventListener('click', function(e) {
	if (e.target instanceof HTMLButtonElement) {
    	var ext = e.target.textContent.trim();
    	pivotChart.saveImageToFile('FlexChart.png');  
    }
});
```