-
[Chart] morris.js 모리스 차트 사용하기JavaScript 2017. 12. 4. 00:01반응형통계용 무료차트를 찾다 morris.js를 알게 되었다.morris.js 공식 깃주소여러 예제와 사용방법이 잘 정리되어 있으며 적용하기도 간단하고 쉽다.주소 들어가서 zip파일로 js를 다운받아 리소스로 추가하여도 되고아래와 같이 링크로 사용해도 된다.1234<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 123456789101112131415161718192021222324252627282930313233343536<!-- 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문서를 보면 여러 프로퍼티옵션이 있다.
위의 소스를 실행하면 아래의 결과가 표출 된다.
반응형'JavaScript' 카테고리의 다른 글
promise, done 사용 예제 (0) 2019.02.06 jqgrid 제이큐그리드 ajax json 데이터를 불러오지 못하는 문제 해결 (0) 2017.12.21 자바스크립트 json 'undefined' 값 변경하기 (0) 2017.12.03 자바스크립트 3가지 function 정의방법 (0) 2017.11.05 ajaxForm 플러그인 사용하여 ajax로 파일 업로드하기 (0) 2017.07.23
