[jquery] 그래프 plugin, jqPlot

jquery plugin 인 jqplot 을 이용하면 좀 더 멋진 그래프를 그릴 수가 있다. 

우선 참고 사이트(jqplot)에서 더 많은 정보를 얻을 수 있지만 그 중에서 간단한 그래프를 하나 그려보겠다. 

<link href="/js/jquery/jqplot/jquery.jqplot.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="/js/jquery/jqplot/excanvas.min.js"></script>

[코드 1] jqplot

1. jqplot 를 이용하기 위해서는 html 이나 실제로 보여지기 위한 화면에 [코드 1]을 추가해야 한다. 

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

[코드 2] jqplot 출력

2. [코드 2] 는 jqplot 으로 출력할 그래프가 보여지는 부분이다. 그럼 그래프를 구성하기 위한 코드를 작성해보자. 

$(document).ready(function() { var userPoints = [10, 23, 28, 50]; //임시 데이타 var jobPoints = [2, 5, 6, 18]; //임시 데이타 //var userPoints = [];//실제 데이타는 아래와 같이 처리하세요. //for (var i=0; i<2*Math.PI; i+=0.1){ // cosPoints.push([i, Math.cos(i)]); //} plot = $.jqplot('chart', [userPoints, jobPoints], { legend:{show:true, location:'ne'}, title:'Activity', series:[{label:'사용자'},{label:'직업'}], axes:{ xaxis:{ label:'date', autoscale: true }, yaxis:{ label:'count', autoscale: true } } }); });

[코드 3] 스크립트 소스

3. date 와 count 를 x, y 로 하는 그래프를 그려보았다. 물론 해당 사이트에서 다른 형태의 그래프도 구현하고 있으니 참고 하면 될것이다. 

[그림 1] 그래프

4. [코드 3]의 소스는 [그림 1] 과 같이 출력이 되는 것을 확인할 수 있다. [코드 3]에 대한 간단한 설명은 다음과 같다. 

02. 데이터
03. 데이터
08. 실제 보여지는 부분 , id="chart" 영역에 보여짐
09. 그래프 설명부분으로 그래프에서 '사용자', '직업' 을 구분하는 설명부분임 (show : 필요없으면 false,  location : 북동(ne) 쪽을 가리킴, 원하는 방향은 약어로 설정)
10. 타이틀 설정
11. x, y 축 제목 설정
12 ~ 21. x, y 축 기타 설정

jquery.jqplot.css 에서 legend 부분의 사이즈가 고정되어 있는데 가변적으로 바꾸고 싶다면 css 파일을 다음과 같이 수정해 주면 된다.

table.jqplot-legend {
    background-color: rgba(255,255,255,0.6);
    border: 1px solid #cccccc;
    position: absolute;
    font-size: 0.75em;
    width: auto;
}

 참고 

jqplot download & doc ->

jqplot example ->