[Jquery]jqPlot - Jquery 를 이용한 그래프 그리기 - (2)

개발 노트/JQuery  2012.09.17 10:47



 

안녕하세요 개발자 명월입니다.

 

저번 포스팅에서는 jqPlot에 대해 사이트 소개와 이런 모듈이 있다라는 간략한 소개르 끝났습니다. 이번 포스팅에서는 좀 더 구체적으로 사용법과 사용예제에 대해 알아보겠습니다.

 

먼저, 소개 항목에 가서 가장 밑에 모듈을 다운을 받습니다.

[Jquery]jqPlot - Jquery 를 이용한 그래프 그리기 - (1) 바로가기

 

다운을 받고 압축을 푸시면 항목이 docs, examles, plugins 세 폴더와 그밖에 파일들이 보입니다.

 

 

먼저 실행하기 전에 docs에 들어가서 index.html을 확인 합니다.

 

 

누르면 관련 메뉴얼이 나옵니다.

  

 

옆에 메뉴에서 보면 Usage 는 사용법이고 Option은 옵션 사용법에 대해 기술 되어있습니다.

Plugins는 관련 클래스, 함수 사용법에 대해 자세히 기술 되어있습니다.

 

양이 어느 정도 되면 일일히 하나하나 짚으면서 소개 해 드리고 싶으나 너무 방대하기에 직접확인 하시는 편이 빠를 거라 판단됩니다.

(혹시라도 영어에 자신이 없으시면 비밀 댓글이나 메일이라도도 남겨두시면 관련 예제 만들어 드리겠습니다.)

 

일단 메뉴얼은 소개가 되었고 그럼 한개의 예제를 작성하여 만들어 보겠습니다.

 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>
  3 <HEAD>
  4 <TITLE> New Document </TITLE>
  5 <script language="javascript" type="text/javascript" src="excanvas.js"></script>
  6 <script type="text/javascript" src="jquery.min.js"></script>
  7 <script type="text/javascript" src="jquery.jqplot.min.js"></script>
  8 <script type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
  9 <script type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
10 <script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
11 <link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
12
13 <script type="text/javascript" src="plugins/jqplot.logAxisRenderer.min.js"></script>
14 <script type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
15 <script type="text/javascript" src="plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
16 <script type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
17 <script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
18 <script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
19 </HEAD>
20 <BODY>
21 <script type="text/javascript">
22 $(document).ready(function(){
23 for(var i=1;i<=10;i++){
24 $("#data").append("<th>"+i+"</th><tt>"+(i*10)+"</tt>");//데이터 만들기
25 }
26 var labels = [],data = [],line = [];
27 $("#data th").each(function () {labels.push($(this).html());});//X축 값
28 $("#data tt").each(function () {data.push(Number($(this).html()));});//y축 값
29 for(var i=0;i<data.length && i<labels.length;i++){
30 line[i] = [labels[i],data[i]];
31 }
32 var plot1=$.jqplot("chart1",[line],{
33 animate: true,
34 series:[
35 {
36 color : "rgb(78, 135, 194)",//그래프 색
37 showMarker: false
38 }
39 ],
40 axes:{
41 xaxis:{ //X축
42 tickOptions:{
43 formatString:"%'d",// 포멧형태
44 fontSize: '10pt'     // 글자 크기
45 }
46 ,drawMajorGridlines: true
47 ,min : 1
48 ,max : 10
49 },
50 yaxis:{ //Y축
51 tickOptions:{
52 formatString:"%'d",
53 fontSize: '10pt'   
54 }
55 ,drawMajorGridlines: true
56 ,min : 0
57 ,max : 100
58 ,numberTicks : 11
59 }
60 }
61 });
62 });
63 </script>
64 <table id="data" style="display:none"></table>
65 <div id="chart1" style="width:1000px; height:450px"></div>
66 </BODY>
67 </HTML>
68

 

 

결과 화면

 

 

예제 첨부 파일

 

jqPlot_Examlple.zip

 

※ 최초 Example 폴더에 보면 관련 예제들이 많이 첨부 되어있습니다. 확인 해 보시면 도움 되실 겁니다.

 


댓글 5개가 달렸습니다.
댓글쓰기

  1. 2013.05.28 15:18 |  수정/삭제  댓글쓰기

    비밀댓글입니다


  2. 2013.08.15 19:54 |  수정/삭제  댓글쓰기

    비밀댓글입니다


  3. 2013.10.08 10:54 |  수정/삭제  댓글쓰기

    비밀댓글입니다