Chartkick은 JavaScript 기반의 간편한 차트 라이브러리입니다. Chartkick을 사용하여 차트를 만들 수 있으며, 부제목(subtitle)을 추가할 수도 있습니다. 이 문서에서는 Chartkick에서 부제목 크기를 설정하는 방법에 대해 알아보겠습니다.
Chartkick 라이브러리 설치
먼저, Chartkick 라이브러리를 설치해야 합니다. Chartkick은 CDN을 통해 쉽게 다운로드할 수 있으며, 다음과 같은 코드를 HTML 파일의 <head> 태그 안에 추가하여 설치할 수 있습니다:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.chartkick.com/assets/Chartkick.js"></script>
부제목 크기 설정하기
Chartkick에서 차트를 만들 때는 new Chartkick.Chart를 사용합니다. 이 때, 차트에 부제목을 추가하려면 subtitle 속성을 설정해야 합니다. 부제목의 크기를 설정하려면 subtitleStyle 속성을 사용하면 됩니다. 예를 들어, 부제목의 크기를 18px로 설정하려면 아래와 같이 코드를 작성할 수 있습니다:
new Chartkick.Chart("chart", {
data: [
["Task 1", 5],
["Task 2", 3],
["Task 3", 8]
],
subtitle: "Subtitle Text",
subtitleStyle: {
fontSize: "18px"
}
});
위 코드에서 "chart"는 차트를 표시할 DOM 요소의 ID입니다. subtitle 속성에 부제목의 내용을, subtitleStyle 속성에는 부제목의 스타일을 설정합니다.
예시
아래는 Chartkick을 사용하여 부제목 크기를 설정한 차트의 예시입니다:
new Chartkick.Chart("chart", {
data: [
["Task 1", 5],
["Task 2", 3],
["Task 3", 8]
],
subtitle: "Sales by Task",
subtitleStyle: {
fontSize: "20px",
fontWeight: "bold"
}
});
위 코드에서 subtitleStyle 속성에 fontSize와 fontWeight를 사용하여 부제목의 크기와 굵기를 설정하였습니다.
결론
이렇게 Chartkick에서 사용 가능한 차트의 부제목 크기를 설정하는 방법을 알아보았습니다. subtitleStyle 속성을 사용하여 원하는 크기로 설정할 수 있으며, 이를 통해 차트의 표현을 더욱 세부적으로 조정할 수 있습니다.