리포트 시트 데이터 차트
SpreadJS는 리포트 시트에서 데이터 차트를 지원하여 데이터를 시각적으로 보다 직관적으로 표현할 수 있도록 합니다.
데이터 차트는 데이터 비교 및 분석을 간소화하고 가독성을 향상시켜 보다 정확한 의사결정을 돕습니다.
또한 데이터 차트는 더 강력하고 유연한 데이터 바인딩 기능을 제공하며, 데이터 매니저의 데이터 테이블 내부의 데이터를 직접 바인딩할 수 있고 더 강력한 스타일 설정 기능도 제공합니다.
리포트 시트의 데이터 차트는 다음 두 가지 유형을 지원합니다:
Float 차트
Float 차트는 리포트 시트 내의 원하는 위치에 데이터 차트를 자유롭게 추가할 수 있는 기능입니다.
Float 차트의 위치는 보고서가 생성된 후 차트의 좌측 상단이 위치하는 셀을 기준으로 계산됩니다.
또한 Float 차트의 위치는 리포트의 위치에 따라 계산됩니다.
Float 차트는 Pagination 모드 설정도 가능하며, 리포트 제목 또는 리포트 끝 영역에 배치할 수 있습니다. 이 경우 Title 또는 End 영역과 함께 확장됩니다.
Float 차트는 셀 바인딩과 테이블 바인딩 모두를 지원합니다.
셀 바인딩의 경우, Design 모드에서는 보고서 데이터가 생성되지 않기 때문에 SpreadJS에서 제공하는 기본 데이터를 사용합니다.
반면 테이블 바인딩에서는 데이터가 테이블 내에 존재하기만 하면 최신 데이터를 사용하여 차트를 그릴 수 있으므로 Design 모드에서도 실제 데이터를 기반으로 그릴 수 있습니다.
아래는 리포트 시트에 Float 차트를 추가하는 예제 코드입니다:
// 통합문서에 리포트시트 추가
reportSheet = spread.addSheetTab(0, 'Float Chart', GC.Spread.Sheets.SheetType.reportSheet);
// 현재 리포트시트의 템플릿 시트 가져오기
const templateSheet = reportSheet.getTemplate();
//리포트시트에 Float Chart 추가
const chart = templateSheet.dataCharts.add("reportChart1", 230, 20, 300, 200, GC.Spread.Sheets.DataCharts.DataChartType.column);
chart.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Product' },
}
}
]
});
템플릿 셀 차트
템플릿 셀 차트는 리포트 시트의 템플릿 셀에 데이터 차트를 추가할 수 있는 기능입니다.
이 차트는 해당 셀과 함께 반복되며, 차트가 셀의 데이터를 가져올 때 현재 셀이 컨텍스트가 됩니다.
다음 예제 코드는 템플릿 셀의 type을 "Chart"로 설정하고, 템플릿 셀의 dataChartName을 설정하여 리포트 시트에 Template Cell Chart를 추가하는 방법을 보여줍니다:
// 통합문서에 리포트시트 추가
reportSheet = spread.addSheetTab(0, 'Cell Chart', GC.Spread.Sheets.SheetType.reportSheet);
// 현재 리포트시트에 템플릿 시트 가져오기
const templateSheet = reportSheet.getTemplate();
// 행 높이와 열 너비 설정
templateSheet.defaults.colWidth = 120;
templateSheet.setRowHeight(2, 60);
templateSheet.setColumnWidth(5, 300);
// 템플릿 셀에 대한 스타일 추가
const headerStyle = new GC.Spread.Sheets.Style();
headerStyle.backColor = "#6e8ec2";
headerStyle.foreColor = "#ffffff";
headerStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
templateSheet.getRange("A2:F2").setStyle(headerStyle);
const cellStyle = new GC.Spread.Sheets.Style();
cellStyle.backColor = "#f6f9ff";
cellStyle.foreColor = "#323232";
cellStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
cellStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
cellStyle.borderBottom = new GC.Spread.Sheets.LineBorder("rgb(216, 216, 216)", GC.Spread.Sheets.LineStyle.medium);
templateSheet.getRange("A3:E3").setStyle(cellStyle);
// 템플릿 셀 추가
['Region', "ProductCategory", "Product", "Sales", "Return"].forEach((x, r) => {
templateSheet.setValue(1, r, x);
if (r <= 2) {
templateSheet.setTemplateCell(2, r, {
type: "Group",
binding: `Sales[${x}]`,
spillDirection: "Vertical",
context: {
horizontal: "Default",
vertical: "Default"
}
})
}
if (r > 2) {
templateSheet.setTemplateCell(2, r, {
type: "Summary",
binding: `Sales[${x}]`,
spillDirection: "Vertical",
aggregate: "Sum",
context: {
horizontal: "Default",
vertical: "Default"
}
})
}
})
// 리포트시트에 템플릿 셀 차트 추가
const chart = templateSheet.dataCharts.add("reportChart1", 20, 20, 400, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
// 데이터 차트 구성 설정
chart.setChartConfig({
tableName: 'Sales',
plots: [
{
type: GC.Spread.Sheets.DataCharts.DataChartType.line,
encodings: {
values: [{ field: 'Sales', displayName: "Sales" }, { field: 'Return', displayName: "Return" },],
category: { field: 'Product', displayName: "Product" },
}
}
]
});
// 템플릿 셀 "type" 과 "dataChartName" 설정
templateSheet.setTemplateCell(2, 5, {
type: "Chart",
context: {
horizontal: "Default",
// 수직 컨텍스트는 A3 셀
// Template Cell Chart는 A3와 함께 반복
vertical: "A3"
},
dataChartName: "reportChart1"
})