설치 · Sixtyfold Components

Sixtyfold 패키지는 ESM 전용이며 @sixtyfold npm 스코프에 게시됩니다. Core, Line, Stock 브라우저 런타임은 서드파티 런타임 의존성이 없으며; Line과 Stock은 Core에만 의존합니다. 프레임워크 어댑터는 호스트 프레임워크를 peer dependency로 선언하고, SSR은 애플리케이션이 제공하는 Canvas2D 구현을 사용하며, 선택적 MCP 개발 도구는 별도의 로컬 프로세스로 실행됩니다.

패키지 색인

필요	설치	가져오기/참조
선형, 범위, 막대, 포인트 또는 누적 영역 차트	`@sixtyfold/line`	`LineChart` 및 `LineChartOptions`
캔들스틱, OHLCV, 거래량 또는 지표 차트	`@sixtyfold/stock`	`StockChart` 및 `StockChartOptions`
React, Vue, Angular, Svelte 또는 SolidJS 호스트	`@sixtyfold/<framework>` 및 하나의 차트 엔진	공유 어댑터 계약
정적 서버 렌더링 차트	`@sixtyfold/ssr` 및 Canvas2D 구현	서버 사이드 렌더링
공개 외관 사전설정	`@sixtyfold/themes`	테마
로컬 AI 코딩 도구 컨텍스트	`@sixtyfold/mcp`	Model Context Protocol(MCP) 도구, 리소스 및 프롬프트

pnpm add @sixtyfold/line@1

npm install @sixtyfold/stock@1

필요할 때만 선택적 패키지 추가:

pnpm add @sixtyfold/themes@1 @sixtyfold/ssr@1

프레임워크 어댑터는 별도 패키지입니다. 하나의 어댑터와 해당 애플리케이션에서 사용하는 차트 엔진만 설치하세요:

# React line chart — stock is not installed
pnpm add @sixtyfold/react@1 @sixtyfold/line@1

# Vue stock chart — line is not installed
pnpm add @sixtyfold/vue@1 @sixtyfold/stock@1

동일한 패턴은 @sixtyfold/angular, @sixtyfold/svelte, @sixtyfold/solid를 통해 제공됩니다. 그들의 /line 또는 /stock 진입점을 임포트하세요. 수명 주기, SSR 및 타입화된 배열 예시는 Framework adapters를 참조하세요.

선택적 MCP 개발자 도구

@sixtyfold/mcp는 AI 코딩 도구용 별도의 로컬 프로세스입니다. 버전이 명시된 API를 검사하고, 최소 패키지 집합을 권장하며, 프레임워크 통합을 생성하고, 차트 옵션을 검사하며, 렌더링 또는 성능 문제 진단을 도와줄 수 있습니다.

{
  "mcpServers": {
    "sixtyfold": {
      "command": "npx",
      "args": ["-y", "@sixtyfold/mcp@1"]
    }
  }
}

차트 종속성은 아니며 브라우저 번들에 포함되지 않고 Sixtyfold 사용에 필수적이지 않습니다. 전체 도구, 개인정보 및 검증 참조는 MCP 서버를 참조하세요.

최소 라인 차트

캔버스에 구체적인 CSS 크기를 지정하세요. Sixtyfold는 요소를 관찰하여 활성 디바이스 픽셀 비율로 백킹 스토어 크기를 결정합니다.

<canvas id="chart" style="display:block;width:100%;height:420px"></canvas>

import { LineChart } from "@sixtyfold/line";

const canvas = document.querySelector<HTMLCanvasElement>("#chart");
if (!canvas) throw new Error("Chart canvas was not found");

const chart = new LineChart(canvas, {
  renderMode: "auto",
  axis: { bottom: { format: "time" } },
  series: [{ name: "Temperature", unit: { suffix: " °C", decimals: 1 } }],
});

await chart.initialize();
chart.setData({
  x: new Float64Array([1711929600000, 1711933200000, 1711936800000]),
  y: new Float64Array([12.4, 13.1, 12.8]),
  length: 3,
});

번들러 및 보안 정책

Worker 구성은 패키지에서 내보낸 ESM 워커 URL을 사용합니다. 번들러가 컴파일된 파일을 퍼블릭 디렉터리로 복사하는 대신 패키지 임포트를 처리하도록 하십시오. 콘텐츠 보안 정책은 worker-src 'self'를 통해 동일 출처 Worker를 허용해야 합니다; 허용하지 않는 경우 renderMode: "auto"는 메인 스레드로 대체됩니다.

Angular의 애플리케이션 빌더는 예외입니다: 패키지된 행이나 기본 dist/assets 디렉터리를 애플리케이션의 assets 구성에 추가하십시오. 정확한 구성은 Framework adapters에서 보여줍니다.

Sixtyfold는 글꼴, 분석, 테마, 데이터 또는 기타 네트워크 리소스를 자동으로 로드하지 않습니다. 호출자가 명시적으로 URL을 제공하는 오버레이 이미지(즉 URL 기반)는 예외입니다.

정리

chart.destroy();

차트를 파괴한 후에는 재사용하지 마십시오. 새 캔버스를 연결할 때는 새 인스턴스를 생성하십시오.