[javascript] ApexCharts에서 차트에 포인트 차트 생성하기

30 Nov 2023

javascript

ApexCharts는 인기 있는 JavaScript 기반 차트 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에 다양한 종류의 차트를 쉽게 생성할 수 있습니다. 이번 기사에서는 ApexCharts를 사용하여 포인트 차트를 생성하는 방법을 알아보겠습니다.

ApexCharts 설치하기

ApexCharts를 사용하기 위해 먼저 해당 패키지를 설치해야 합니다. 아래와 같이 npm을 사용하여 설치할 수 있습니다.

npm install apexcharts

HTML 파일 설정하기

ApexCharts를 사용하려면 HTML 파일에 ApexCharts 라이브러리와 필요한 JavaScript 파일을 추가해야 합니다. 아래는 이를 위한 예제입니다.

<html>
<head>
  <title>ApexCharts 포인트 차트</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.27.0/dist/apexcharts.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.0/dist/apexcharts.min.js"></script>
</head>
<body>
  <div id="chart"></div>

  <script>
    // 차트 데이터 설정
    var data = {
      series: [
        {
          name: '시리즈 1',
          data: [
            { x: '2021-01-01', y: 10 },
            { x: '2021-01-02', y: 20 },
            { x: '2021-01-03', y: 15 },
            { x: '2021-01-04', y: 25 },
          ]
        }
      ]
    };

    // 차트 옵션 설정
    var options = {
      chart: {
        type: 'line',
      },
      series: data.series,
      xaxis: {
        type: 'datetime',
      },
    };

    // 포인트 차트 생성
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
  </script>
</body>
</html>

위 예제에서는 포인트 차트를 생성하기 위해 데이터와 옵션을 설정한 후, new ApexCharts()를 사용하여 차트를 생성하고 render() 메소드로 차트를 그립니다.

포인트 차트의 데이터와 옵션 설정하기

포인트 차트에 대한 데이터와 옵션 설정은 위 예제에서 보는 것처럼 JavaScript 객체로 표현됩니다. 데이터 객체는 series 속성에 배열 형태로 시리즈를 설정합니다. 각 시리즈는 name과 data 속성을 가지며, data 속성은 x, y 값을 가진 객체들의 배열입니다.

옵션 객체는 차트의 모양과 동작을 설정하는 데 사용됩니다. chart 속성에서 차트의 종류를 설정할 수 있으며, xaxis 속성에서 x축의 타입을 설정할 수 있습니다.

참고 자료

다양한 ApexCharts의 차트 유형과 설정 옵션에 대한 자세한 내용은 ApexCharts 공식 문서를 참조하세요.