많은 웹 개발자들이 데이터 시각화를 위해 Chart.js를 사용합니다. Chart.js는 사용하기 쉽고 다양한 차트 종류를 지원하며, 커스터마이징도 쉽게 할 수 있어 인기가 많습니다. 하지만, 대량의 데이터나 복잡한 차트를 다룰 때는 성능 이슈가 발생할 수 있습니다.

이번 블로그에서는 Chart.js를 경량화하고 성능을 최적화하는 몇 가지 방법을 알아보겠습니다.

1. 필요한 차트 유형만 로드하기

Chart.js는 다양한 차트 유형을 제공하지만, 실제로 필요한 차트만 로드하는 것이 효율적입니다. 차트 종류별로 별도의 UMD(Universal Module Definition) 번들을 제공하므로 필요한 차트 종류에 맞게 모듈을 선택적으로 로드할 수 있습니다.

import { Chart } from 'chart.js';
import 'chart.js/dist/Chart.min.css';
import 'chart.js/dist/Chart.bundle.min.js'; // 모든 차트 종류를 제공하는 번들

// 필요한 차트 유형만 로드
import 'chart.js/dist/Chart.bar.min.js'; // 바 차트
import 'chart.js/dist/Chart.line.min.js'; // 선 차트

이렇게 필요한 차트 유형만 로드하면 번들의 크기를 줄일 수 있고, 초기 로딩 시간을 단축할 수 있습니다.

2. 데이터 필터링 및 집계

대량의 데이터를 다룰 때는 모든 데이터를 그대로 사용하는 것보다 데이터를 필터링하고 집계하는 것이 성능에 도움이 됩니다. 예를 들어, 1분마다 수집되는 센서 데이터를 사용한다면, 1시간, 1일, 1주 등 특정 기간의 데이터만 사용하여 집계한 후 차트로 표시하는 것이 좋습니다.

또한, 필요한 데이터만 가져와 차트에 바인딩하는 것도 성능 개선에 도움이 됩니다. Chart.js에서는 chart.update() 메서드를 사용하여 데이터 업데이트를 수행할 수 있습니다.

// 필터링된 데이터 가져오기
const filteredData = rawData; // 필터링 로직 구현

// 차트 데이터 업데이트
chart.data.datasets[0].data = filteredData;
chart.update();

3. 애니메이션 비활성화

차트 생성 시 애니메이션 효과를 적용하면 시각적으로 부드러운 전환을 제공할 수 있습니다. 하지만, 대량의 데이터에서는 애니메이션으로 인한 성능 저하가 발생할 수 있습니다. 따라서, 대용량 데이터의 경우 애니메이션을 비활성화하는 것이 좋습니다.

const chartOptions = {
    animation: {
        duration: 0 // 애니메이션 비활성화
    }
};

new Chart(ctx, {
    type: 'line',
    data: data,
    options: chartOptions
});

4. 데이터 비동기 처리

대량의 데이터를 다룰 때는 데이터를 비동기적으로 처리하여 차트 생성 시간을 단축할 수 있습니다. 예를 들어, 서버에서 데이터를 가져오는 요청을 비동기로 처리하고, 데이터가 준비되면 차트를 생성하는 방식입니다. Chart.js에서는 chart.destroy() 메서드를 사용하여 이전에 생성된 차트를 제거하고, 새로운 데이터로 차트를 생성할 수 있습니다.

// 이전 차트 제거 및 차트 옵션 초기화
if (chart) {
    chart.destroy();
}

// 서버에서 데이터 비동기로 가져오기
fetchData().then(data => {
    // 새로운 차트 생성
    chart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: chartOptions
    });
});

5. 캔버스 크기 제한

차트를 표시하는 캔버스의 크기를 제한하여 불필요한 렌더링을 방지할 수 있습니다. Chart.js는 기본적으로 부모 요소의 크기에 맞게 캔버스 크기를 설정하므로, 부모 요소의 크기를 제한하는 방법으로 캔버스의 크기도 제한할 수 있습니다.

.chart-container {
    max-width: 800px;
    max-height: 400px;
}

<canvas id="chart" class="chart-container"></canvas>

위 예제에서는 차트를 표시하는 캔버스를 .chart-container 클래스로 감싸고, 최대 너비와 최대 높이를 설정하여 캔버스 크기를 제한하였습니다.

결론

Chart.js를 사용하여 데이터 시각화를 구현할 때, 위에서 소개한 경량화 및 성능 최적화 방법을 적용하면 대량의 데이터를 효율적으로 다룰 수 있습니다. 필요한 차트 유형만 로드하고, 데이터를 필터링하고 집계하며, 애니메이션을 비활성화하며, 데이터를 비동기 처리하고, 캔버스 크기를 제한하는 등의 방법을 활용하여 웹 애플리케이션의 성능을 향상시켜보세요.

참고 자료:

• Chart.js 공식 문서
• Chart.js GitHub 저장소