# 선택 데이터를 차트로

Grid의 범위를 차트로 연결하면 같은 데이터로 표와 그래프를 함께 읽을 수 있습니다. 숫자 값만 고르면 되는 것이 아니라 범주 열과 값 열을 차트 종류에 맞게 선택해야 합니다.

Canonical: https://grid.syidax.com/ko/docs/features/integrated-charts/

<a id="understand"></a>

## 동작 원리와 선택 기준

생성 결과는 성공과 거절을 구분하는 보고서입니다. 성공 여부를 확인한 뒤 chartId로 수정·내보내기·해제를 연결합니다. 차트 컴포넌트 등록과 Pro 설정도 먼저 준비합니다.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 선택한 범위로 막대 차트 만들기

범주 열과 숫자 열을 포함하는 범위를 먼저 선택합니다.

```javascript
grid.rangeSelection = true;
const result = await grid.createRangeChart({ chartType: 'column' });
if (result.status === 'created') {
  console.log(result.chart.chartId);
} else {
  console.log(result.reason, result.detail);
}
```

결과 확인: 성공하면 Grid가 관리하는 패널에 차트가 생성됩니다. 선택이 없거나 지원하지 않는 데이터 조합이면 거절 사유를 읽습니다.

<a id="example-2"></a>

## 예제 2. 현재 표와 다시 맞추기

필터나 데이터 변경 뒤 살아 있는 차트를 확인하고 동기화 결과를 읽습니다.

```javascript
console.log(await grid.getChartRefs());
console.log(await grid.syncCharts());
```

결과 확인: 현재 뷰를 기준으로 차트 데이터가 다시 구성됩니다. 불필요하게 같은 차트를 계속 새로 만들지 않습니다.

<a id="example-3"></a>

## 예제 3. 화면 복원과 정리

사용자가 만든 차트 설정을 저장하고 나중에 같은 데이터 계약을 가진 Grid에서 복원합니다.

```javascript
const saved = await grid.getChartModels();
console.log(saved);
// 저장한 envelope를 복원할 때:
console.log(await grid.restoreChartModels(saved.envelope));
```

결과 확인: 캡처 결과의 issues도 확인하고 envelope만 복원에 전달합니다. 복원 결과에서 적용·거절을 확인합니다. 개별 차트를 닫을 때는 destroyChart(chartId)를 호출하고 앱이 만든 외부 컨테이너도 정리합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

그룹·피벗 결과 열은 원본 열과 식별자가 다릅니다. 현재 결과 열 모델을 확인하고 지원되는 차트 투영을 사용하세요.

차트 교차 필터와 앱이 건 외부 필터의 소유권을 구분하세요. resetChartCrossFilter()는 차트가 관리하는 필터를 해제하는 용도입니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [createRangeChart](https://grid.syidax.com/ko/docs/methods/createRangeChart.md) — 선택 범위 또는 명시적 소스로 연결 차트를 생성합니다. 성공 시 chartId, 실패 시 거절 이유를 확인합니다.
- [updateChart](https://grid.syidax.com/ko/docs/methods/updateChart.md) — 생성된 차트의 종류·소스 범위·속성을 바꾸고 결과를 반환합니다.
- [destroyChart](https://grid.syidax.com/ko/docs/methods/destroyChart.md) — 지정한 차트를 닫고 차트가 사용하는 자원을 해제합니다.
- [getChartRefs](https://grid.syidax.com/ko/docs/methods/getChartRefs.md) — 현재 살아 있는 연결 차트의 식별자와 상태를 읽습니다.
- [syncCharts](https://grid.syidax.com/ko/docs/methods/syncCharts.md) — 현재 Grid 뷰를 기준으로 연결 차트의 데이터 투영을 다시 계산합니다.
- [getChartMenuModel](https://grid.syidax.com/ko/docs/methods/getChartMenuModel.md) — 현재 선택과 권한으로 만들 수 있는 차트 메뉴 모델을 읽습니다.
- [openChartToolPanel](https://grid.syidax.com/ko/docs/methods/openChartToolPanel.md) — 사용 가능한 차트를 고르는 실제 도구 패널을 엽니다.
- [closeChartToolPanel](https://grid.syidax.com/ko/docs/methods/closeChartToolPanel.md) — 차트 생성 도구 패널을 닫고 관련 선택 흐름을 정리합니다.
- [getChartToolPanelReport](https://grid.syidax.com/ko/docs/methods/getChartToolPanelReport.md) — 차트 도구 패널의 열림·포커스·접근성 상태를 읽습니다.
- [activateChartToolPanelItem](https://grid.syidax.com/ko/docs/methods/activateChartToolPanelItem.md) — 차트 도구 패널에서 현재 포커스된 항목을 실행해 차트를 생성합니다.
- [getChartModels](https://grid.syidax.com/ko/docs/methods/getChartModels.md) — 살아 있는 차트들을 버전 포함 envelope와 캡처 문제 목록으로 읽습니다. 복원에는 결과의 envelope를 전달합니다.
- [restoreChartModels](https://grid.syidax.com/ko/docs/methods/restoreChartModels.md) — 저장한 차트 envelope를 현재 Grid의 데이터 계약에 맞춰 복원하고 결과를 반환합니다.
- [exportChartImage](https://grid.syidax.com/ko/docs/methods/exportChartImage.md) — 지정한 연결 차트의 이미지 출력을 요청하고 결과를 반환합니다.
- [applyChartCrossFilter](https://grid.syidax.com/ko/docs/methods/applyChartCrossFilter.md) — 차트의 선택 동작을 Grid 필터 모델에 반영합니다.
- [resetChartCrossFilter](https://grid.syidax.com/ko/docs/methods/resetChartCrossFilter.md) — 차트가 소유한 교차 필터를 해제합니다. 앱의 외부 필터는 그대로 유지합니다.
- [getChartAccessibleSummary](https://grid.syidax.com/ko/docs/methods/getChartAccessibleSummary.md) — 차트가 제공하는 데이터 요약과 접근성 검사 정보를 읽습니다.
- [getChartFleetReport](https://grid.syidax.com/ko/docs/methods/getChartFleetReport.md) — 현재 차트 집합과 열린 자원·정리 상태를 보고합니다.
- [chartCreated](https://grid.syidax.com/ko/docs/events/chartCreated.md) — Grid 연결 차트가 생성되었을 때 발생합니다. 차트 식별자로 앱의 차트 목록을 관리합니다.
- [chartRangeChanged](https://grid.syidax.com/ko/docs/events/chartRangeChanged.md) — 연결 차트의 소스 범위가 바뀌었을 때 발생합니다.
- [chartOptionsChanged](https://grid.syidax.com/ko/docs/events/chartOptionsChanged.md) — 연결 차트의 설정이 바뀌었을 때 발생합니다. 저장한 차트 모델을 갱신할 수 있습니다.
- [chartDestroyed](https://grid.syidax.com/ko/docs/events/chartDestroyed.md) — 연결 차트가 해제되었을 때 발생합니다. 앱에서 유지하던 참조와 외부 자원을 정리합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/integrated-charts) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.