2020/09/10 : jqPlot : 라인 차트 (꺾은선 그래프)

제이쿼리 파일, 제이쿼리 플러그인 파일, css

기본적으로 위의 세 가지가 필요하다.

라이브러리 설정이 끝나면, 차트를 그릴 내용이 필요하다.

가장 먼저 차트를 출력하고자 하는 태그가 필요하다.

1. div 태그를 이용해서 해당 차트를 그려줄 영역을 세팅할것이고,

2. 차트에 대한 id값과 data를 이용해서 jqPlot이란 함수을 이용하면 차트를 그릴 수 있다.

문법 구조에서, 차트를 그리려면

그래프를 그릴 위치, 차트에 들어갈 데이터들, 차트의 옵션이 필요하다.

1. 라인 차트

실제 코드

(바로 아래 코드 틀렸음! 밑에 오류 수정 부분으로!)

* line-chart.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery</title>

	<!-- 제이쿼리 모바일, 제이쿼리 라이브러리 파일 -->
	<link rel="stylsheet" 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, x축, y축 라벨 표시 플러그인 파일 -->
	<script src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
	<script src="jqplot/plugins/jqplot.canvasAxisLableRenderer.min.js"></script>
    
    
    <!-- 제이쿼리 스크립트 -->
	<script>
		$(document).ready(function() {
			var plot1 = $.jqplot ('chartdiv', [[3,7,9,1,5,3,8,2,5]], {
									title: '선 그래프 예제',
									axesDefaults: {
										labelRenderer: $.jqplot.CanvasAxisLableRenderer
									},
									axes: {
										xaxis: {
											label: "X 축"
										},
										yaxis: {
											label: "Y 축"
										}
									}
			});
		});
		// $.jqplot (그래프출력위치, 그래프데이터, 그래프옵션)
		// $.jqplot ('태그의 id값' , 기본 2차원 배열(x,y) , {기본축, 축들의 제목}) 
	</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>

11 :: 이 제이쿼리 mobile 버전이

25 :: jqplot 함수 => 실질적으로 그래프를 그려주는 함수

jqplot 함수에서, $.jqplot (그래프출력위치, 그래프데이터, 그래프옵션) 이와 같이 값들이 들어가게 되는데,

$.jqplot ('태그의 id값' , 기본 2차원 배열(x,y) , {기본축, 축들의 제목})

그래프 옵션이 여러가지일땐 { } 블록으로 묶어줘야한다.

28 :: 다른 축 제목은 그대로 쓰지만, label을 사용할때만 jqplot.CanvasAxisLableRenderer에서 제공하는걸 사용하겠다

23 :: 가장 먼저, 모바일 페이지를 선언해야 한다.

24 :: 상단 선언 부분 (필요 없다면 생략 가능)

27 :: 컨텐츠 선언 부분

32 :: 하단 선언 부분 (필요 없다면 생략 가능)

23 :: data-role 속성은 지정된 속성이므로 절대 바꾸면 안됨.

data-role이란 제이쿼리 모바일이 갖는 속성임.

data-role의 고정된 속성값들 즉, page, header, content, footer 는 바꿀 수 없음! 고정된 속성값임.

32 :: data-position 이란 해당 데이터 영역의 위치를 잡아주는건데, "fixed" 를 해줘야 컨텐츠 내용이 적든 많든 항상 밑에 고정되어 있게 된다.

실행 결과

(원래 강사님꺼랑 비교해보면 header랑 footer영역이 회색배경으로 칠해지고, 모바일에서 보는 화면처럼 나와야하는데 어떤부분 코드가 잘못된건지 모르겠다.)

오류 수정 !

왜 header랑 footer에 css가 적용이 안되는지 몰라서 한참 헤메고있었는데, 오타때문이였다.

line 9 의 link 태그에서, rel 속성 값을 적을 때 "stylesheet" 가 아닌 "stylsheet" 로 적어서,,!

수정한 코드와 실행결과는 아래에!

전체 코드 (접은글 펼치기)

<!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, x축, y축 라벨 표시 플러그인 파일 -->
	<script src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
	<script src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
	
	
	<!-- 제이쿼리 스크립트 -->
	<script>
		$(document).ready(function() {
			var plot1 = $.jqplot ('chartdiv', [[3,7,9,1,5,3,8,2,5]], {
									title: '선 그래프 예제',
									axesDefaults: {
										labelRenderer: $.jqplot.CanvasAxisLabelRenderer
									},
									axes: {
										xaxis: {
											label: "X 축"
										},
										yaxis: {
											label: "Y 축"
										}
									}
			});
		});
		// $.jqplot (그래프출력위치, 그래프데이터, 그래프옵션)
		// $.jqplot ('태그의 id값' , 기본 2차원 배열(x,y) , {기본축, 축들의 제목}) 
	</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>

실행 결과

'Java . Spring . Web . SQL' 카테고리의 다른 글

2020/09/10 : jqPlot : 파이(pie) 차트 (원형 그래프) (0)	2020.09.10
2020/09/10 : jqPlot : 바(bar) 차트 (막대 그래프) (0)	2020.09.10
2020/09/09 : jQuery : ajax (0)	2020.09.09
2020/09/09 : jQuery : Effects (0)	2020.09.09
2020/09/09 : jQuery : 5 (0)	2020.09.09

heidish blog