[javascript] ApexCharts에서 차트에 트리맵 생성하기
ApexCharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에 다양한 종류의 차트를 쉽게 생성할 수 있습니다. 이번에는 ApexCharts를 사용하여 트리맵(chart)을 생성하는 방법을 알아보겠습니다.
ApexCharts 설치
먼저, ApexCharts를 설치해야 합니다. npm을 통해 ApexCharts를 설치할 수 있습니다.
npm install apexcharts
HTML 파일 설정
트리맵을 생성할 HTML 파일을 만들고, 필요한 스크립트와 스타일을 연결시켜야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ApexCharts 트리맵 예제</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.28.2/dist/apexcharts.min.css">
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.2/dist/apexcharts.min.js"></script>
<script src="app.js"></script>
</body>
</html>
JavaScript 파일 작성
이제 트리맵을 생성하는 JavaScript 파일인 app.js를 작성해보겠습니다.
const options = {
series: [
{
data: [
{
x: 'Fruits',
y: 40,
children: [
{
x: 'Apple',
y: 10,
},
{
x: 'Banana',
y: 20,
},
{
x: 'Orange',
y: 30,
},
],
},
{
x: 'Vegetables',
y: 60,
children: [
{
x: 'Carrot',
y: 20,
},
{
x: 'Tomato',
y: 30,
},
{
x: 'Broccoli',
y: 10,
},
],
},
],
},
],
chart: {
type: 'treemap',
},
};
const chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
위의 코드에서는 options 변수를 통해 트리맵의 구성을 설정하고, ApexCharts 객체를 사용하여 차트를 생성합니다.
결과 확인
웹 브라우저에서 HTML 파일을 열어서 결과를 확인해보세요. 트리맵이 제대로 렌더링되었다면, Fruits와 Vegetables를 나타내는 두 개의 사각형이 보일 것입니다. 각각의 사각형은 자식 요소를 포함하고 있습니다.
ApexCharts를 사용하여 HTML 페이지에 트리맵을 쉽게 생성할 수 있습니다. 본 예제를 참고하여 자신의 데이터에 맞게 사용해보세요!