[javascript] Chartkick에서 사용 가능한 그래프 크기 설정 방법
Chartkick은 JavaScript로 작성된 데이터 시각화 라이브러리입니다. 그래프의 크기를 설정하는 방법에 대해 알아보겠습니다.
1. 그래프 크기 옵션 지정하기
Chartkick에서는 그래프를 그리기 전에 그래프의 크기를 지정할 수 있습니다. 이를 위해 width와 height 옵션을 사용할 수 있습니다.
다음은 예제 코드입니다.
new Chartkick.LineChart("chart-1", {
data: [["2017-01-01", 100], ["2017-01-02", 200], ["2017-01-03", 300]],
width: "500px",
height: "300px"
});
위 코드에서 width를 “500px”로, height를 “300px”로 설정하였습니다.
2. CSS를 사용하여 그래프 크기 조정하기
그래프의 크기를 더 세밀하게 조정하고 싶다면, Chartkick이 생성한 그래프 컨테이너의 CSS를 사용하여 크기를 조정할 수 있습니다.
예를 들어, 그래프의 컨테이너의 아이디가 “chart-1”인 경우 다음과 같이 CSS를 작성할 수 있습니다.
#chart-1 {
width: 500px;
height: 300px;
}
위 CSS를 사용하여 그래프의 크기를 설정할 수 있습니다.