설치와 연결.
npm 설치부터 CSS, 차트 등록, Pro 라이선스 연결까지 안내합니다.
준비 사항
#Node.js와 npm, 패키지 import 및 CSS import를 처리하는 앱 빌드 도구를 준비하세요. 프로젝트의 package.json이 있는 폴더에서 설치합니다. JavaScript 예제는 앱 진입 파일에 넣고 개발 서버에서 실행하세요.
npm 설치
#Community
npm install @syidax/advanced@latestPro
npm install @syidax/advanced-pro@latest사용할 에디션 하나를 선택하세요. 두 에디션 모두 공개 npm에서 설치하며, Pro 기능에는 유효한 제품 라이선스가 필요합니다. Pro로 전환하면 CSS, 컴포넌트, 라이선스 import를 모두 같은 Pro 패키지로 맞춥니다.
Core Pro와 Chart/Grid를 함께 사용할 때
npm install @syidax/core@npm:@syidax/core-pro@latest @syidax/advanced-pro@latest이 조합에서는 Core Pro를 @syidax/core 별칭으로 설치하므로 Core의 CSS·컴포넌트·라이선스 import도 @syidax/core/…를 사용합니다. Chart/Grid는 @syidax/advanced-pro/…를 사용합니다. Chart/Grid Community를 사용하려면 명령의 @syidax/advanced-pro@latest을 @syidax/advanced@latest로 바꾸세요. Chart와 Grid는 같은 패키지에 포함됩니다.
차트 등록과 데이터 연결
#앱의 진입 파일에서 CSS를 불러오고 사용할 컴포넌트를 등록합니다. 다음은 Community Line 차트의 예시입니다.
import '@syidax/advanced/css/chart';
import { defineCustomElement } from '@syidax/advanced/components/sy-line-chart.js';
defineCustomElement();
const chart = document.createElement('sy-line-chart');
chart.series = [{ name: 'Orders', values: [12, 24, 18] }];
document.body.append(chart);개별 차트 문서의 ‘적용 코드’에는 해당 컴포넌트 등록, 전체 예제 데이터와 반응형 크기 처리가 들어 있습니다. 프로젝트에 설치한 패키지와 같은 import 경로를 사용하세요. Pro 패키지는 아래 라이선스 등록을 완료한 뒤 차트를 연결합니다.
Pro 라이선스 등록
#발급받은 인증서를 HTTPS 또는 localhost 환경에서 등록합니다. 라이선스 파일에는 서명된 인증서만 두고 서명용 비밀 키를 앱에 넣지 마세요. 아래는 Pro Candlestick 차트를 등록하는 예시입니다.
import '@syidax/advanced-pro/css/chart';
import { registerLicense } from '@syidax/advanced-pro/license';
import { defineCustomElement } from '@syidax/advanced-pro/components/sy-candlestick-chart.js';
const response = await fetch('/licenses/syidax.json');
if (!response.ok) throw new Error('라이선스를 불러오지 못했습니다.');
const result = await registerLicense(await response.json());
if (!result.ok) throw new Error('라이선스 등록에 실패했습니다.');
// 라이선스를 등록한 뒤 차트를 연결합니다.
defineCustomElement();사용하는 Pro 차트·렌더러·브랜딩 기능의 유효한 권한이 필요합니다. 배포받은 패키지의 LICENSE와 NOTICE를 함께 확인하세요. Visual Map 같은 보조 컨트롤을 연결할 때는 대상 차트의 등급도 확인하세요.