[javascript] Chartkick에서 사용 가능한 차트 축 눈금 스타일 설정 방법
Chartkick은 JavaScript로 작성된 오픈 소스 차트 라이브러리입니다. Chartkick을 사용하면 간단하게 다양한 종류의 차트를 생성할 수 있습니다. 이제 Chartkick을 사용하여 차트의 축 눈금 스타일을 설정하는 방법을 알아보겠습니다.
x축 눈금 스타일 설정하기
<%= javascript_include_tag "//www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag "//www.chartkick.com/assets/Chart.js" %>
<%= javascript_include_tag "//www.chartkick.com/assets/chartkick.js" %>
<script>
new Chartkick.LineChart("chart-1", {
xtitle: "날짜",
ytitle: "값",
data: [
["2022-01-01", 100],
["2022-01-02", 200],
["2022-01-03", 150],
// ...
],
colors: ["#FF0000"],
library: {
scales: {
xAxis: {
ticks: {
callback: function(value) {
// x축의 눈금 스타일을 설정하는 콜백 함수
if (value === "2022-01-01") {
return "첫번째 날짜";
} else if (value === "2022-01-02") {
return "두번째 날짜";
} else {
return value;
}
}
}
}
}
}
});
</script>
new Chartkick.LineChart("chart-1", { ... }); 부분에서 xtitle로 x축의 제목을 설정할 수 있습니다. library 속성 안에 scales 객체를 사용하여 축 눈금 스타일을 설정할 수 있습니다. xAxis 객체 안에 ticks 객체를 추가하고 callback 함수를 통해 각 눈금 값에 대한 스타일을 지정할 수 있습니다.
y축 눈금 스타일 설정하기
<%= javascript_include_tag "//www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag "//www.chartkick.com/assets/Chart.js" %>
<%= javascript_include_tag "//www.chartkick.com/assets/chartkick.js" %>
<script>
new Chartkick.LineChart("chart-2", {
xtitle: "날짜",
ytitle: "값",
data: [
["2022-01-01", 100],
["2022-01-02", 200],
["2022-01-03", 150],
// ...
],
colors: ["#FF0000"],
library: {
scales: {
yAxis: {
ticks: {
callback: function(value) {
// y축의 눈금 스타일을 설정하는 콜백 함수
return value + " 원";
}
}
}
}
}
});
</script>
위의 코드에서도 library 속성을 사용하여 scales 객체를 추가합니다. 이번에는 yAxis 객체 안에 ticks 객체를 추가하고 callback 함수를 통해 각 눈금 값에 대한 스타일을 지정하는 예시입니다.
위의 예시 코드를 참고하여 Chartkick을 사용할 때 축 눈금의 스타일을 자유롭게 설정해보세요!