문서 › 프레임워크와 서버

Svelte

Svelte 컴포넌트로 82chart 쓰기.

npm i @82chart/core @82chart/svelte

<script>
  import { Chart82 } from '@82chart/svelte';
  import '@82chart/core/styles.css';

  const data = {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
</script>

<Chart82 type="bar" {data} options={{ title: '월별 매출', unit: '원' }} />

Svelte 5 컴포넌트: <Chart82 {type} {data} {options} {theme} onclick onready bind:chart />.
컴포넌트 대신 아무 요소에 붙이는 use:chart82 액션도 있습니다. 옵션 객체 하나를 받습니다.
data 는 새 객체를 넘길 때 다시 그립니다.

액션으로 쓰기

<script>
  import { chart82 } from '@82chart/svelte';
  let data = $state({ labels: ['A', 'B', 'C'], series: [{ data: [3, 5, 4] }] });
</script>

<div use:chart82={{ type: 'bar', data, onClick: (p) => console.log(p) }}></div>