[javascript] ApexCharts에서 차트에 반응형 레이아웃 추가하기
ApexCharts는 JavaScript 기반의 강력한 차트 라이브러리로, 다양한 종류의 차트를 생성하고 사용자에게 시각적인 데이터를 전달할 수 있습니다. 이 라이브러리를 사용하여 반응형 레이아웃을 가진 차트를 만들어 보겠습니다.
1. ApexCharts 설치하기
먼저 ApexCharts를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 ApexCharts를 설치하세요.
npm install apexcharts
2. HTML 파일 만들기
다음으로, HTML 파일을 만들고 ApexCharts의 스크립트와 CSS 파일을 추가해야 합니다. 아래와 같이 HTML 파일을 작성하세요.
<!DOCTYPE html>
<html>
<head>
<title>ApexCharts 반응형 레이아웃</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.min.css">
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.min.js"></script>
<script src="app.js"></script>
</body>
</html>
3. JavaScript 파일 작성하기
이제 JavaScript 파일을 만들어 차트를 생성하고 반응형 레이아웃을 추가해보겠습니다. 아래와 같이 app.js 파일을 작성하세요.
document.addEventListener('DOMContentLoaded', function() {
var options = {
chart: {
type: 'bar',
height: 400,
responsive: [{
breakpoint: 480,
options: {
chart: {
height: 200
}
}
}]
},
series: [{
name: 'Sales',
data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
}
};
var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
});
위 코드에서 chart 객체의 responsive 속성을 사용하여 차트 레이아웃을 조정할 수 있습니다. breakpoint는 레이아웃이 조정되는 화면 너비를 의미하며, 해당 너비 이하인 경우 options 내의 chart 속성을 수정하여 레이아웃을 변경할 수 있습니다.
4. 결과 확인하기
HTML 파일을 웹 브라우저에서 열어 결과를 확인해보세요. 차트가 보이며, 웹 브라우저의 크기를 변경하면 차트의 레이아웃이 반응하여 조정되는 것을 확인할 수 있습니다.
반응형 레이아웃을 가진 ApexCharts를 성공적으로 만들었습니다. 이를 응용하여 다양한 차트를 만들어 데이터 시각화에 활용할 수 있습니다.