시각적으로 통계 결과를 화면에 보여주는 걸 구현할 때 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>
<!-- http://www.jqplot.com 제공 자바스크립트 include -->
<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 에도 옵션에 대한 설명이 나온다.
'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