[javascript] Chartkick을 사용한 축 설정 방법
Chartkick은 JavaScript를 사용하여 간단하게 그래프를 생성할 수 있는 라이브러리입니다. 그래프의 축을 설정하는 방법에 대해 알아보겠습니다.
X축 설정하기
X축은 주로 시간, 날짜 또는 범주 값을 나타내는데 사용됩니다.
날짜 값 사용하기
new Chartkick.LineChart("chart", [
{name: "Series 1", data: {"2021-01-01": 10, "2021-01-02": 20, "2021-01-03": 30}},
{name: "Series 2", data: {"2021-01-01": 5, "2021-01-02": 15, "2021-01-03": 25}}
], {library: {xAxes: [{type: "time", time: {unit: "day"}}]}});
위의 예제에서는 xAxes 항목을 사용하여 X축의 유형을 “time”으로 설정하고, unit 옵션을 “day”로 지정하여 일별 단위로 표시하도록 설정했습니다.
범주 값 사용하기
new Chartkick.LineChart("chart", [
{name: "Series 1", data: [["Category 1", 10], ["Category 2", 20], ["Category 3", 30]]},
{name: "Series 2", data: [["Category 1", 5], ["Category 2", 15], ["Category 3", 25]]}
], {library: {xAxes: [{type: "category"}]}});
위의 예제에서는 xAxes 항목을 사용하여 X축의 유형을 “category”로 설정하여 범주 값을 나타내게 했습니다.
Y축 설정하기
Y축은 주로 수치 값을 나타내는데 사용됩니다.
Y축 최소값과 최대값 설정하기
new Chartkick.LineChart("chart", [
{name: "Series 1", data: {"2021-01-01": 10, "2021-01-02": 20, "2021-01-03": 30}},
{name: "Series 2", data: {"2021-01-01": 5, "2021-01-02": 15, "2021-01-03": 25}}
], {library: {scales: {yAxes: [{ticks: {min: 0, max: 40}}]}}});
위의 예제에서는 yAxes 항목을 사용하여 Y축의 최소값을 0, 최대값을 40으로 설정했습니다.
Y축 단위 설정하기
new Chartkick.LineChart("chart", [
{name: "Series 1", data: {"2021-01-01": 10, "2021-01-02": 20, "2021-01-03": 30}},
{name: "Series 2", data: {"2021-01-01": 5, "2021-01-02": 15, "2021-01-03": 25}}
], {library: {scales: {yAxes: [{ticks: {callback: function(value) { return value + "%" }}}]}}});
위의 예제에서는 yAxes 항목을 사용하여 Y축의 수치 값을 “%”로 표시하도록 설정했습니다.