# 리포트 시트 데이터 차트 

## Content

SpreadJS는 리포트 시트에서 **데이터 차트**를 지원하여 데이터를 시각적으로 보다 직관적으로 표현할 수 있도록 합니다. **데이터 차트**는 데이터 비교 및 분석을 간소화하고 가독성을 향상시켜 보다 정확한 의사결정을 돕습니다.
또한 **데이터 차트**는 더 강력하고 유연한 데이터 바인딩 기능을 제공하며, 데이터 매니저의 데이터 테이블 내부의 데이터를 직접 바인딩할 수 있고 더 강력한 스타일 설정 기능도 제공합니다.
리포트 시트의 **데이터 차트**는 다음 두 가지 유형을 지원합니다:

* **[움직이는 차트](/spreadjs/docs/v19/features/reportsheet/report-sheet-data-carts#움직이는-차트)**
* **[템플릿 셀 차트](/spreadjs/docs/v19/features/reportsheet/report-sheet-data-carts#%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%85%80-%EC%B0%A8%ED%8A%B8)**

## 움직이는 차트

**움직이는 차트**는 리포트 시트 내의 원하는 위치에 **데이터 차트**를 자유롭게 추가할 수 있는 기능입니다.
움직이는 **차트**의 위치는 보고서가 생성된 후 차트의 좌측 상단이 위치하는 셀을 기준으로 계산됩니다.
또한 움직이는 차트의 위치는 리포트의 위치에 따라 계산됩니다.
움직이는 차트는 **Pagination 모드** 설정도 가능하며, **리포트 제목** 또는 **리포트 끝** 영역에 배치할 수 있습니다. 이 경우 Title 또는 End 영역과 함께 확장됩니다.
움직이는 차트는 **셀 바인딩**과 **테이블 바인딩** 모두를 지원합니다.

* **셀 바인딩**의 경우, Design 모드에서는 보고서 데이터가 생성되지 않기 때문에 SpreadJS에서 제공하는 기본 데이터를 사용합니다.
* 반면 **테이블 바인딩**에서는 데이터가 테이블 내에 존재하기만 하면 최신 데이터를 사용하여 차트를 그릴 수 있으므로 Design 모드에서도 실제 데이터를 기반으로 그릴 수 있습니다.

아래는 리포트 시트에 움직이는 차트를 추가하는 예제 코드입니다:

```javascript
// 통합문서에 리포트 시트 추가
reportSheet = spread.addSheetTab(0, 'Float Chart', GC.Spread.Sheets.SheetType.reportSheet);

// 현재 리포트 시트의 템플릿 시트 가져오기
const templateSheet = reportSheet.getTemplate();

//리포트 시트에 움직이는 차트 추가
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' },
            }
        }
    ]
});
```

![float-chart.e532a4](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/float-chart.e532a4.275abc.png)

## 템플릿 셀 차트

**템플릿 셀 차트**는 리포트 시트의 템플릿 셀에 **데이터 차트**를 추가할 수 있는 기능입니다.
이 차트는 해당 셀과 함께 반복되며, 차트가 셀의 데이터를 가져올 때 현재 셀이 컨텍스트가 됩니다.
다음 예제 코드는 템플릿 셀의 `type`을 `"Chart"`로 설정하고, 템플릿 셀의 `dataChartName`을 설정하여 리포트 시트에 템플릿 셀 차트를 추가하는 방법을 보여줍니다:

```javascript
// 통합문서에 리포트 시트 추가 
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"
})
```

![template-cell-chart.666be5](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/9c3d6948-546a-4e49-bd0d-d1a9991a1a68/template-cell-chart.666be5.fe146c.png)