통계화면에 자주쓰이는 jqPlot 플러그인을 사용하여 그래프를 출력하고자 한다.
우선은 플러그인을 다운받도록 하자
jqPlot 사이트
https://bitbucket.org/cleonello/jqplot/downloads/
jqPlot 데모사이트
jqPlot 문서
http://www.jqplot.com/docs/files/usage-txt.html
지원하는 그래프들은 다양하므로 데모사이트에서 응용을 해서 쓰길바라며, 이번 글에서는
막대그래프를 기준으로 화면에 그래프를 생성해보도록 하겠다.
1. jqPlot 다운로드를 받아보자
현재기준으로 최신버전인 jquery.jqplot.1.0.8r1250.zip 파일을 다운받아 압축해제!
2. 해당 선택된 파일들을 프로젝트에 넣어서 작업을 진행하자
물론 본인이 넣으려고 하는것이 전부는 아니다. 압축푼 모든 파일들을 넣어도 무관하겠다.
그리고 배포시, 라이센스 txt 파일도 첨부해줘야 하는걸로 아는데...
라이센스쪽에는 아는 지식이 얇아서 정확히는 모르겠음
우선 작업 프로젝트내에 해당 파일들을 include해줬다면 준비는 끝!!
*참고로 본인은 jqplot라는 폴더를 만들어서 해당 파일들을 넣어줬음.
jQuery기반의 막대그래프 생성 지원을 해주는 플러그인들을 include했다.
다음은 스크립트 부분이다.
$(function(){ // [x좌표에 표출될 문자, y좌표와 그래프의 높이를 정해주는 값] var line1 = [ ['x좌표1', 7], ['x좌표2', 9], ['x좌표3', 15], ['x좌표4', 12] ]; //그래프플러그인 호출 //'chart1' -> 해당 그래프를 삽입할 태그ID //2번째 그래프에 들어갈 값들 $.jqplot('chart1', [line1], { //그래프 상단에 제목 title: '그래프 예제', series:[ { renderer:$.jqplot.BarRenderer } ], axesDefaults: { tickRenderer: $.jqplot.CanvasAxisTickRenderer , tickOptions: { /*옵션들은 document페이지를 참고*/ fontSize: '10pt' } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer } } }); });
마지막으로 id값이 chart1이란놈으로 div태그를 생성해보자
실행을 해보게 되면 다음 화면과 같이 나오면 그래프는 마무리...
스크립트 주석에도 적어드렸듯이 막대그래프외에도 다양한 그래프 종류들이 존재하며 옵션들 또한 다양한다.
출력하려는 그래프종류에 맞춰서 옵션들을 적절히 써가며 사용한다면 훌륭한 화면을 낼 수 있을것이다..
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
---|---|
[jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기 (0) | 2014.06.13 |
[jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
[jQuery treeview] 트리메뉴를 만들어보자! (0) | 2014.06.11 |
jQuery tableDnD을 이용하여 드래그앤드롭으로 테이블 목록 순서바꿔보기 (1) | 2014.06.11 |
처음에 올렸던 엑셀파일 다운로드에 이어서 내용읽기 부분을 진행하겠다.
첨부한 파일을 다운받으셔서 돌려보시길...
필요 라이브러리 관련해서는 엑셀다운로드 샘플링구현때 설명을 드렸습니다.
poi작업을 할 구성이 완료 되었으면
엑셀 파일을 읽어보자
엑셀 파일을 읽어서 구현가능한 기능은 일괄로 db에 insert하는 작업이 가능하겠다.
db insert 구현하는 부분은 응용을 하시도록 하고...
본인은 엑셀파일 읽는 수준으로만 간단하게 샘플링을 올리도록 하겠음..
해당 샘플은 xls용으로 우선 구현이 되있다.
xlsx버전은 후에 올리도록 하겠음.. 뭐 별차이는 없지만;;;
우선 샘플 코드부분
FileInputStream is = new FileInputStream("D:\\sample.xls"); //워크북 생성 HSSFWorkbook workbook = new HSSFWorkbook(is); int i = 0 short c = 0; //시트생성 HSSFSheet sheet = workbook.getSheetAt(0); //row사이즈담기 int rows = sheet.getPhysicalNumberOfRows(); //읽은 row 사이즈만큼 반복 for(i=1; i<rows; i++) { //excel파일의 시트에있는 row를 읽는다 HSSFRow row = sheet.getRow(i); // row가 비어있지 않으면 if(row != null) { //cell의 갯수를 담는다 int cells = row.getPhysicalNumberOfCells(); //cell의 수만큼 반복 for(c = 0; c<=cells;c++) { //cell값 읽기 HSSFCell cell = row.getCell(c); String value=""; //중간중간 cell이 널일수도 있으므로 if(cell == null) { continue; } else { //cell내용이 존재 //타입관련 적용은 여러가지가 있음 골라서 쓰시길... switch (cell.getCellType()) { case HSSFCell.CELL_TYPE_FORMULA: value = cell.getCellFormula(); break; case HSSFCell.CELL_TYPE_NUMERIC: value =""+(int)cell.getNumericCellValue(); break; case HSSFCell.CELL_TYPE_STRING: value =""+cell.getStringCellValue(); break; case HSSFCell.CELL_TYPE_BLANK: value =""+cell.getBooleanCellValue(); break; case HSSFCell.CELL_TYPE_ERROR: value=""+cell.getErrorCellValue(); break; } } System.out.println("엑셀cell내용읽기:"+value); } } }
위에보면 xls파일을 지정하고 파일을 읽어왔는데 해당 소스를 응용하여 JSP웹페이지에서
multipartfile로 받아온 첨부파일의 내용을 읽을수 있겠다.
예를 들어 multipartfile의 명칭이 fileNm이라고 할경우
HSSFWorkbook workbook = new HSSFWorkbook(fileNm.getInputStrem());
형식으로만 변경을 해주면 될것이다.
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
json-simple 라이브러리를 이용한 ObjecToString 과 StringToObject 코드구현 (2) | 2014.07.04 |
---|---|
자바 파일다운로드 - 멀티 브라우저지원 샘플코드 (0) | 2014.06.12 |
게시물 번호 구하기 샘플소스 (0) | 2014.06.09 |
자바 썸네일 이미지 생성 (0) | 2014.06.09 |
poi 라이브러리를 이용하여 엑셀 파일을 만들어보도록 하자 - (xls 확장자) (0) | 2014.06.05 |
쉽게 생각하면 스크립트 상에서 문자열로 만든 html 태그를 현재 보여진 화면에서 출력을 시켜주는 것이다.
동적으로 태그를 추가해주려면 해당 태그내에 html 태그를 모두 갈아 엎어주거나
지정 태그 기준으로부터 삽입할 위치를 지정해주는것을 해보기로 하겠다.
지정태그내에 존재하는 html 태그를 새로 지정한 html태그로 엎어버리고자 할때는
$(지정타겟).html(HTML태그문자열)
지정태그내에 존재하지 마지막 태그다음에 태그문자열을 삽입하는 방법은
$(지정타겟).append(HTML태그문자열)
지정태그바로 다음에 태그문자열을 붙이는 방법은
$(지정타겟).after(HTML태그문자열)
지정태그바로 이전에 태그문자열을 붙이는 방법은
$(지정타겟).before(HTML태그문자열)
와 같이 주면 될것이다.
그리고 예를들어서 화면에 HTML태그를 문자로 보여주고 싶을 경우!
$(지정타겟).text(HTML태그문자열) 처럼 text함수를 이용하면 태그가 아닌 문자로 화면에 출력이 가능하다
태그 화면을 보여주는 함수 : html / append / before / after
태그UI화면이 아닌 문자열로 화면을 보여주는 함수 : text
샘플로 태그 화면 보여주는 함수중에는 html을 써보고 문자열로보여주는 text 함수로만 샘플링을 구현해보았다. 해당 소스를 응용하여 html/append/before/after/text 에대하여 이해하도록 해보자.
스크립트 소스부분
$(function(){ var tag = "<input type="checkbox"><br />변경후HTML"; //html함수 적용하여 htmltest태그내의 html 변경 $("#htmlbutton").click(function(){ $("#htmltest").html(tag); }); //text함수를 적용하여 html함수를 사용했던 같은 내용의 문자열을 표출해본다. $("#textbutton").click(function(){ $("#texttest").text(tag); }) })
HTML 소스부분
<div id="htmltest" style="border-width: 1px; border-style: solid;"> <input type="text" value="test"/> <br/> 변경전HTML <br/> </div> <br/> <div id="texttest" style="border-width: 1px; border-style: solid;"></div> <input type="button" value="html 태그변경" id="htmlbutton"/> <input type="button" value="태그를 text로 출력" id="textbutton"/>
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 14장] 비동기 Ajax 통신을 해보자!! - HTML방식 (6) | 2014.06.16 |
---|---|
[jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
[jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
[jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
jQuery attr / prop 함수에 대해서 설명하던 도중 생각이나서 작성하게 되었습니다.
심플한 소스입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ //전체선택 체크박스 클릭 $("#allCheck").click(function(){ //만약 전체 선택 체크박스가 체크된상태일경우 if($("#allCheck").prop("checked")) { //해당화면에 전체 checkbox들을 체크해준다 $("input[type=checkbox]").prop("checked",true); // 전체선택 체크박스가 해제된 경우 } else { //해당화면에 모든 checkbox들의 체크를해제시킨다. $("input[type=checkbox]").prop("checked",false); } }) }) </script> </head> <body> <table> <tr> <td> 전체선택 : <input type="checkbox" id="allCheck"/> </td> </tr> <tr> <td> <input type="checkbox"/> </td> </tr> <tr> <td> <input type="checkbox"/> </td> </tr> <tr> <td> <input type="checkbox"/> </td> </tr> <tr> <td> <input type="checkbox"/> </td> </tr> <tr> <td> <input type="checkbox"/> </td> </tr> </table> </body> </html>
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
swfobject.js 를 이용하여 화면에 플래시파일 호출하기 (0) | 2014.07.29 |
---|---|
자바스크립트 replaceall 함수만들기 (0) | 2014.06.08 |
태그 속성값이란?
<input type="text" id="id1" name="name1" />
각 밑줄 친것처럼 각 태그들에 정의되어있는 설정값들이다.
해당 값들의 속성값을 알아오기 위해서는 attr함수를 사용하면 되는데
사용법은
$("태그").attr("옵션key") 와같은 형식으로 지정해주면 된다.
간단한 스크립트로 예를 들어보자
상단에 input태그의 id값을 가져오고 싶을경우
$("input").attr("id")
상단에 input태그의 name값을 가져오고 싶을경우
$("#id1").attr("name")
등 위와같이 attr함수를 이용하면 해당 속성에대한 값을 추출할수 있을 것이다.
그리고 만약 속성값을 변경하고 싶다면
$("#").attr("name","새로운네임")
형식으로 지정하면 해당 속성값 변경이 일어난다.
jquery 1.6.x 버전부터 prop라는놈이 추가로 된걸로 알고 있다.
이놈은 뭐할때 유용하냐면 true / false체크 같은것을 사용할때 아주 유용하다
예를들어 체크박스에서 prop를 요즘 자주쓰는데,
$("#").attr("checked",true);
$("#").attr("checked",false);
또는
$("#").attr("checked","checked");
$("#").attr("checked","");
prop가 지원하기 전에 버전에서는 해당 스크립트로 체크박스를 제어할수 있었는데
prop가 나온후로는
$("#").prop("checked",true);
$("#").prop("checked",false);
로 변경을 해주어야 체크박스 핸들링이 가능하다.
만약 jquery버전업을 했거나 attr함수로 원하는 제어가 안되실 경우에는 prop함수를 사용해보시길 바랍니다.
정확히 어떨때는 prop를 써야한다고 정의를 해드리지 못하겠습니다.
감으로 둘중 하나를 골라서 사용하셔야 한다는...
아마 대부분 attr로 해결이 가능하지만 해결이 불가능할경우!! prop속성을 한번 사용해보시길....
스크립트 비교 소스로 마무리...
스크립트 부분
$(function(){ //체크가 안되어있을때 alert($("#check1").attr("checked")+","+$("#check1").prop("checked")); //-> 결과 undefined , false //체크가 되있을때 alert($("#check2").attr("checked")+","+$("#check2").prop("checked")); //-> 결과 checked , true })
샘플 html 태그
<input type="checkbox" id="check1" /> <input type="checkbox" id="check2" checked="checked" />
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery 13장] 동적으로 생성된 태그에 이벤트를 주자! (24) | 2014.06.16 |
---|---|
[jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
[jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
[jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |