[javascript] ApexCharts에서 축 레이블 및 눈금 설정하기

30 Nov 2023

javascript

ApexCharts는 풍부한 기능을 제공하는 자바스크립트 기반의 매우 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하여 축 레이블 및 눈금을 설정하는 방법을 알아보겠습니다.

X 축 레이블과 눈금

X 축은 차트의 가로 축이며, 데이터를 표시하는 역할을 합니다. X 축에는 레이블과 눈금이 포함됩니다. 레이블은 축의 제목이며, 눈금은 축에 표시되는 값의 위치를 나타냅니다.

아래의 예제 코드는 X 축의 레이블과 눈금을 설정하는 방법을 보여줍니다.

var options = {
  chart: {
    type: 'line'
  },
  xaxis: {
    categories: ['1월', '2월', '3월', '4월', '5월', '6월'],
    labels: {
      show: true,
      rotate: -45,
      rotateAlways: false,
      hideOverlappingLabels: true,
      showDuplicates: false,
      trim: true,
      minHeight: undefined,
      maxHeight: 120,
      formatter: undefined,
    }
  }
};

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

위의 코드에서 xaxis.labels 객체에는 여러 속성을 설정할 수 있습니다. 예를 들어 show 속성을 사용하여 레이블의 표시 여부를 설정할 수 있습니다. rotate 속성은 레이블의 회전 각도를 조정하며, trim 속성을 사용하여 레이블의 길이를 자를 수 있습니다.

Y 축 레이블과 눈금

Y 축은 차트의 세로 축이며, 데이터의 값 범위를 표시하는 역할을 합니다. Y 축에도 레이블과 눈금이 포함됩니다.

아래의 예제 코드는 Y 축의 레이블과 눈금을 설정하는 방법을 보여줍니다.

var options = {
  chart: {
    type: 'line'
  },
  yaxis: {
    min: 0,
    max: 100,
    labels: {
      show: true,
      align: 'right',
      minWidth: undefined,
      maxWidth: 160,
      offsetX: 0,
      offsetY: 0,
      rotate: 0,
      formatter: undefined,
      style: {
        colors: [],
        fontSize: '12px',
        fontFamily: 'Arial, sans-serif',
      },
    }
  }
};

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

위의 코드에서 yaxis.labels 객체에는 마찬가지로 여러 속성을 설정할 수 있습니다. min과 max 속성은 눈금의 최소값과 최대값을 설정합니다. align 속성은 눈금의 정렬을 설정합니다. style 속성을 사용하여 눈금의 스타일을 변경할 수 있습니다.

이제 ApexCharts를 사용하여 축 레이블과 눈금을 설정하는 방법을 알아보았습니다. 이를 통해 차트를 더 직관적이고 유용하게 만들 수 있습니다.

더 자세한 정보는 ApexCharts 문서를 참조하십시오.