[jquery] 그래프 plugin, jqPlot

jQuery 2009.10.21 17:26
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 으로 출력할 그래프가 보여지는 부분이다. 그럼 그래프를 구성하기 위한 코드를 작성해보자. 



[코드 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;
}


신고

'jQuery' 카테고리의 다른 글

[jquery] fullcalendar  (33) 2010.11.02
[jquery] ajax  (0) 2010.06.29
[jquery] clone 처리한 datepicker 에서 동작이 하나만 되는 문제  (3) 2010.03.31
[jquery] 그래프 plugin, jqPlot  (0) 2009.10.21
posted by 소연파파™