JavaScript

[Chart] morris.js 모리스 차트 사용하기

dev.mk 2017. 12. 4. 00:01
반응형
통계용 무료차트를 찾다 morris.js를 알게 되었다.

morris.js 공식 깃주소 

http://morrisjs.github.io/morris.js/

여러 예제와 사용방법이 잘 정리되어 있으며 적용하기도 간단하고 쉽다.

주소 들어가서 zip파일로 js를 다운받아 리소스로 추가하여도 되고 

아래와 같이 링크로 사용해도 된다.

1
2
3
4
<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>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
   <!-- html -->
    <body>
      <div id="morrisChart" ></div>        
      <div id="morrisDonut" ></div>        
    </body>    
 
   <!-- script -->
    <script>    
    /* <![CDATA[ */
                 
           new Morris.Line({
            element: 'morrisChart',
              data: [
                      { year: '2008', value: 30 },
                      { year: '2009', value: 10 },
                      { year: '2010', value: 5 },
                      { year: '2011', value: 5 },
                      { year: '2012', value: 20 }
                  ],
            xkey: 'year',
            ykeys: ['value'],
            labels: ['value']
        
        });
        
        new Morris.Donut({
            element: 'morrisDonut',
            data: [        
                    {label: "Download Sales", value: 12},
                    {label: "In-Store Sales", value: 30},
                    {label: "Mail-Order Sales", value: 20}
                  ]
        });
        
    /* ]]> */
    </script>
cs


보통  json 데이터를 파싱하여 "data :" 프로퍼티에 넣어 사용한다.

기타 api문서를 보면 여러 프로퍼티옵션이 있다.



위의 소스를 실행하면 아래의 결과가 표출 된다.



반응형
저작자표시