SYIDAX CHARTS
설정과 데이터 모델
공통 sy-chart와 개별 태그는 진입점이 다르며, 지원하는 속성 이름과 타입도 확인해야 합니다.
공통 파사드와 직접 태그
sy-chart는 type으로 차트를 선택하는 공통 진입점입니다. sy-line-chart 같은 직접 태그는 해당 차트의 API를 노출합니다. 파사드의 모든 옵션이 모든 type에서 동작하는 것은 아닙니다. 차트 종류를 정한 다음 개별 차트의 데이터 계약과 공통 옵션의 관련 타입을 함께 확인하세요.
<sy-chart type="line" height="360"></sy-chart>
<sy-line-chart height="360"></sy-line-chart>| 직접 태그 | 직접 프로퍼티 | sy-chart 프로퍼티 |
|---|---|---|
| sy-icicle | direction | icicleDirection |
| sy-dendrogram | direction | dendrogramDirection |
| sy-flow-lines | routePath | flowLinesPath |
| sy-theme-river | offset | themeRiverOffset |
Attribute와 property
HTML에는 height="360"처럼 단순한 값을 설정합니다. JavaScript에서는 chart.height = 360처럼 대소문자를 구분하는 프로퍼티 이름을 사용합니다. 객체·배열·TypedArray·함수는 JavaScript 프로퍼티로 전달하세요. 각 옵션 문서에 두 이름과 정확한 타입을 함께 표기합니다.
chart.height = 360;
chart.xAxis = { kind: 'category', categories: ['A', 'B'] };
chart.series = [{ name: '수량', values: [12, 18] }];타입과 기본값 읽기
undefined는 미설정 상태이며, 0·false·빈 배열과 다릅니다. 타입의 물음표(?)는 선택 필드 또는 선택 인수를 뜻합니다. 기본값은 소스 선언을 그대로 표시하고, 실제 표시 결과는 선택한 차트·테마·입력 데이터에 영향을 받을 수 있습니다. 객체 타입 이름을 누르면 전체 선언과 관련 타입을 확인할 수 있습니다.
메서드와 이벤트
요소가 정의된 뒤 공개 메서드를 호출합니다. 메서드는 Promise를 반환하므로 await로 결과를 읽습니다. 이벤트는 addEventListener로 구독하고 CustomEvent.detail을 읽습니다. 이벤트 이름은 대소문자를 구분합니다.
내보내기와 메뉴
contextmenu로 기본 내보내기 메뉴를 켭니다. contextMenuItems는 기본 항목 뒤에 사용자 항목을 추가합니다. PNG·SVG 같은 이미지 내보내기는 로고 정책을 따르며, CSV 같은 데이터 파일에는 로고를 추가하지 않습니다.