syidaxgrid
홈 가격 내 정보

GRID FEATURE · PRO

선택 데이터를 차트로

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

Markdown 원문 Features

동작 원리와 선택 기준

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

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

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

예제 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가 관리하는 패널에 차트가 생성됩니다. 선택이 없거나 지원하지 않는 데이터 조합이면 거절 사유를 읽습니다.

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

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

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

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

예제 3. 화면 복원과 정리

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

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

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

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

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

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

함께 읽기