ApexCharts는 JavaScript를 기반으로 한 사용자 친화적인 차트 라이브러리입니다. 이 라이브러리를 사용하여 다양한 종류의 차트를 생성할 수 있으며, 이 중에서도 마구간(heatmap) 차트를 생성하는 방법에 대해 알아보겠습니다.

마구간 차트는 데이터 값의 상대적인 크기를 색상을 통해 시각적으로 나타내는 차트입니다. 즉, 표의 각 셀에 데이터 값을 기반으로 한 색상을 할당하여 데이터 패턴을 쉽게 파악할 수 있게 해줍니다.

필요한 패키지 설치하기

마구간 차트를 생성하기 위해 ApexCharts를 사용하기 위해 다음과 같은 패키지를 설치해야 합니다.

npm install apexcharts

HTML 마크업 생성하기

마구간 차트를 표시하기 위한 HTML 마크업을 생성합니다.

<div id="chart"></div>

JavaScript로 차트 생성하기

JavaScript 코드를 사용하여 마구간 차트를 생성합니다. 다음은 예시를 위해 간단한 데이터 값을 사용한 마구간 차트 생성 코드입니다.

var options = {
  chart: {
    type: 'heatmap'
  },
  series: [
    {
      name: 'Data',
      data: [
        { x: 'A', y: 1, value: 10 },
        { x: 'B', y: 2, value: 20 },
        { x: 'C', y: 3, value: 30 },
        // 데이터 추가
      ]
    }
  ],
  xaxis: {
    categories: ['A', 'B', 'C', ...] // x축 카테고리 값 배열
  },
  yaxis: {
    categories: ['1', '2', '3', ...] // y축 카테고리 값 배열
  },
  colors: ['#FF0000', '#00FF00', '#0000FF' ...] // 각 데이터 값을 표시할 색상 배열
};

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

위의 코드를 사용하면 간단한 마구간 차트를 생성할 수 있습니다. 각 데이터는 x, y 좌표와 값을 가지며, 해당 값에 따라 칸의 색상이 결정됩니다.

결과 확인하기

생성한 마구간 차트를 확인하려면 HTML 파일을 열면 됩니다. 해당 파일의 #chart로 지정한 요소에 마구간 차트가 생성되고 데이터에 따라 색상이 표시됩니다.

위의 코드에서 series 배열에 데이터를 추가하고 xaxis, yaxis의 카테고리 값을 원하는 값으로 변경하여 원하는 데이터 패턴을 생성할 수 있습니다.

ApexCharts는 다양한 옵션을 제공하기 때문에 자세한 사용법은 공식 문서를 참조하시기 바랍니다. 참조 링크는 다음과 같습니다:

• ApexCharts 공식 문서
• ApexCharts GitHub 저장소