SYIDAX / DATA GRID
선택 데이터를 차트로 PRO
선택 범위와 연결된 차트를 만들고 데이터 변경에 맞춰 갱신합니다.
선택 데이터를 차트로샘플 주문 데이터
120 rowsGrid를 불러오는 중입니다…
최근 결과
앱에서 범위 선택을 켜고 항목 이름과 비교할 숫자가 포함된 범위를 고릅니다. 서로 다른 단위의 숫자를 한 축에 섞지 않는 것이 좋습니다.
코드 보기
현재 미리보기
코드에 포함된 샘플 데이터 · 6행
사용 가이드
#주문 표의 일부 숫자를 선택해 곧바로 차트로 비교하고, 표의 변경도 차트에 반영하고 싶을 때 사용합니다.
앱에서 연결하는 순서
- 차트에 넣을 범위 선택
앱에서 범위 선택을 켜고 항목 이름과 비교할 숫자가 포함된 범위를 고릅니다. 서로 다른 단위의 숫자를 한 축에 섞지 않는 것이 좋습니다.
- 차트 생성 연결
사용자 버튼 동작에서 createRangeChart에 범위와 차트 유형을 전달합니다. 관련 API에서 필요한 옵션과 반환값을 확인하세요.
- 데이터와 차트 비교
앱에서 원본 값을 바꾸고 차트 결과도 확인하세요. 차트를 닫을 때는 생성한 차트의 수명주기도 정리합니다.
확인할 결과
선택 범위에 연결된 차트로 표의 수치를 시각적으로 비교할 수 있습니다.
현재 작업 화면에는 차트 생성 버튼이나 차트 영역이 없습니다. 범위 선택만 켠다고 차트가 자동으로 생성되지는 않습니다.
알아두면 쉬운 용어
- createRangeChart
- 선택한 데이터 범위에 연결된 차트를 만드는 메서드입니다.
- 범위 연결
- 차트가 어떤 표의 어떤 셀을 원본으로 사용하는지 정한 관계입니다.
제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.
API reference
#이벤트4
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
PRO | SyGridChartEvent | the four outbound chart events, on ONE emitter each. |
PRO | SyGridChartEvent | 이름을 선택해 타입 계약을 확인하세요. |
PRO | SyGridChartEvent | 이름을 선택해 타입 계약을 확인하세요. |
PRO | SyGridChartEvent | 이름을 선택해 타입 계약을 확인하세요. |
메서드17
| 메서드 / 인수 | 반환 타입 | 설명 |
|---|---|---|
PRO params: SyGridChartCreateParams | Promise<SyGridChartCreateResult> | create a linked chart from the current canonical range (or from explicit params) and mount a real `<sy-chart>` into a grid-owned panel or the caller's container. |
PRO chartId: string, patch: SyGridChartUpdatePatch | Promise<SyGridChartUpdateResult> | change a live chart's type, source window or properties. |
PRO chartId: string | Promise<SyGridChartDestroyResult> | destroy one chart and free every resource it holds. |
PRO | Promise<SyGridChartReport[]> | the live chart refs (never a lie about liveness). |
PRO mutation?: SyGridChartSyncMutation | Promise<SyGridChartSyncReport> | re-derive every linked chart against the CURRENT view. The generation advances first, so a re-presented view is a no-op at tolerance zero rather than a re-render. |
PRO permissions?: SyGridChartPermissions | Promise<SyGridChartMenuReport> | the menu/wizard MODEL: what this selection may be charted as. |
PRO permissions?: SyGridChartPermissions | Promise<SyGridChartPanelReport> | open the rendered tool panel: a `role="dialog"` with a `role="menu"` of every concrete type, roving tabindex, 44px touch targets and RTL-aware arrow keys. |
PRO | Promise<SyGridChartPanelReport> | close the tool panel and release its wizard. |
PRO | Promise<SyGridChartPanelReport> | the panel's current focus/touch/RTL truth, measured. |
PRO | Promise<SyGridChartCreateResult> | activate the panel's focused menu item (Enter/Space). |
PRO | Promise<SyGridChartCaptureResult> | capture every live chart into the versioned model envelope. |
PRO envelope: unknown | Promise<SyGridChartRestoreResult> | restore charts from a persisted envelope against THIS grid. |
PRO chartId: string, request: SyGridChartExportRequest | Promise<SyGridChartExportResult> | resolve an export and ask the ELEMENT for the pixels. |
PRO chartId: string, colId: string, action: SyGridChartCrossFilterAction, categories: unknown[] | Promise<SyGridChartCrossFilterResult> | a chart gesture becomes a real grid filter model. |
PRO | Promise<SyGridChartCrossFilterResult> | drop every chart-owned filter; external filters are untouched. |
PRO chartId: string | Promise<SyGridChartAccessibleReport | null> | the accessible summary: the ELEMENT's own data table fed the grid's projection, plus the focus stops the RENDERED panel exposes and the violations the predicate finds in them. |
PRO | Promise<SyGridChartFleetReport> | the fleet/teardown ledger: live charts, open handles, leaks. |
EXPLORE CAPABILITIES
기능별로 자세히 살펴보기
기능별 사용 상황과 설정 방법을 살펴보세요. 직접 체험하는 예제와 앱에서 연결하는 기능을 각 가이드에 안내합니다.