01. jqPlot(http://www.jqplot.com/) 사이트에 접속하여 메인페이지에서 Download를 클릭한다.
02. 다운로드 페이지에서 jqPlot 라이브러리중 하나를 선택하고 다운받는다.
해당 포스팅은 작성일 기준 가장 최신의 jquery.jqplot.1.0.9.d96a669.zip 파일을 다운받았다.
테스트를 진행하는거라면 가능한 최신 파일을 사용하도록 하자.
03. 이제 jqPlot프로젝트를 실행할 jqplot 폴더를 만들고 해당 폴더내에 css와, js폴더를 추가적으로 각각 생성한다.
04. 먼저 js 폴더에 필요한 파일들을 추가한다.
추가할 파일은 plugins 폴더와 excanvas.js, jquery.jqplot.js, jquery.jqplot.min.js 파일들을
js폴더 에 복사한다.
05. 다음으로 css 폴더에 필요한 파일들을 추가한다.
추가할 파일은 jquery.jqplot.css 파일과 jquery.jqplot.min.css 파일을 css폴더 에 복사한다.
06. 이제 jqPlot과 함께 사용할 jQuery 파일을 만들어야 한다.
https://code.jquery.com/jquery/ 페이지에 접속하여 사용할 jQuery를 생성한다.
(해당 포스팅은 jquery-2.1.0.min.js를 중심으로 작성되었다.)
① minified 를 클릭한다.
07. 06의 ②번에서 복사한 페이지로 이동하고 표시되는 모든 내용을 복사한다.
08. 메모장등의 TEXT 편집기에 05번에서 복사한 내용을 붙여놓고 jquery-2.1.0.min.js 파일로 만들어서 저장한다.
09. 생성한 jquery-2.1.0.min.js 파일을 위에서 생성한 js파일과 같이 묶어준다.
10. 이제 jqplot 프로젝트에서 아래와 같은 파일을 만들어 실행해 보자.
| jqplot_graph.php |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/> <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script> |
11. 이제 해당 프로젝트를 빌드하면 아래와 같은 그래프가 화면에 나타나는 것을 확인할 수 있다.
'jQuery > jqPlot' 카테고리의 다른 글
| [jqPlot] 같은 차트에 막대 그래프와 꺽은선 그래프 그리기 (0) | 2016.09.29 |
|---|---|
| [jqPlot] jqPlot 막대 그래프 2개의 데이터 하나로 합치기 (0) | 2016.09.29 |
| [jqPlot] jqPlot 막대 그래프에 레이블 생성하기 (0) | 2016.09.29 |
| [jqPlot] jqPlot의 막대 그래프 그리기 (0) | 2016.09.29 |
| [jqPlot] 플러그인 및 옵션 정리 (0) | 2016.09.27 |
