[javascript] Chart.js에서의 데이터 평균치 표현 방법

27 Nov 2023

javascript

Chart.js는 JavaScript로 작성된 데이터 시각화 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 생성하고 데이터를 시각적으로 표현할 수 있습니다. 데이터 평균치는 차트에 중요한 정보를 제공하므로, Chart.js에서는 데이터 평균치를 표현하기 위한 몇 가지 방법을 제공합니다.

1. 평균치 값 계산하기

먼저, 데이터의 평균치 값을 계산해야 합니다. JavaScript에서는 배열 데이터의 평균치를 계산하기 위해 reduce() 함수를 사용할 수 있습니다. 아래는 배열 데이터의 평균치를 계산하는 예제입니다.

const data = [10, 20, 30, 40, 50];
const average = data.reduce((sum, value) => sum + value) / data.length;
console.log(average); // 30

2. 평균치를 차트에 추가하기

Chart.js에서는 options 객체를 사용하여 차트의 옵션을 설정할 수 있습니다. 평균치를 차트에 추가하려면 options 객체의 annotation 속성을 사용하면 됩니다. 아래는 평균치를 가로 막대 그래프에 추가하는 예제입니다.

const data = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  datasets: [{
    label: 'Data',
    data: [10, 20, 30, 40, 50],
    backgroundColor: 'rgba(0, 123, 255, 0.5)'
  }]
};

const options = {
  scales: {
    y: {
      ticks: {
        beginAtZero: true
      }
    }
  },
  plugins: {
    annotation: {
      annotations: [
        {
          type: 'line',
          mode: 'horizontal',
          scaleID: 'y',
          value: average,
          borderColor: 'red',
          borderWidth: 2,
          label: {
            content: '평균',
            enabled: true,
            position: 'left'
          }
        }
      ]
    }
  }
};

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

위 코드에서 annotations 배열에 평균치를 추가하는 객체를 정의합니다. type 속성을 'line'으로 설정하여 평균치를 나타내는 수평 선을 생성합니다. 그리고 value 속성에 평균치 값을 전달하고, label 속성을 사용하여 평균치를 나타내는 텍스트 박스를 설정합니다.

3. 차트 업데이트하기

평균치를 차트에 추가한 후 데이터를 업데이트하면 차트도 함께 업데이트됩니다. 아래는 데이터를 업데이트하는 예제입니다.

// 데이터 업데이트
data.datasets[0].data = [20, 40, 60, 80, 100];

// 차트 업데이트
chart.update();

update() 함수를 사용하여 차트를 업데이트하면, 데이터의 변경사항이 반영되고 평균치도 함께 업데이트됩니다.

위의 예제 코드를 참고하여 Chart.js에서 데이터 평균치를 표현하는 방법을 익히고, 원하는 차트에 평균치를 추가하여 데이터를 더욱 효과적으로 시각화할 수 있습니다.

참고 문서: Chart.js 공식 문서