[javascript] Chart.js를 활용한 주식 시장 데이터 시각화

27 Nov 2023

javascript

주식 시장 데이터를 시각화하는 것은 투자자 및 분석가에게 매우 중요한 작업입니다. 이를 위해 Chart.js를 사용하여 웹 페이지에 간단하고 멋진 차트를 만들어 볼 수 있습니다. Chart.js는 HTML5 Canvas를 사용하여 강력한 그래프와 차트를 그릴 수 있는 자바스크립트 라이브러리입니다.

차트.js 설치하기

먼저, Chart.js를 사용하기 위해 다음과 같이 CDN 링크를 HTML 파일의 <head> 섹션에 추가합니다:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

또는 npm을 사용하여 프로젝트에 Chart.js를 설치할 수도 있습니다:

npm install chart.js

데이터 준비하기

주식 시장 데이터를 시각화하기 위해서는 데이터를 적절한 형식으로 준비해야 합니다. Chart.js는 x 및 y 좌표를 가진 데이터 포인트 배열을 사용합니다. 예를 들어, 다음과 같은 데이터를 가지고 있다고 가정해 봅시다:

const stockData = [
  { x: '2021-01-01', y: 100 },
  { x: '2021-01-02', y: 150 },
  { x: '2021-01-03', y: 120 },
  { x: '2021-01-04', y: 200 },
  // ...
];

차트 그리기

이제 데이터가 준비되었으므로 Chart.js를 사용하여 웹 페이지에 차트를 그릴 수 있습니다. 먼저, <canvas> 요소를 HTML 문서에 추가합니다:

<canvas id="stockChart"></canvas>

다음으로, JavaScript에서 해당 차트를 그리는 코드를 작성합니다:

const ctx = document.getElementById('stockChart').getContext('2d');

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: '주식 가격',
      data: stockData,
      backgroundColor: 'rgba(0, 123, 255, 0.5)',
      borderColor: 'rgba(0, 123, 255, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

위의 코드에서 type: 'line'은 선 그래프를 그리겠다는 의미입니다. 데이터셋에는 label, data, backgroundColor, borderColor, borderWidth 등의 속성을 지정할 수 있습니다.

마지막으로, 선 그래프를 표시할 <canvas> 요소의 ID를 JavaScript 코드에서 참조해야 합니다. 위의 코드 예제에서는 ID를 stockChart로 설정했습니다.

결과 확인하기

모든 준비가 끝났습니다. 이제 웹 페이지에서 주식 시장 데이터가 시각화된 차트를 확인할 수 있습니다.

Chart.js를 사용하여 주식 시장 데이터를 시각화하는 과정을 간략히 살펴보았습니다. Chart.js는 다양한 종류의 차트와 그래프를 제공하므로, 자세한 API 및 사용법은 Chart.js 공식 문서를 참조하시기 바랍니다.

참고 자료

Chart.js 공식 문서