[jQuery] jqplot 를 이용한 막대 그래프 통계

Web 프로그램/js, jQuery 2016. 12. 6. 00:50

728x90

시각적으로 통계 결과를 화면에 보여주는 걸 구현할 때 jqplot 플러그인을 이용하면 쉽게 챠트를 그릴 수 있다.

위와 같은 막대 그래프로 통계 결과를 보여주고자 한다면 어떻게 해야 할까?

1. http://www.jqplot.com 사이트에서 플러그인 파일을 다운로드하여 서버에 설치한다.

현재 기준 최신버전은 jquery.jqplot.1.0.9.d96a669.zip 이다.

이 사이트를 알게 된 것은 2년전에 전문 개발자를 통해 알았는데 jQuery를 배우니 쉽게 활용이 가능하다.

2. 다운로드한 파일에 usage.txt 파일에 사용법이 나온다.

그리고 웹사이트 Examples 에도 다양한 형태의 예제 파일이 있다.

하지만 설명이 잘 이해되지 않을 수도 있다.

3. 간략하게 예제를 살펴보자.

예제는 DB와의 연동까지는 고려하지 않은 1단계라고 보면 된다.

필요한 플러그인 js 파일이 있는 경로명을 제대로 표시해주어야 그래프가 그려진다.

- 변수 line1 과 line2 두개를 표시하고자 할 경우이며, 1개만 표시하고 싶으면 line1 만 적어준다.

- 변수 ticks 는 X 좌표에 해당되는 값을 표시

- title : 상단 제목

<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript" src="./plugin/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="./plugin/jqplot/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./plugin/jqplot/plugins/jqplot.pointLabels.js"></script>
<script type="text/javascript" src="./plugin/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./plugin/jqplot/jquery.jqplot.css" />
<script type="text/javascript">
$(document).ready(function(){
    var line1 = [4, 6, 2, 5];
    var line2 = [10, 8, 22, 15, 10];
    var ticks = ['닛산', '포르쉐', 'KIA', '현대', '벤츠'];

    $('#chart1').jqplot([line1,line2], {
        title:'막대그래프 예제',
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: { barWidth: 25 },
            pointLabels: { show: true, formatString: '%d' }
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        }
    });
});
</script>

</head>
<body>
<div id="chart1" style="height:300px;width:600px; "></div>
</body>
</html>

보는 바와 같이 코드는 정말 심플하다.

변수 값을 PHP 와 연동하여 처리하는 것은 다음에 기술할 예정이다.

통계 그래프에 직접 변수를 지정해주는 경우는 거의 없을 것이고, DB와 연동하여 실시간처리가 되도록 해야 의미가 있을 것이다.

설명이 잘된 사이트가 있어서 링크를 걸어둔다.

http://wickedmagic.tistory.com/525

jqplot.com 사이트에서 영문으로 된 자료를 가지고 약간만 테스트를 하면서 본인이 원하는 스타일로 구현하면 된다. 그리고 좀 더 세부적인 내용을 알고자 한다면 구글에서 jqplot bar width example 와 같은 검색어를 입력하면 원하는 자료를 쉽게 찾을 수 있다.

http://www.jqplot.com/docs/files/plugins/jqplot-barRenderer-js.html 에도 옵션에 대한 설명이 나온다.

728x90

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

[jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 실제 연동) (0)	2016.12.07
[jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 연동개념) (0)	2016.12.06
[jQuery] MP3 Player (0)	2016.12.04
[jQuery] PHP 와 자바스크립트(jQuery) 값 전달 이해 (0)	2016.11.29
[jQuery] 년도와 월(月)을 선택하면 자동으로 마지막일자 변경 (0)	2016.11.23

Link2Me