[javascript] Chart.js에서의 라벨과 축 설정 방법
Chart.js는 웹 개발자들이 쉽게 그래프와 차트를 만들 수 있도록 도와주는 JavaScript 라이브러리입니다. 이번 포스트에서는 Chart.js를 사용하여 그래프의 라벨과 축을 설정하는 방법에 대해 알아보겠습니다.
그래프의 라벨 설정하기
Chart.js로 그래프를 만들 때, 그래프의 각 데이터 포인트를 설명하는 라벨을 추가할 수 있습니다. 이를 위해 data.labels 속성을 사용합니다. 아래는 그래프의 라벨을 설정하는 예제입니다.
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
...
},
...
});
위의 예제에서 labels 배열에는 그래프의 각 데이터 포인트를 나타내는 문자열이 들어갑니다. 이 문자열은 그래프에 표시될 라벨로 사용됩니다.
축 설정하기
Chart.js에서 그래프의 축을 설정하는 방법은 각 유형의 차트마다 다를 수 있습니다. 아래는 가장 일반적인 유형인 선 그래프(line)의 축 설정 방법 예제입니다.
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
data: [65, 59, 80, 81, 56, 55],
...
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Month'
}
},
y: {
title: {
display: true,
text: 'Value'
}
}
}
}
});
위의 예제에서 options.scales.x.title.text는 x축의 제목을 설정하고, options.scales.y.title.text는 y축의 제목을 설정합니다. 또한, display 속성을 true로 설정하여 제목을 표시합니다.
결론
Chart.js를 사용하면 그래프의 라벨과 축을 쉽게 설정할 수 있습니다. 그래프의 라벨을 설정하기 위해서는 data.labels 배열을 사용하고, 축을 설정하기 위해서는 options.scales 속성을 사용하면 됩니다. 이를 활용하여 웹 애플리케이션에 멋진 그래프를 추가해보세요!