chartjs 속도 이슈 개선 방법들

chartjs에서 엄청 많은 데이터를 출력하게 될 시 속도 이슈가 있어 찾아보았고 적용한 것에 대한 기록

 

인터넷으로 찾아보고 그리고 공식 사이트를 찾아보면 일반적으로 다음과 같은 링크를 찾을 것이다.

Performance | Chart.js

위 링크의 내용들을 보면

1. parsing false -> 데이터 준비 관련(확인 필요)

2. 데이터 정규화 -> 이 부분은 정렬된 데이터를 제공하는것 만으로도 충분함

3. 출력되는 데이터를 줄여라(Decimation)

4. 애니메이션 off

5. 최대 최소값을 설정

6. web worker를 사용(확인 필요)

 

 

위의 링크를 보다가 Data Decimation에 대한 것을 봤는데, 결국 요점은 출력되는 데이터의 갯수를 제한한다는 것이고 우리가 해야하는 방향과는 맞지 않았다.

하지만 여기에서 No decimation으로 엄청 많은 데이터를 넣었을때 속도 이슈가 발생하지 않았다.(심지어 100만개의 point를 찍는데도 불구하고)

Data Decimation | Chart.js

 

 

위와 같이 엄청 많은 점을 출력했는데 정상적으로 나오는것을 볼 수 있다.

 

그래서 기존 내가 출력했던 그래프와 위의 소스와의 차이점을 확인해본 결과 속도에 이슈를 발생시켰던 것은

 

data에서 borderWidth값과 radius값이었다.

 

위의 Data Decimation에 나와있는 것 처럼  borderWidth : 1과 radius : 0 을 추가하므로써 속도에 엄청난 개선이 되었다.

 

너무 많은 포인트로 인해 radius와 라인의 계산에 많은 자원을 소모하고 있었던듯 하다.

 

const data = {
  datasets: [{
    borderColor: Utils.CHART_COLORS.red,
    borderWidth: 1,
    data: pointData,
    label: 'Large Dataset',
    radius: 0,
  }]
};