[javascript] Chartkick에서 사용 가능한 차트 축 레이블 스타일 설정 방법

29 Nov 2023

javascript

Chartkick은 JavaScript를 사용하여 웹 애플리케이션에서 쉽게 차트를 구현할 수 있는 라이브러리입니다. 이 라이브러리를 사용하면 간단한 코드로 다양한 종류의 차트를 생성할 수 있습니다. 차트에는 가로 축과 세로 축이 포함되어 있으며, 이러한 축의 레이블 스타일을 사용자 정의할 수도 있습니다.

가로 축 레이블 스타일 설정

가로 축은 일반적으로 x축으로 사용되며, Chartkick에서는 xtitle 속성을 사용하여 레이블 스타일을 설정할 수 있습니다. 아래의 예제 코드를 참고하세요.

new Chartkick.LineChart("chart", {
  data: [
    { name: "Series 1", data: { "2020-01-01": 5, "2020-01-02": 10 } },
    { name: "Series 2", data: { "2020-01-01": 8, "2020-01-02": 2 } }
  ],
  xtitle: "날짜",
  xtitleFontColor: "red",
  xtitleFontSize: "18px",
});

위의 코드에서 xtitleFontColor 속성을 사용하여 가로 축 레이블의 텍스트 색상을 지정하고, xtitleFontSize 속성을 사용하여 텍스트 크기를 지정했습니다. 필요한 경우 이러한 속성을 사용자의 취향에 맞게 수정할 수 있습니다.

세로 축 레이블 스타일 설정

세로 축은 일반적으로 y축으로 사용되며, Chartkick에서는 ytitle 속성을 사용하여 레이블 스타일을 설정할 수 있습니다. 아래의 예제 코드를 참고하세요.

new Chartkick.LineChart("chart", {
  data: [
    { name: "Series 1", data: { "2020-01-01": 5, "2020-01-02": 10 } },
    { name: "Series 2", data: { "2020-01-01": 8, "2020-01-02": 2 } }
  ],
  ytitle: "값",
  ytitleFontColor: "blue",
  ytitleFontSize: "18px",
});

위의 코드에서 ytitleFontColor 속성을 사용하여 세로 축 레이블의 텍스트 색상을 지정하고, ytitleFontSize 속성을 사용하여 텍스트 크기를 지정했습니다. 필요한 경우 이러한 속성을 사용자의 취향에 맞게 수정할 수 있습니다.

차트 축 레이블 스타일 관련 속성

Chartkick에서는 축 레이블 스타일을 설정하는 데 사용할 수 있는 다양한 속성을 제공합니다. 아래는 일부 예입니다.

xtitle: 가로 축 레이블 텍스트
xtitleFontColor: 가로 축 레이블 텍스트 색상
xtitleFontSize: 가로 축 레이블 텍스트 크기
ytitle: 세로 축 레이블 텍스트
ytitleFontColor: 세로 축 레이블 텍스트 색상
ytitleFontSize: 세로 축 레이블 텍스트 크기

더 자세한 내용은 Chartkick 공식 문서를 참조하십시오.

참고 링크:

Chartkick 공식 문서