성능

Chart.js 차트들은 canvas 요소에 렌더링되므로, 빠르게 렌더링 됩니다. 큰 데이터집합이나 성능이 예민한 애플리케이션을 위해, 아래의 팁들을 고려해볼 수 있습니다.

눈금 계산

회전

minRotation과 maxRotation에 같은 값으로 회전 값을 지정하면, 차트에 사용할 값을 자동으로 지정하지 않습니다..

샘플링

ticks.sampleSize 옵션을 지정하세요. 이 옵션은 축을 더 빠르게 렌더링하기 위해 하위 집합만 보고 라벨의 크기를 지정할 것입니다. 이 동작은 만약 래이블이 큰 변동을 가지지 않을 때 가장 좋습니다.

애니메이션 비활성화

만약 차트가 긴 렌더링 시간을 가진다면, 애니메이션을 사용하지 않는 것이 좋은 방안입니다. 차트는 여러번 렌더링하는 대신 업데이트되는 동안 한번만 렌더링이 필요하다는 의미와 같습니다. CPU 사용량을 줄이고 전체적인 페이지 성능을 향상하는데 효과적일 것입니다.

애니메이션 비활성화 하려면

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            duration: 0 // 일반적 애니메이션 시간
        },
        hover: {
            animationDuration: 0 // 항목을 호버했을 때 애니메이션 지속 시간
        },
        responsiveAnimationDuration: 0 // 크기 변경 후 애니메이션 지속 시간
    }
});

데이터 데시메이션

데이터 데시메이션은 가장 좋은 결과를 얻을 수 있을 것입니다. 그래프에 많은 데이터를 보여줘야할 때, 수백 픽셀 넓이의 그래프에 수만개의 데이터 포인트를 보여주는 것은 이치에 맞지 않습니다.

데이터 데시메이션에 접근하는 많은 방법들이 있고 알고리즘의 선택은 데이터와 원하는 결과에 따라 다릅니다. 예를 들어, 최소/최대 데시메이션은 데이터의 끝을 보존하지만 각 픽셀에 4 포인트를 필요로 합니다. 이 데시메이션 유형은 데이터 끝을 봐야하는 곳에 잡읍이 많은 신호에서 잘 동작할 것입니다.

선형 차트

베지어 곡선 비활성화

만약 선형 차트를 그릴 때, 직선을 그리는 것이 베지어 곡선을 그리는 것보다 더 성능이 좋으므로 베지어 곡선을 비활성화 하면 렌더링 시간이 향상될 것입니다.

전체 차트에 베지어 곡선을 비활성화하려면:

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        elements: {
            line: {
                tension: 0 // 베지어 곡선 비활성화
            }
        }
    }
});

선 그리기 비활성화

만약 많은 데이터 포인트를 가지고 있다면, 데이터집합의 선 렌더링을 비활성화 하고 포인트만 그리는 것이 더 성능이 좋을 것입니다. 캔버스에 더 적게 그려저서 렌더링 성능을 향상시킬 것이라는 의미와 같습니다.

선을 비활성화 하려면:

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            showLine: false // 단일 데이터그룹 비활성화
        }]
    },
    options: {
        showLines: false // 모든 데이터그룹 비활성화
    }
});

성능

성능