ApexCharts는 다양한 형식의 차트를 만들 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 차트에 데이터 시리즈를 추가하는 방법에 대해 알아보겠습니다.

데이터 시리즈 추가하기

ApexCharts에서 데이터 시리즈를 추가하려면 series 속성을 설정해야 합니다. 이 속성에는 배열 형식으로 데이터 값을 넣어주어야 합니다. 각 요소는 차트에서 각각의 데이터 포인트를 나타냅니다.

예를 들어, 선 그래프를 만들기 위해 x축과 y축 값을 갖는 데이터 시리즈를 추가해보겠습니다.

var options = {
  chart: {
    type: 'line'
  },
  series: [
    {
      name: '시리즈 1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    },
    {
      name: '시리즈 2',
      data: [10, 23, 19, 42, 20, 50, 60, 80, 73]
    }
  ],
  xaxis: {
    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
  }
};

var chart = new ApexCharts(document.querySelector("#chartContainer"), options);
chart.render();

위의 코드에서는 series 속성에 두 개의 데이터 시리즈를 설정하였습니다. name 속성은 시리즈의 이름을 지정하고, data 속성에는 해당 시리즈의 데이터 값들을 배열로 넣어주었습니다.

또한, xaxis 속성을 설정하여 x축의 카테고리 값을 정의하였습니다.

차트 생성하기

데이터 시리즈를 설정한 뒤에는 ApexCharts 객체를 생성하여 차트를 렌더링할 수 있습니다. ApexCharts 객체의 생성자에는 렌더링할 DOM 요소와 차트 설정 옵션을 전달해야 합니다.

위의 예시에서는 document.querySelector("#chartContainer")로 DOM 요소를 선택하고, options 객체를 차트 설정 옵션으로 전달하여 차트를 생성하였습니다.

마지막으로 chart.render() 함수를 호출하여 생성한 차트를 렌더링합니다.

이제 데이터 시리즈를 추가하는 방법에 대해 알게 되었습니다. ApexCharts를 사용하여 다양한 형식의 차트를 만들 수 있으니 자유롭게 활용해보세요.