# 테이블 참조 수식을 사용하여 차트 추가

## Content

**SpreadJS는 테이블에서 [구조화된 참조 수식](/spreadjs/docs/features/tablegen/structref)을 지원합니다.** SpreadJS의 차트가 전체 테이블 또는 테이블의 특정 열에 테이블 구조 참조를 사용하여 바인딩되어 있는 경우, 테이블에 대한 업데이트는 런타임 시 차트의 시리즈나 데이터 값을 자동으로 업데이트합니다.
차트를 만들기 위해 사용할 수 있는 구조화된 테이블 참조 전략은 세 가지가 있으며, 아래 섹션에서 각각의 전략에 대해 설명합니다.

* **차트의 데이터 소스가 전체 테이블 범위인 경우**
    차트를 전체 테이블 범위를 사용하여 생성한 경우, 테이블의 범위가 조정되거나 행 및 열이 추가, 삭제되거나 자동 확장(auto-expanded) 동작이 영향을 받으면 차트의 시리즈도 동시에 업데이트됩니다. 다음 GIF는 이를 보여줍니다.
    ![entirerange-chart-table structure.6f98a2.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/entirerange-chart-table%20structure.6f98a2.51a8b6.gif)
    다음 코드 샘플은 구조화된 참조를 사용하여 전체 테이블을 데이터 소스로 설정하는 방법을 보여줍니다:

    ```javascript
    // 전체 테이블 범위를 데이터 범위로 차트 추가
    var chart1 = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 150, 400, 200, "Table1[[#Headers],[#Data]]");
    ```
* **차트의 데이터 소스가 테이블의 특정 열인 경우**
    테이블 작업이 차트에 바인딩된 특정 열의 데이터를 변경할 경우, 차트는 새로운 데이터에 따라 업데이트되지만, 시리즈는 변경되지 않습니다. 다음 GIF는 이를 보여줍니다.
    ![specific column-chart-table structure.a0b564.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/specific%20column-chart-table%20structure.a0b564.c923fa.gif)
    다음 코드 샘플은 테이블의 특정 열을 구조화된 참조 방식으로 사용하여 차트를 생성하는 방법을 보여줍니다:

    ```javascript
    // 테이블의 특정 열 범위를 차트 범위로 설정
    var chart2 = sheet.charts.add('chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 500, 150, 400, 200, "Table1[[#Headers],[#Data],[Name]],Table1[[#Headers],[#Data],[Age]]");
    ```
* **차트의 데이터 소스가 테이블 구조 참조와 일반 범위의 조합인 경우**
    차트의 데이터 소스가 테이블 구조 참조와 일반 범위의 조합으로 정의된 경우, 차트는 다음 GIF와 같이 업데이트됩니다.
    ![combo-chart-tablestructure.34a88b.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/216c2e7e-5246-4c37-8843-3854aa344a6a/combo-chart-tablestructure.34a88b.1975d4.gif)
    다음 코드 샘플은 테이블 구조 참조와 일반 범위를 결합하여 차트의 데이터 소스를 설정하는 방법을 보여줍니다:

    ```javascript
    // 테이블 구조 참조와 일반 범위를 조합하여 차트 범위를 설정
    var chart3 = sheet.charts.add('chart3', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 400, 400, 200, "Table1[[#Headers],[#Data],[Id]],Sheet1!D1:D4");
    ```