[javascript] ApexCharts에서 차트에 고정 축 동적 추가하기
ApexCharts는 멋진 시각화 도구입니다. 그러나 종종 차트에 동적으로 고정 축을 추가해야 할 때가 있습니다. 이 기능을 구현하는 방법에 대해 알아보도록 하겠습니다.
고정 축이란?
고정 축은 차트의 축에 대한 추가적인 정보를 제공하는 데 사용됩니다. 일반적으로 Y 축에 고정 축을 추가하여 해당 축에 대한 기준선이나 기준값을 표시합니다. 이는 데이터의 특정 범위를 강조하거나 표시할 수 있는 효과적인 방법입니다.
ApexCharts에서 고정 축 추가하기
options 객체를 사용하여 차트에 고정 축을 추가할 수 있습니다. 이 객체는 차트 옵션을 설정하는 데 사용됩니다. yaxis 속성을 사용하여 Y 축의 구성을 조정할 수 있습니다.
아래의 예제 코드를 살펴보세요.
var options = {
chart: {
type: 'line',
height: 350,
width: '100%',
},
series: [{
name: 'Series 1',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
yaxis: [
{
seriesName: 'Series 1',
axisTicks: {
show: true
},
axisBorder: {
show: true
},
labels: {
style: {
colors: '#008FFB'
},
formatter: function(value) {
return value + "K";
}
}
},
{
seriesName: 'Series 2',
opposite: true, // 오른쪽 축에 표시
axisTicks: {
show: true
},
axisBorder: {
show: true
},
labels: {
style: {
colors: '#00E396'
},
formatter: function(value) {
return value + "%";
}
}
}
]
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
위의 코드에서는 yaxis 속성을 사용하여 2개의 Y 축을 정의하고 있습니다. 첫 번째 축은 왼쪽에 위치하며 ‘Series 1’에 대한 데이터를 표시하고, 두 번째 축은 오른쪽에 위치하며 ‘Series 2’에 대한 데이터를 표시합니다.
formatter 함수는 축의 레이블을 형식화하는 데 사용됩니다. 예제 코드에서는 ‘Series 1’의 축 레이블을 천 단위로 포매팅하고 ‘Series 2’의 축 레이블을 퍼센트로 포매팅하도록 설정하고 있습니다.
위의 예제 코드를 참고하여 필요한 고정 축을 추가하고, 데이터에 맞게 축을 구성하세요.