Morris.js 사용법. Morris.js로 그래프 만들기.

1. 스크립트 & CSS 추가

<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>

2. 차트를 넣을 부분 id를 myfirstchart라고 주었다.

3. 스크립트안에 아래와 같이 예제를 써준다. (morris.js에서 제공하는 예제를 조금 수정함)

 

결과

 

xkey는 x축, ykeys로는 항목이 생성되고 ykeys의 value로 해당 항목에 값이 들어간다.

해당 항목의 value가 null 이면 그 부분 빼고 데이터가 생성된다.

예시로 06-01에 b 데이터가 없다.

그래서 그래프에는 b가 데이터가 생기는시점인 06-03부터 회색선(b데이터)이 생성되어있다. 

 

 

 

Morris 차트 x축 label 모두 출력하기

Morris 차트에서 x축이 추가되지않는 문제, 해결(Morris.js)