Chart overview.
질문에 맞는 차트를 고르고, 데이터·상호작용·전달 방식을 함께 설계하세요.
질문에 맞는 표현
#시간에 따른 변화
Line·Area·Theme River로 추세와 구성을 읽습니다.
항목 간 차이Column·Bar·Lollipop·Dumbbell로 수치 차이를 비교합니다.
분포와 불확실성Histogram·Box Plot·Error Bar로 분포와 오차를 표현합니다.
구성과 계층Pie·Treemap·Sunburst·Icicle로 전체와 부분을 보여줍니다.
연결과 흐름Sankey·Chord·Network Graph로 관계를 탐색합니다.
공간·일정·특수 데이터Geo Map·Gantt·Stock·3D·Wafer에서 데이터 구조에 맞는 차트를 선택합니다.
차트를 선택한 뒤 각 문서의 데이터 계약과 실행 예제에서 입력 형태를 확인하세요. 예제 선택과 옵션은 적용 코드와 함께 바뀝니다. 로고 설정은 Getting Started의 Branding 문서에서 확인하세요.
직접 태그와 공통 파사드
#- 직접 태그 sy-line-chart·sy-sankey 등은 해당 차트의 고유 속성과 메서드를 사용합니다. 개별 문서는 이 방식으로 설명합니다.
- 공통 파사드 sy-chart의 type으로 종류를 선택합니다. 공통 메뉴·데이터 표·내보내기와 유형 전환을 제공합니다. 특화 옵션의 이름은 직접 태그와 다를 수 있습니다.
- 보조 컴포넌트 Data Zoom·Navigator·Visual Map은 같은 문서의 대상 차트 id를 for로 참조합니다. Stock·Wafer 보조 차트는 공통 시간·좌표 데이터를 공유합니다.
패키지와 실행 환경
#- Community 기본 차트 26종과 범위·색상 컨트롤, 웨이퍼 보조 컴포넌트를 포함합니다. Syidax 로고를 표시합니다.
- Pro @syidax/advanced-pro는 Community 기능과 Pro 차트를 포함합니다. 해당 기능의 라이선스를 등록한 후 사용합니다.
- WebGPU Pro 전용 GPU 렌더러는 WebGPU 어댑터가 있는 브라우저와 HTTPS 또는 localhost 환경이 필요합니다. 지원하지 않는 환경에서는 실행 안내와 데이터·코드를 확인하세요.
- 로고 brand-position은 모든 로고 표시 차트에서 공통입니다. Pro의 chart.branding 권한으로 brand-logo를 교체하거나 none으로 제거할 수 있습니다.
Community와 Pro는 같은 앱에 중복 등록하지 말고 앱에 맞는 한 패키지를 선택하세요. 설치 경로와 라이선스 등록은 설치와 연결에서 확인하세요.