인프런 커뮤니티 질문&답변

안녕하세요 강사님 :)
저는 현재 Chart.js 3.5.1 버전으로 프로젝트를 따라가는 중입니다.

그런데 아래와 같은 코드로 할 경우에 서로 다른 나라를 클릭해서 차트를 렌더링하게 되면 차트를 destroy 해야한다는 에러메세지가 뜹니다.

 

function renderChart(data: number[], labels: string[]) {
  const ctx = ($('#lineChart') as HTMLCanvasElement).getContext('2d');

  Chart.defaults.color = '#f5eaea';
  Chart.defaults.font.family = 'Exo 2';
  Chart.register(
    LineElement,
    LineController,
    CategoryScale,
    LinearScale,
    PointElement,
    Filler
  );

  new Chart(ctx, {
    type: 'line',
    data: {
      labels,
      datasets: [
        {
          label: 'Confirmed for the last two weeks',
          backgroundColor: '#feb72b',
          borderColor: '#feb72b',
          data,
          fill: true,
        },
      ],
    },
    options: {},
  });
}

 

그래서 이를 해결하기 위해 아래와 같은 코드를 작성했더니, 제대로 렌더링이 됐습니다.

그러나 제대로된 해결 방법인지 잘 모르겠어서 질문 드립니다.

casetChart라는 변수에 any 대신 Chart 인스턴스의 타입을 넣어야할거같은데, chart.js 노드모듈 폴더의 index.esm.d.ts 파일을 봤는데 어떤걸 가져와서 넣어야하는지 모르겠습니다. 

그리고 아래와 같은 방식으로 destroy 하는 게 맞는 방법인지 궁급합니다.

let casesChart: any;

function renderChart(data: number[], labels: string[]) {
  const ctx = ($('#lineChart') as HTMLCanvasElement).getContext('2d');

  if (casesChart !== undefined) {
    casesChart.destroy();
  }
  Chart.defaults.color = '#f5eaea';
  Chart.defaults.font.family = 'Exo 2';
  Chart.register(
    LineElement,
    LineController,
    CategoryScale,
    LinearScale,
    PointElement,
    Filler
  );

  casesChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels,
      datasets: [
        {
          label: 'Confirmed for the last two weeks',
          backgroundColor: '#feb72b',
          borderColor: '#feb72b',
          data,
          fill: true,
        },
      ],
    },
    options: {},
  });
}