'Chart'에 해당되는 글 1건
- 2018.07.11
시스템 개발 시 시각적인 정보를 제공하기 위해 Chart를 이용하는 Line, Bar 등 다양한 Chart를 화면에 보여주게 된다.
Chart.js를 사용하기 위해서는 먼저 JSP에 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js">를 정의한다.
Chart.js는 Chart 그리는 영역을 정의해 주어야 한다.
■Chart 영역 정의
<div> <canvas id="cpu_line_chart" width="800" height="200"></canvas> </div> |
Chart의 넓이와 높이를 정의한다.
서버에서 받아온 데이터를 이용하여 Chart를 그리는 예제이다.
■Chart 그리기
function fn_searchCallBack(result){ var cpuLabels = []; var cpuUsed = []; var cpuFree = []; var sysCpu = []; var sysUser = [];
$.each(result.cpuInfo, function(i, val){ var dispTime = gfn_nvl(val.updDate); console.log(dispTime); dispTime = dispTime.substring(8,14); console.log(dispTime); cpuLabels.push(dispTime); cpuUsed.push(gfn_nvl(val.cpuUsed)); cpuFree.push(gfn_nvl(val.cpuFree)); sysCpu.push(gfn_nvl(val.sysCpu)); sysUser.push(gfn_nvl(val.sysUser)); });
new Chart(document.getElementById("cpu_line_chart"), { type: 'line', data: { labels: cpuLabels, datasets: [{ data: cpuUsed, label: "Used(%)", borderColor: "#3e95cd", fill: false }, { data: cpuFree, label: "Free(%)", borderColor: "#8e5ea2", fill: false }, { data: sysCpu, label: "Sys(%)", borderColor: "#3cba9f", fill: false }, { data: sysUser, label: "User(%)", borderColor: "#e8c3b9", fill: false } ] }, options: { title: { display: true, text: 'CPU Usage' } } }); } |
먼저 Chart에 Mapping이 필요한 변수를 정의한다.
Line Char는 Array를 사용하기 때문에 var cpuLabels = []; 처럼 Array 변수를 선언한다.
Loop를 돌면서 서버에서 받은 응답 데이터를 Array 변수에 저장한다.
new Chart를 이용하여 Chart를 생성하는데, Chart의 영영이 파라미터로 전달된다.
또한 Array 변수들은 data로 매핑하면 Line Chart가 그려지게 된다.
PREV
