jQuery jqPlot를 사용하여 선형,원형(파이형),막대형 그래프 생성하기

보통 통계를 낼 경우 단순 리스트로 데이터를 출력해서 화면에 출력해주곤 하죠

하지만 시각적으로 통계결과를 원하는 클라이언트들도 있습니다.

이럴경우 jqPlot라는 jquery 플러그인을 이용하여 차트를 적용을 해줄 수 있습니다.

이 플러그인은 다양한 종류의 차트를 제공해줍니다.

지원하는 그래프의 종류는 막대,선,원형,도넛등이 존재합니다.

줌기능도 지원이 되는 플러그인입니다 

이제부터 jqPlot 플러그인을 적용해서 샘플로 몇가지의 그래프를 생성해볼까 합니다.

jQuery 플러그인이다 보니 jQuery는 필수로 include가 되있어야 합니다.

저같은 경우는 jQuery CDN을 연동하여 설명을 진행하므로

 jQuery연동법은 제외하고 진행하도록 하겠습니다.

우선 화면에 그래프차트를 띄우기 위해서 jqPlot 플러그인을 다운로드 받도록 하겠습니다.

https://bitbucket.org/cleonello/jqplot/downloads/

위 주소로 들어가셔서 원하시는 버전을 다운로드 받도록 하겠습니다.

아무압축파일이나 다운받으시면 되지만 저는 오늘기준 최신버전인 

'jquery.jqplot.1.0.8r1250.zip' 파일을 다운로드 받아서 진행하도록 하겠습니다.

지원브라우저는 IE경우 7~ 테스트가 완료되었다니...  

왠만하면 동작된다는 의미라는거겠죠? ㅎㅎ

예를 들기전 다운로드 받은 압축 파일 해제후 

다음 파일들을 본인의 프로젝트 경로에 include해주도록 하겠습니다.

압축해제후 dist디렉토리를 보시면 위와같이 파일들이 존재하는데 

체크한 파일들을 프로젝트내에 INCLUDE를 해주세요

※ 같은명의 CSS 및 JS파일이 있는데 저같은경우는 minify 파일들만 include하였습니다.

그래프차트 출력을 위한 준비가 끝난상태이므로 이제는 실질적인 예를들어보도록 하겠습니다.

라인그래프 출력해보기

라인그래프를 연동하기전 모든 그래프 차트의 출력을 위한 기본 css파일과 js파일들을 INCLUDE해보도록 하겠습니다.

<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>

위 3가지 파일이 jqPlot의 기본적인 include가 되겠습니다.

다음으로 그래프를 그려줄 영역이 필요하므로 div태그 하나를 body 태그에 선언을 해주도록 합니다.

<div id="graph" style="width:300px; height:300px;"></div>

위 처럼 그래프가 그려질 영역을위한 DIV 태그를 작성하셨다면 그래프 그리는 스크립트를 onload함수에 실행을 해보도록 하겠습니다.

$(function(){
	//1번째 입력값 (그려진 영역의 id값)
	//2번째 입력값 (그래프내에 들어갈 데이터 값)
	 $.jqplot ('graph', [[1,2,3,4,5,300,30]]);
});

위에 onload내에 $.jqplot를 적용해주시면 다음처럼 결과가 나온다면 정상적으로 호출이 완료 된것입니다.

라인그래프 실행결과

마치 티스토리 방문자수 그래프와 같은 화면으로 구현이되었네요 ㅎ

여기 코드에 추가로 X/Y 좌표의 제목 및 그래프 제목을 옵션을 주어서 출력해보도록 하겠습니다.

타이틀관련 옵션적용한 스크립트 코드

         //1번째 입력값 (그려진 영역의 id값)
	//2번째 입력값 (그래프내에 들어갈 데이터 값)
	 $.jqplot ('graph', [[1,2,3,4,5,300,30]],
				 {
			 		title : '그래프 제목옵션',
			 		axes: {
			 	        xaxis: {
			 	          label: "X 좌표제목"
			 	        },
			 	        yaxis: {
			 	          label: "Y 좌표제목"
			 	        }
			 	      }

				 }
 		  );

타이틀 출력 실행결과

위와같이 정상적으로 출력이 되었습니다.

막대형 그래프 생성하기

막대형은 위의 선형그래프에 플러그인 + 스크립트코드가 추가가 됩니다.

막대그래프생성을 위한 추가 include JS파일

<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>

이제 이어서 막대 그래프를 생성하기 위해서는 다음 코드를 작성하도록 합니다.

※ onload내에 서술해주세요

$.jqplot('graph', [[['첫번째', 50], ['두번째', 22], ['세번째', 38], ['네번째', 30]]], {
      title: '막대형그래프',
      series:[{renderer:$.jqplot.BarRenderer}],
      axes: {
        xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          label: "X 좌표제목"
        },
        yaxis: {
          label: "Y 좌표제목"
        }
      }
    });

위 코드중 핵심은 series 속성입니다. 

플러그인을 막대형 그래프로 호출을 해준다는 속성값인거 같습니다.

선형이랑 막대형 및 원형의 데이터 규격차이는 2번째 입력값에서 여러개의 [] 로 구분을 지어서 값을 정한다는 것입니다. 

[]내에 첫번째 값의 경우는 x좌표의 구분값, 두번째 값의 경우는 y좌표의 높이값이 되는겁니다.

한번 위 코드를 기준으로 실행을 해보도록 하겠습니다.

막대그래프 실행결과

마지막으로 원형그래프(일명 : 파이형)를 출력해보도록 하겠습니다.

원형그래프 출력하기

원형그래프는 기존 막대그래프에서 추가로 INCLUDE 해준 플러그인 JS파일을 제거 한다음 

하단 플러그인을 INCLUDE해주도록 합니다.

<script type="text/javascript" src="plugins/jqplot.pieRenderer.min.js"></script>

위 플러그인은 원형그래프로 렌더링 해주기 위한 파일입니다.

원형그래프 호출 스크립트코드

 $.jqplot ('graph', [[['첫번째', 50], ['두번째', 22], ['세번째', 38], ['네번째', 30]]], 
	    { 
	      seriesDefaults: {
	    	//원형으로 렌더링
	        renderer: $.jqplot.PieRenderer,
	        //원형상단에 값보여주기(알아서 %형으로 변환)
	        rendererOptions: {
	          showDataLabels: true
	        }
	      },
	      //우측 색상별 타이틀 출력
		  legend: { show:true, location: 'e' }
	    }
);

실행결과

그래프 종류도 다양하고 브라우저 환경 + 속성값에 따라 애니메이션 효과도 주는것이 가능합니다.

지원하는 그래프도 많으니 사용하는 종류에 따라 알맞게 골라가면서 적용하시면 되실 겁니다!

by 개발로짜