안녕하세요, 웹 페이지에 동적으로 여러 차트를 생성하고자 할 때 유용하게 쓸 수 있는 자바스크립트 오픈소스 툴인 Apache ECharts에 대해 알아보겠습니다.
EChart 공식 페이지의 Demo 페이지(https://echarts.apache.org/examples/en/index.html)에서 확인 할 수 있듯이, 선 그래프, 막대그래프, 파이 차트, Map, Tree, 게이지 바 등등 정말 다양한 차트를 Javascript를 통해 HTML 페이지에서 동적으로 생성이 가능합니다.
우선, 무료 오픈소스이고 Canvas 태그를 활용해서 구현이 되어 있어서 정말 다양한 곳에서 쉽게 사용이 가능할 것 같습니다. Demo들이 너무 많아서 하나하나 자세히 아직 못 봤지만.. 여러 예제들을 보면 애니메이션 기능이 구현된 것도 있습니다. 이렇게 샘플이 정말 많고 그에 대한 옵션도 많아서 정말 내가 원하는 차트나 그래프를 완벽하고 쉽게 구현이 가능할 것 같습니다.
EChart 다운로드 및 설치
EChart Installation (https://echarts.apache.org/handbook/en/basics/download/) 공식 페이지에보면 다양한 설치 방법이 있습니다.
Node.js 프로젝트라면 npm을 통해 간단히 다운로드를 할 수 있습니다. 또한 HTML에서 Javascript 파일을 로드하는 형태로도 사용이 가능합니다.
간단하게 예제를 만들어보기 위해, EChart CDN Download (https://www.jsdelivr.com/package/npm/echarts) 페이지 방문하여, echarts.min.js 파일을 "다른 이름으로 링크 저장"을 통해 js 파일을 다운로드합니다.
다운로드한 echarts.min.js 파일을 HTML 파일에 아래와 같은 태그를 통해 로드를 합니다.
<script src="./resource/echarts.min.js"></script>
EChart 예제 - 차트 구현
위와 같이 간단하게 버튼 2개를 만들고, 버튼을 클릭 시 각각 막대그래프와 선 그래프를 그려주는 예제를 작성해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 다운로드 받은 echarts.js 파일 로드-->
<script src="./resource/echarts.min.js"></script>
<script type="text/javascript">
let xAxisData = ['철수','영희','민수','지수']; // x축 데이터 배열 생성
let seriesData = [70,80,100,30]; // 값 데이터 배열 생성
window.onload = function() { // 페이지 로드 시 실행
document.getElementById("drawLine").addEventListener('click', drawChart); // Line Chart 버튼 클릭 시 이벤트 정의 : drawChart 매서드 실행
document.getElementById("drawBar").addEventListener('click', drawChart); // Bar Chart 버튼 클릭 시 이벤트 정의 : drawChart 매서드 실행
}
function drawChart () {
var myChart = echarts.init(document.getElementById('chart')); // echarts init 메소드로 id=chart인 DIV에 차트 초기화
option = { // 차트를 그리는데 활용 할 다양한 옵션 정의
xAxis: {
type: 'category',
data: xAxisData // 위에서 정의한 X축 데이터
},
yAxis: {
type: 'value'
},
series: [
{
data: seriesData, // 위에서 정의한 값 데이터
type: this.value // 버튼의 value 데이터 ('line' or 'bar')
}
]
};
myChart.setOption(option); // 차트 디스플레이
}
</script>
</head>
<body>
<button id="drawLine" value="line">Line Chart</button>
<button id="drawBar" value="bar">Bar Chart</button>
<!-- 차트를 그려줄 영역 -->
<div id="chart" style="width: 100%; height:500px;">
</body>
</html>
먼저, X축 데이터 배열과 여기에 맵핑되는 실제 값 데이터 배열을 정의를 하고, 버튼의 value를 "line"과 "bar"로 각각 만들어서 버튼을 클릭 시 차트의 타입이 바뀌면서 차트를 동적으로 생성해주는 예제입니다.
여기서 X축이나 Y축 및 실 데이터들을 입력을 받아서 그려주거나 Ajax를 통해 서버에서 받아서 그려주는 식으로 구현이 가능합니다. 이 예제는 다음 포스팅에서 구현해보도록 하겠습니다.
EChart는 차트의 종류도 많고 그에 따른 다양한 옵션들이 있습니다. 관련 내용은 EChart Options (https://echarts.apache.org/en/option.html) 공식 사이트에서 확인이 가능합니다. 옵션의 종류가 너무 많아서 필요할 때마다 찾아가면서 사용을 해야 할 것 같네요..
Javascript 무료 오픈소스 라이브러리인 EChart에 대해 알아보고 간단히 예제도 작성해 봤습니다. 다양한 차트와 그래프를 손쉽게 생성이 가능해서 대시보드나 모니터링 페이지 등에 활용도가 높을 것 같습니다. 다음 포스팅에서 좀 더 다양한 예제를 작성해보도록 하겠습니다.
'[IT] Javascript' 카테고리의 다른 글
| [Javascript][Node.js] Map 자료 구조 정의, 사용법, 문법 및 반복문 활용 (0) | 2022.03.04 |
|---|---|
| 바닐라 자바스크립트(Javascript) + 타임리프(Thymeleaf) 이용 AJAX 구현 예제 (1) | 2021.12.17 |
| 순수 (바닐라) JavaScript로 AJAX Get/Post 구현 (JSON 응답/요청) (2) | 2021.12.10 |
댓글