1. 수직 바 차트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery</title>
<!-- 제이쿼리 모바일, 제이쿼리 라이브러리 파일 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jqPlot 기본 라이브러리 파일 -->
<link rel="stylesheet" href="jqplot/jquery.jqplot.min.css"/>
<script src="jqplot/jquery.jqplot.min.js"></script>
<!-- jqPlot 바차트 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.barRenderer.min.js"></script>
<!-- jqPlot 카테고리(바 표시) 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<!-- jqPlot, x축, y축 라벨 표시 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<!-- jqPlot 포인트 라벨 표시 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.pointLabels.min.js"></script>
<!-- jqeury 스크립트 부분 -->
<script>
$(document).ready(function() {
var s1 = [631, 217, 754, 1008];
var ticks = ['1분기', '2분기', '3분기', '4분기'];
plot1 = $.jqplot('chartdiv', [s1], {
title: '막대 그래프 예제 1',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
label: '분기',
labelRenderer: $.jqplot.canvasTextRenderer
},
yaxis: {
labelRenderer: $.jqplot.canvasAxisLableRenderer,
label: '매출액'
}
}
});
});
</script>
</head>
<body>
<div data-role="page"> <!-- 1. 페이지 선언 -->
<div data-role="header"> <!-- 2. 페이지의 상단 부분 선언 -->
<h1>header 영역</h1>
</div>
<div data-role="content"> <!-- 3. 페이지의 컨텐츠 부분 선언 -->
<div id="chartdiv" style="height: 400px; width: 300px;">
<!-- 차트 표시 영역 -->
</div>
</div>
<div data-role="footer" data-position="fixed"> <!-- 4. 페이지의 하단부 선언 -->
<h4>footer 영역</h4>
</div>
</div>
</body>
</html>바 차트는 라인 차트와는 달리 표 내부에 사각형의 박스모양으로 구역이 나눠져있어야한다.
34 :: s1 배열 내부의 값들이 막대그래프가 가져야 할 높이(height) 값들
35 :: x축의 눈금에 숫자를 표기하는게 아니라 해당 막대의 위치가 무엇을 뜻하는지 이름을 붙여줄 때 사용할 ticks 배열
36 :: 아래의 div 위치 중, chartdiv 위치에 그리겠다~, 그리고 [s1]이라고 써놨지만 실제로는 [[631, 217, 754, 1008]] 로, 이차원 배열이다.
38 :: 라인차트에서는 axesDefaults 였지만, 바차트는 seriesDefaults 임!
39 :: 위의 line 18 에서 선언해놓은 barRenderer를 이용해 그리겠다~
40 :: pointLabel 은 막대 바 위에 뜨는 숫자들!
42-41 :: x축은 CategoryAxisRenderer, y축은canvasAxisLableRenderer로!
x 축은 CategoryAxisRenderer로 그려주고, ticks 값들은 ticks로 채운다. label명은 '분기'로 표현하고, '분기'의 글씨들은 canvasTextRenderer로 그려라
y 축은 label은 '매출액'으로 표현해주고, 이 label을 표현 해 줄때는 그래프에서 가장 큰 애를 기준으로, 200단위로 자동으로 생성된다.(200, 400, 600, ...)
실행 결과
수직 바 차트의 경우, 각 분기별로 그래프가 한개씩만 나오는데
아래에서 할 수평 바 차트에서는 그래프가 두개씩 나오게 그릴 것이다.
이런식으로, 파란색은 남학생, 노란색은 여학생의 범례를 만들것임
2. 수평 바 차트
(플러그인 코딩 부분, body내부는 위의 수직 바 차트와 동일)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery</title>
<!-- 제이쿼리 모바일, 제이쿼리 라이브러리 파일 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- jqPlot 기본 라이브러리 파일 -->
<link rel="stylesheet" href="jqplot/jquery.jqplot.min.css"/>
<script src="jqplot/jquery.jqplot.min.js"></script>
<!-- jqPlot 바차트 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.barRenderer.min.js"></script>
<!-- jqPlot 카테고리(바 표시) 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<!-- jqPlot, x축, y축 라벨 표시 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<!-- jqPlot 포인트 라벨 표시 플러그인 파일 -->
<script src="jqplot/plugins/jqplot.pointLabels.min.js"></script>
<!-- jqeury 스크립트 부분 -->
<script>
$(document).ready(function() {
var s1 = [20, 40, 60, 30];
var s2 = [50, 10, 30, 40];
var ticks = ['1학년', '2학년', '3학년', '4학년'];
plot1 = $.jqplot('chartdiv', [s1, s2], {
title: '막대 그래프 예제 2',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show : true },
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal'
},
},
series: [
{ label: '남학생' },
{ label: '여학생' }
],
legend: {
show: true,
placement:'outside'
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
});
</script>
</head>
<body>
<div data-role="page"> <!-- 1. 페이지 선언 -->
<div data-role="header"> <!-- 2. 페이지의 상단 부분 선언 -->
<h1>header 영역</h1>
</div>
<div data-role="content"> <!-- 3. 페이지의 컨텐츠 부분 선언 -->
<div id="chartdiv" style="height: 400px; width: 300px;">
<!-- 차트 표시 영역 -->
</div>
</div>
<div data-role="footer" data-position="fixed"> <!-- 4. 페이지의 하단부 선언 -->
<h4>footer 영역</h4>
</div>
</div>
</body>
</html>34, 35 :: 배열에 각 값을 넣어놓은것
38 :: jqplot 함수 => [s1, s2] 에 의해서 실질적으로는 이차원 배열로
0 1 2 3
[
[20, 40, 60, 30], 0
[50, 10, 30, 40] 1
]
이렇게 들어가게된다.
45 :: 바 차트는 기본적으로 수직 방향이므로, 'horizontal'로 바꿔준것
48 :: 한 항목에 나타낼 bar 들은 '남학생'라벨(line49)과 '여학생'라벨(line50) 이다.
이 series가 있어야지 그래프에서 범례를 나타낼 수 있다.
52 :: 범례를 나타내는 legend 속성,
범례를 나타내기 => show , 범례를 그래프 바깥으로 빼서 놓겠다 => placement : 'outside'
실행 결과
+ ))
범례(legend > placement)를 'outside'가 아닌 'inside'로 바꾸고,
그림자 부분(shadowAngle)을 45 로 바꾼 경우
+ ))
rendererOptions > barDirection 을 'horizontal' 에서 'vertical' 로 바꾸고,
'Java . Spring . Web . SQL' 카테고리의 다른 글
| 2020/09/10 : jQuery : 버블(bubble) 차트 (0) | 2020.09.10 |
|---|---|
| 2020/09/10 : jqPlot : 파이(pie) 차트 (원형 그래프) (0) | 2020.09.10 |
| 2020/09/10 : jqPlot : 라인 차트 (꺾은선 그래프) (0) | 2020.09.10 |
| 2020/09/09 : jQuery : ajax (0) | 2020.09.09 |
| 2020/09/09 : jQuery : Effects (0) | 2020.09.09 |
댓글