자바스크립트 데이터 그래프 및 차트 표시 기능

10 Sep 2023

javascript

자바스크립트는 웹 애플리케이션에서 데이터 그래프 및 차트를 표시하기 위한 강력한 도구입니다. 데이터 시각화는 사용자에게 정보를 시각적으로 전달하고 복잡한 데이터를 이해하기 쉽게 만드는 데 매우 유용합니다.

이 블로그 글에서는 몇 가지 자바스크립트 라이브러리를 사용하여 데이터 그래프 및 차트를 생성하는 방법을 알아보겠습니다.

1. Chart.js

Chart.js는 간단하고 직관적인 데이터 시각화를 위한 자바스크립트 라이브러리입니다. 그래프와 차트를 생성하기 위한 다양한 종류의 차트 유형을 제공합니다.

Chart.js를 사용하려면 먼저 HTML 페이지에 Chart.js 라이브러리를 로드해야 합니다. 다음은 Chart.js를 사용하여 막대 그래프를 만드는 예제 코드입니다.

<html>
  <head>
    <title>Chart.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <canvas id="myChart"></canvas>
    <script>
      const ctx = document.getElementById('myChart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    </script>
  </body>
</html>

이 예제에서는 막대 그래프를 생성하고 Chart.js를 사용하여 데이터를 입력하고 스타일을 지정합니다. 데이터를 적절하게 구성하여 원하는 그래프와 차트를 만들 수 있습니다.

2. D3.js

D3.js는 데이터 주도 문서(DOC: Data-Driven Documents)를 생성하기 위한 자바스크립트 라이브러리입니다. D3.js는 SVG, HTML 및 CSS를 사용하여 데이터를 시각적으로 표현합니다.

D3.js는 다소 복잡한 데이터 시각화 작업에 적합한 선택입니다. D3.js를 사용하여 원형 그래프를 생성하는 예제 코드를 살펴보겠습니다.

<html>
  <head>
    <title>D3.js Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
  </head>
  <body>
    <svg id="myChart"></svg>
    <script>
      const data = [10, 20, 30, 40, 50];
      const colors = ['red', 'blue', 'green', 'yellow', 'purple'];

      const svg = d3.select("#myChart")
        .append("svg")
        .attr("width", 200)
        .attr("height", 200);

      const pie = d3.pie();

      const arc = d3.arc()
        .innerRadius(0)
        .outerRadius(100);

      const arcs = pie(data);

      svg.selectAll("path")
        .data(arcs)
        .enter()
        .append("path")
        .attr("d", arc)
        .attr("fill", (d, i) => colors[i]);

    </script>
  </body>
</html>

이 예제에서는 D3.js를 사용하여 SVG를 생성하고 데이터를 차트로 표시합니다. D3.js는 다양한 메서드를 사용하여 데이터를 시각화하는 방법을 정의할 수 있으며, 개인적인 요구에 맞게 사용자 정의할 수 있습니다.

3. Google Charts

Google Charts는 구글에서 제공하는 데이터 시각화 도구입니다. 자바스크립트 라이브러리이며, 구글의 강력한 인프라를 바탕으로 안정적이고 다양한 시각화 옵션을 제공합니다.

Google Charts를 사용하여 선 그래프를 생성하는 예제 코드를 살펴보겠습니다.

<html>
  <head>
    <title>Google Charts Example</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        const data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2016', 1000, 400],
          ['2017', 1170, 460],
          ['2018', 660, 1120],
          ['2019', 1030, 540]
        ]);

        const options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        const chart = new google.visualization.LineChart(document.getElementById('myChart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="myChart"></div>
  </body>
</html>

Google Charts는 google.visualization 객체를 사용하여 데이터를 입력하고 설정 옵션을 지정합니다. 이 예제에서는 선 그래프를 생성하고 제목과 범례 위치 등의 스타일을 설정합니다.

결론

이러한 자바스크립트 라이브러리를 사용하면 웹 애플리케이션에서 강력한 데이터 그래프 및 차트를 표시할 수 있습니다. Chart.js, D3.js 및 Google Charts는 다양한 시각화 요구에 맞는 다양한 옵션을 제공하므로 필요한 기능과 스타일에 따라 선택할 수 있습니다.

데이터 시각화는 사용자 경험을 개선하고 복잡한 정보를 이해하기 쉽게 만들어주는 중요한 요소입니다. 자바스크립트를 사용하여 데이터를 시각화하고 그래프 및 차트를 효과적으로 표시할 수 있도록 이러한 라이브러리를 활용해 보세요.