본문 바로가기

개발/Java & Spring

[Spring/Bootstrap] morris.js 로 차트 구현하기 - 개발일기 A[12]


헬스장의 꽃(?) 인바디 차트 기록을 위해 이것 저것 뒤져보다 찾은 morris.js 

사실 소공때 이미 이거 썼지만, 아 또 까먹어서 한참 뒤졌습니당. 역시 기록의 중요성 


차트는 !!!!!!! morriss.js!!!!!!!! 쩌렁쩌렁!!!!!!!!!!!!


레퍼런스는 -> http://morrisjs.github.io/morris.js/ 


우선 jsp에 하단의 스크립트를 추가해준다

여기서부터는 일단 레퍼런스 내용을 그대로 읽어오겠다 




new Morris.Line({
 // ID of the element in which to draw the chart.
 element: 'myfirstchart',
 // Chart data records -- each entry in this array corresponds to a point on
 // the chart.
 data: [
  { year: '2008', value: 20 },
  { year: '2009', value: 10 },
  { year: '2010', value: 5 },
  { year: '2011', value: 5 },
  { year: '2012', value: 20 }
],
 // The name of the data record attribute that contains x-values.
 xkey: 'year',
 // A list of names of data record attributes that contain y-values.
 ykeys: ['value'],
 // Labels for the ykeys -- will be displayed when you hover over the
 // chart.
 labels: ['Value']
});

div의 id와 Morris.Line의 element 명을 일치시키면 된다.
Morris.Line 은 선 차트이고, 나는 막대차트 쓸거라서

<div id="inbody-chart" style="height: 250px; width: 100%"></div>

 <script>

new Morris.Bar({
 element: 'inbody-chart',
 data: [
   <% for(int i=0; i<inbodyList.size(); i++){%>
  { y: '<%=inbodyList.get(i).getRecord().toString()%>',a:<%=inbodyList.get(i).getWeight()%>,
   b: <%=inbodyList.get(i).getFat()%>, c:<%=inbodyList.get(i).getMuscle()%> },<%};%>
],
 xkey: 'y',
 ykeys: ['a', 'b','c'],
 labels: ['몸무게', '체지방','근육량']
});
</script>
이렇게 수정해주었다.
data 안에 있는 것이 하나의 데이터 안에 있는 속성들의 집합을 말하는건데,
어려우니까 그림으로 보여주면 




여기서 2018-07-20은 y: ~ 으로, 파란색 회색 초록색 총 세개의 막대가 각각 a,b,c 로 표현되는 것이다. 

하단에 x키로 y가 x축에 있도록, y키로 a,b,c가 하나씩 차지하도록 되어있고 각 값의 라벨은 그 밑에서 지정해줄 수 있다.


나같은 경우는 동적으로 값을 넣어주어야 하는데, 누누이 말하지만 jquery 역량이 없어서 jsp로 때려박았다.



요게 jsp 코드고, 


java에서

List<InbodyDTO> inbody=inbodyService.selectInbodyList(req.getParameter("id"));
model.addAttribute("inbody",inbody);
이렇게 넘겨주었당!


chart 라이브러리 참 많지만 굉장히 오래되고 100이면 99는 다 이미 죽은 라이브러리였다 ㅠ__ㅠ
왜 안돼!! 하고 날짜 보면 2012년 자료고 ,, 하하 
그런 의미에서 모리스는 참 편하고 또 가장 중요하게 예쁜 차트라이브러리로 생각된다.


오랜만의 개발일기 A고 아마 개발이 완료된 상태여서 마지막이지 않을까 ..?
리팩토링 공부하다가 다시 돌아올지도 모르겠다!

안뇽 !!