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

27 Nov 2023

javascript

Chart.js는 웹 애플리케이션에서 데이터를 시각화하는 데 사용되는 강력한 JavaScript 라이브러리입니다. 데이터 필터링은 사용자가 차트에 표시되는 데이터의 일부를 선택적으로 제한하는 중요한 기능입니다. 이 기능을 사용하면 사용자는 복잡한 데이터 세트에서 필요한 부분만 표시하여 더 직관적으로 데이터를 이해할 수 있습니다.

데이터 필터링 구현하기

Chart.js에서 데이터 필터링을 구현하는 방법에 대해 알아보겠습니다. 다음은 Chart.js를 사용하여 데이터를 필터링하는 간단한 예제입니다.

// 필터링을 위한 데이터 배열
const data = [10, 20, 30, 40, 50, 60, 70];

// 필터링된 데이터를 담을 변수
let filteredData = [];

// 데이터를 필터링하는 함수
function filterData(value) {
  // value보다 큰 데이터만 추출하여 filteredData에 할당
  filteredData = data.filter((dataPoint) => dataPoint > value);
  
  // 차트 업데이트 함수 호출
  updateChart();
}

// Chart.js로 차트를 그리는 함수
function drawChart() {
  // 차트를 그리기 위한 설정
  const chartConfig = {
    type: 'bar',
    data: {
      labels: filteredData.map((_, index) => index),
      datasets: [
        {
          label: 'Filtered Data',
          data: filteredData,
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  };

  // Chart.js를 사용하여 차트를 그림
  const chartCanvas = document.getElementById('chartCanvas');
  new Chart(chartCanvas, chartConfig);
}

// 차트 업데이트 함수
function updateChart() {
  // 차트를 다시 그리기 전에 이전 차트를 삭제
  const chartCanvas = document.getElementById('chartCanvas');
  chartCanvas.parentNode.removeChild(chartCanvas);

  // 새로운 차트를 그림
  const newChartCanvas = document.createElement('canvas');
  newChartCanvas.id = 'chartCanvas';
  document.getElementById('chartContainer').appendChild(newChartCanvas);

  // 차트를 그림
  drawChart();
}

위의 예제 코드에서 filterData 함수는 사용자가 입력한 값보다 큰 데이터만 filteredData에 저장합니다. drawChart 함수는 filteredData를 바탕으로 Chart.js를 사용하여 차트를 그립니다. updateChart 함수는 차트가 업데이트되어야 할 때 호출되며, 이전 차트를 삭제하고 새로운 차트를 그립니다.

예제 실행하기

위의 예제를 실행하려면 HTML 파일에 아래 코드를 추가해야 합니다.

<div id="chartContainer">
  <canvas id="chartCanvas" width="400" height="400"></canvas>
</div>

<label for="filterValue">Filter Value:</label>
<input type="number" id="filterValue">
<button onclick="filterData(document.getElementById('filterValue').value)">Filter</button>

위의 HTML 코드는 차트를 보여주기 위한 컨테이너 엘리먼트와 필터링 값을 입력할 수 있는 입력 필드 및 필터 적용 버튼을 포함하고 있습니다. filterData 함수는 필터링 값을 입력 받아 filteredData를 업데이트합니다.

이제 위의 예제를 실행하면 차트와 함께 필터링 기능을 사용할 수 있습니다.

결론

Chart.js를 사용하여 데이터를 필터링하는 방법에 대해 알아보았습니다. 데이터 필터링은 복잡한 데이터 세트에서 필요한 부분만 표시하여 사용자에게 더 직관적으로 데이터를 전달하는데 도움이 됩니다. 필터링된 데이터를 시각화하여 데이터 분석 및 인사이트 도출에 활용할 수 있습니다.