PivotChart
피벗 그리드는 훌륭하지만, 경우에 따라 차트가 요약된 데이터를 전달하는 데 더 효과적일 수 있습니다.
PivotChart는 FlexChart 컨트롤의 확장이므로 비슷한 속성을 가지고 있습니다.
PivotChart를 사용하려면 PivotChart.itemsSource 속성을 PivotEngine 또는 PivotPanel의 인스턴스로 설정하여 두 구성 요소를 연결합니다.
PivotEngine 사용:
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 사용:
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 속성을 위의 값 중 하나로 설정하세요.
pivotChart.chartType = wjOlap.PivotChartType.Column
// or
pivotChart.chartType = 0;제목
차트의 showTitle 속성을 사용하여 차트에 자동 생성된 제목을 포함할지 결정할 수 있습니다. 기본적으로 이 속성은 true로 설정되어 있어, 속성 설정을 생략하면 제목이 표시됩니다.
범례
차트의 showLegend 속성을 사용하여 차트에 자동 생성된 범례를 포함할지 결정할 수 있습니다:
wijmo.olap.LegendVisibility 열거형을 사용하여 동작을 결정합니다.
옵션 | 값 | 설 |
|---|---|---|
Always | 0 | 항상 범례 표시 |
Never | 1 | 범례 절대 표시하지 않음 |
Auto | 2 | 차트의 시리즈가 두 개 이상있는 경우에만 범례 표시 |
pivotChart.showLegend = wjOlap.LegendVisibility.Column
// or
pivotChart.showLegend = 0;내보내기
PivotChart를 내보낼 수도 있습니다. 차트의 saveImageToFile 메서드를 사용하여 차트를 이미지 파일로 내보낼 수 있습니다.
이 예제는 버튼의 이벤트 리스너를 사용하여 작업을 수행합니다.
// 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');
}
});