jqplot을 이용한 그래프
페이지 정보
작성자 서방님 댓글 0건 조회 199회 작성일 15-11-13 10:52본문
그래프를 직접 코딩해 개발한다면 많은 시간과 노력이 필요합니다.
그래서 직접구현이 아닌 Jqplot이라는 jquery plugin을 통한 그래프를 구현해보겠습니다.
jqplot을 이용해 구현한 graph들
1. jqplot 다운
http://www.jqplot.com/ |
2. jqplot 압축해제
여기서 간단한 그래프를 구현한다면 "jquery.jqplot.min.js"와 "jquery.jqplot.min.css" 두개의 파일만 임포트 시켜 사용하면됩니다. 낮은 버젼의 익스플로러에서 jqplot이 구현이 되지않은 문제를 해결하려면 "excanvas.min.js"를 임포트하시기바랍니다. 기본 기능에서 확장기능을 사용하려면 plugins 폴더에 있는 js파일을 사용해 확장합니다.
3. jqplot을 사용하기 위한 자바스크립트 & CSS 파일 임포트
1 2 3 | <script type="text/javascript" src=""jquery.js"></script><script type="textjavascript" src=""jquery.jqplot.min.js"></script><link rel="stylesheet" type="text/css" href=""jquery.jqplot.min.css"> |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript">$(function(){</p> $.jqplot("그래프를 표시할 셀렉터지정", [ [데이터1], [데이터2], [데이터3], ], { 옵션 });})</script> |
HTML
1 | <div id="그래프를 표시할 요소의 ID" style="height:높이;width:넓이"></div> |
플러그인
자주 사용하는 플러그인.
플러그인은 'plugins'폴더에 들어 있고, 필요에 따라 개별적으로 호출한다.
jqplot.barRenderer.js
차트를 만들 때 필요합니다.
jqplot.blockRenderer.js
블록 차트를 만들 때 필요합니다.
jqplot.bubbleRenderer.js
버블 차트를 생성하는 데 필요합니다.
jqplot.canvasOverlay.js
그래프에 선을 그 적용하기 위하여 필요합니다.
jqplot.categoryAxisRenderer.min.js
축을 카테고리 (범주)로 취급 그리드를 카테고리 구분선으로 표시 할 때 필요합니다.
jqplot.dateAxisRenderer.js
날짜 또는 시간 축을 시간축으로 취급 할 때 필요합니다.
jqplot.donutRenderer.js
도넛차트를 만들 때 필요하다.
jqplot.dragable.js
계열의 데이터 요소를 드래그하여 이동하도록 할 때 필요합니다.
jqplot.enhancedLegendRenderer.js
범례 기능을 확장 할 때 필요합니다.
jqplot.highlighter.js
강조 & 툴팁에 필요합니다.
jqplot.meterGaugeRenderer.js
미터 게이지를 만들 때 필요합니다.
jqplot.ohlcRenderer.js
촛대 등의 차트를 만들 때 필요합니다.
jqplot.pieRenderer.js
파이 (파이 차트)를 만들 때 필요합니다.
jqplot.enhancedLegendRenderer.min.js
범례의 기능을 강화한다.
jqplot.pointLabels.js
데이터 요소 레이블을 표시하는 데 필요합니다.
jqplot.trendline.js
추세선을 추가하기 위해 필요하다.
댓글목록
등록된 댓글이 없습니다.
