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

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

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

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

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

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

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

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<div id="myfirstchart" style="height: 250px;"></div>

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로 때려박았다.

 <%

        List<InbodyDTO> inbodyList=new ArrayList<InbodyDTO>();

        if(request.getAttribute("inbody")!=null){

            inbodyList=(ArrayList<InbodyDTO>)request.getAttribute("inbody");

        }

        %>

​

요게 jsp 코드고, 

java에서

List<InbodyDTO> inbody=inbodyService.selectInbodyList(req.getParameter("id"));
        model.addAttribute("inbody",inbody);

이렇게 넘겨주었당!

chart 라이브러리 참 많지만 굉장히 오래되고 100이면 99는 다 이미 죽은 라이브러리였다 ㅠ__ㅠ

왜 안돼!! 하고 날짜 보면 2012년 자료고 ,, 하하 

그런 의미에서 모리스는 참 편하고 또 가장 중요하게 예쁜 차트라이브러리로 생각된다.

오랜만의 개발일기 A고 아마 개발이 완료된 상태여서 마지막이지 않을까 ..?

리팩토링 공부하다가 다시 돌아올지도 모르겠다!

안뇽 !!