SYIDAX CHARTS

설치와 첫 차트

패키지를 연결하고 필요한 차트 요소를 등록한 뒤 데이터를 전달합니다.

패키지 설치

앱 프로젝트에서 필요한 기능에 따라 Community 또는 Pro를 공개 npm으로 설치합니다.

npm install @syidax/advanced@latest

npm install @syidax/advanced-pro@latest

Pro 기능을 사용하는 앱은 @syidax/advanced-pro를 설치하고 CSS·컴포넌트·라이선스 import를 모두 이 패키지로 통일합니다.

설치 파일과 HTML 실행 예제
공개 npm에서 Community 또는 Pro 설치

요소 등록과 데이터 연결

아래 코드는 번들러가 있는 앱의 진입 파일과 HTML입니다. 필요한 컴포넌트를 직접 등록합니다. 배열을 문자열 attribute로 넣지 말고 요소의 프로퍼티에 할당하세요.

javascript

import '@syidax/advanced/css/chart';
import { defineCustomElement } from '@syidax/advanced/components/sy-line-chart.js';

defineCustomElement();
await customElements.whenDefined('sy-line-chart');
const chart = document.querySelector('#vis');
chart.series = [{ name: '매출', values: [12, 18, 15, 24] }];
chart.xAxis = { kind: 'category', categories: ['1월', '2월', '3월', '4월'] };
chart.legend = true;

html

<div id="chart-container">
  <sy-line-chart id="vis" height="360" aria-label="월별 매출"></sy-line-chart>
</div>

크기와 해제

컨테이너 크기를 관찰하여 width를 갱신합니다. SPA 화면이 해제되면 observer와 앱에서 등록한 이벤트 리스너를 정리하세요.

javascript

const container = document.querySelector('#chart-container');
const observer = new ResizeObserver(([entry]) => {
  chart.width = Math.max(160, Math.floor(entry.contentRect.width));
});
observer.observe(container);

function dispose() {
  observer.disconnect();
}

Pro 라이선스

Pro 차트·렌더러·브랜딩 기능은 해당 권한이 있는 인증서를 등록한 뒤 사용합니다. 발급받은 서명된 인증서만 앱에 전달하며 서명용 비밀 키를 포함하지 않습니다.

javascript

import { registerLicense } from '@syidax/advanced-pro/license';

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('라이선스 등록에 실패했습니다.');
// 등록이 완료된 뒤 Pro 차트를 연결합니다.