[javascript] Svelte에서 차트(그래프)를 그리는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, Svelte 프로젝트를 설정해야 합니다. 프로젝트 디렉토리로 이동한 다음, 다음 명령을 실행하여 필요한 종속성을 설치합니다:

npm install svelte chart.js

이제 Svelte 컴포넌트를 작성해보겠습니다. 예를 들어, Chart.svelte라는 파일을 생성하고 다음과 같이 작성할 수 있습니다:

<script>
    import { onMount } from 'svelte';
    import Chart from 'chart.js';

    let chart;

    onMount(() => {
        const ctx = document.getElementById('myChart').getContext('2d');
        chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>

<canvas id="myChart" width="400" height="400"></canvas>

이 예제에서는 onMount 함수를 사용하여 컴포넌트가 마운트될 때 차트를 그리도록 설정합니다. Chart.js를 import하고 new Chart로 차트를 초기화합니다. 그리고 차트를 렌더링할 <canvas> 엘리먼트를 컴포넌트에 추가합니다.

이제 이 컴포넌트를 사용하여 다른 Svelte 컴포넌트에서 그래프를 그릴 수 있습니다. 예를 들어, App.svelte라는 파일에서 Chart.svelte를 import하고 사용할 수 있습니다:

<script>
    import Chart from './Chart.svelte';
</script>

<Chart />

위의 예제에서는 <Chart> 컴포넌트를 사용하여 그래프를 그릴 수 있습니다.

이는 Svelte에서 Chart.js를 사용하여 차트를 그릴 수 있는 예제입니다. 물론 더 많은 옵션과 다른 차트 유형을 사용할 수 있습니다. Chart.js 문서를 참조하여 필요한 경우 추가 기능을 알아보세요.