[javascript] Chart.js에서의 데이터 노이즈 필터링

27 Nov 2023

javascript

데이터 시각화는 많은 데이터를 다루는 과정에서 데이터 노이즈가 발생할 수 있습니다. 데이터 노이즈는 정확한 결과를 얻기 위해 필터링되어야 합니다. 이번 포스트에서는 JavaScript 라이브러리인 Chart.js에서 데이터 노이즈를 필터링하는 방법에 대해 알아보겠습니다.

데이터 필터링

Chart.js에서 데이터 필터링은 데이터셋의 값을 조정하거나 제거하여 노이즈를 줄입니다. 가장 간단한 방법은 평균값 필터링입니다.

function applyAverageFilter(data, windowSize) {
    const filteredData = [];
    for (let i = 0; i < data.length; i++) {
        let sum = 0;
        let count = 0;
        for (let j = -windowSize; j <= windowSize; j++) {
            if (i + j >= 0 && i + j < data.length) {
                sum += data[i + j];
                count++;
            }
        }
        filteredData.push(sum / count);
    }
    return filteredData;
}

위 코드는 applyAverageFilter 함수를 정의한 것입니다. 이 함수는 데이터 배열과 윈도우 크기를 입력으로 받아 평균값 필터링된 데이터 배열을 반환합니다.

Chart.js에 필터링된 데이터 적용하기

Chart.js에서 필터링된 데이터를 적용하는 방법은 간단합니다. 위에서 정의한 applyAverageFilter 함수를 사용하여 필터링된 데이터를 얻은 후, 해당 데이터를 Chart.js의 data 속성에 할당하면 됩니다.

const filteredData = applyAverageFilter(data, windowSize);

const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Filtered Data',
            data: filteredData,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        // 차트 옵션 설정
    }
});

위 코드에서 data 속성의 datasets 배열에 필터링된 데이터를 추가했습니다. 필터링된 데이터를 사용하여 차트를 만들면, 데이터 노이즈가 줄어든 매끄러운 차트를 얻을 수 있습니다.

참고 자료

위의 링크를 참고하시면 Chart.js의 다양한 기능과 사용법을 더 자세히 알아볼 수 있습니다.