Web108 amCharts 사용방법 및 사용예제 총정리(!!) Chart 라이브러리 프로젝트에서 Amcharts라는 라이브러리로 그래프를 그려 화면을 그렸음(포틀릿, 관리화면 통계페이지 등)사용하기도 편리하고 UI 종류도 많고 뛰어나서 이렇게 정리해 놓는다 :)사실 예제랄법해도 Amcharts에서 제공해주는 많은 샘플예제가 있는데일단 어떻게 사용하는지의 대략적인 틀은 그 예제들을 파악해가면서 익히는게 좋다. https://www.amcharts.com/ 사이트의 Demos에 가면 샘플예제들을 많이 볼 수 있는데주로 많이 사용하는 Column&Bar , Line, Pie 등의 그래프들.그 외에도 많은 종류의 차트예제들이 있다. 그래프 클릭시 이벤트처리 방법, 범례처리, UI설정(뒷배경,가로줄,세로줄) , 마진여백..... 등의 세세한 컨트롤에 대해 정리해 놓은 곳이 .. 2019. 1. 30. jstree 사용방법 / 핸들링 방법 모음!! ( 특정노드선택, 부모노드 아이디찾기, 특정노드열기, 노드선택해제 등등) jstree를 사용해서 개발했던 여러 화면에서 기능들을 좀 정리해보았다.따라서 id값이 좀 중구난방인데 사용방법에 대해서 참고하면 좋을듯.jstree 처음 사용할때 워낙 애먹었던 기억이 있었고자주 사용하는 기능에 대해 전체적으로 정리되어 있던 포스팅은보지 못했던것 같아서 ^^jstree를 공부하고 계시는 개발자분들에게 도움이 되었으면 한다. (1) jstree 전체객체 참조 (여러방법이 있음) var _model = $("#jstree").jstree(true)._model.data; $.each(_model, function(_idx, _idata){ console.log( _idata.id); console.log( $("#"+_idata.id) ); } }); var obj = $('#jstree'.. 2019. 1. 24. Vue.js 입문 공부(1) /view정의,장점,예제 등 [ Vue.js란? ]-UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크.-MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션로직과 UI 분리를 위해 설계되었음.-Angular.js나 React.js보다 많이 알려지진 않았지만 최근 급속도로 확산되고 있으며 실제 Google Trends의 검색어 비율과 GitHub에서 vue.js의 관심이 크게 올라간 것을 확인할 수 있음. * 자바스크립트 프레임워크 트렌드 실시간 보기 : https://bestofjs.org/* vue.js 사이트 : https://kr.vuejs.org/ [ Vue.js 장점 ]-다른 프레임워크와는 달리 유연하고 가벼움-angular.js와는 달리 전체 아키텍처를 새롭게 구성할 필요가 없고 기존의.. 2019. 1. 24. Jstree 사용방법 정리(노드옮기기,노드오픈,노드닫기 등) / 실무활용 예제 jstree 사용방법 (1) jstree 라이브러리를 불러오고, jstree를 그릴 영역에 id값 설정 (2) 사용방법jstree template에 jstree를 그릴 아이디타켓DOM을 설정해주고Data를 조회해 바인딩하여 사용하면 된다. -plugins에 jstree 기능들을 추가하여 사용하면 됨.난 아래 3가지 기능을 주로 사용했다.search : jstree 데이타 내 검색 가능dnd : jstree 드래그앤드랍 이동처리contextmenu : 오른쪽마우스클릭으로 수정,삭제,추가등의 로직처리 var resData = [ { "parent": "#", "text": "샘플데이터1" ,"data" : { "url" : "/context/url1" } }, { "parent": "#", "text": ".. 2019. 1. 24. jQuery Datepicker 플러그인 사용예제 (달력이미지추가) 게시판에서 다음과 같이 예약발행 기능을 추가했다. 예약발행 / 기간발행 2가지의 기능을 추가해서설정한 예약된 시간에 발행되도록 하는 기능과지정된 기간동안에만 발행되었다가 해당기간이 끝나면 게시글을 내리는 기능이었다.어쨌든 날짜를 선택해야 하는 inputbox란에 달력이미지를 추가하고Datepicker를 사용해 구현하였다. 이미지는 Datepicker 옆에 img를 넣어처리 //달력icon클릭시 datepicker실행 $('#startDt').click(function(e) { e.preventDefault(); $("#startDatePicker").focus(); }); $('#endDt').click(function(e) { e.preventDefault(); $("#endDatePicker").fo.. 2019. 1. 23. 자바스크립트 데이터 정렬하기(큰값순정렬,작은순정렬) var List = [ { "AAA": 10 }, { "AAA": 235 }, { "AAA": 234 }, { "AAA": 860 }, { "AAA": 15 }, { "AAA": 11 } ]; //큰 순서대로 정렬 List.sort(function(a,b) { if (a.AAA*1 > b.AAA*1) return -1; if (a.AAA*1 b.AAA*1) return 1; if (a.AAA*1 < b.AAA*1) return -1; return 0; }); 2019. 1. 22. 이전 1 2 3 4 5 ··· 18 다음
