본문 바로가기

javascript

 (73)
jquery prop 사용할 때 selectbox의 첫번째 option을 선택하고자 한다. prop 메소드를 사용하고자 할 때. ( option 을 선택하면 chage가 실행된다.) 1번 $('#selectList option:first').prop("selected", true).trigger("change"); 2번 $("#selectList").prop("selectedIndex", 0).trigger("change"); 2가지 방법이 있을 때, 1번보다 2번이 명확하게 잘 실행이 됐다. prop에 대한 공식 : https://api.jquery.com/prop/ .prop() | jQuery API Documentation Description: Get the value of a property for the first elem..
제이쿼리 데이트피커 사용법 활용 제이쿼리 데이트피커 사용법 활용 let date = $("#from36").val().split("."); date[1] = date[1] - 1; let formattedDate = new Date(date[0], date[1], date[2]).toLocaleDateString("ko-KR", {year: "numeric", month: "2-digit", day: "2-digit"}); $("#to36").val(formattedDate); $("#to36").datepicker({ setDate:"0", dateFormat:"yy-mm-dd", }); 옵션 참고 : https://www.nextree.co.kr/p9887/ jQuery: 참 편리한 날짜선택 위젯- datepicker 웹 페이지를 ..
타블레이터 index 필요할 때 getIndex() 타블레이터에서 index가 필요한 순간이 있다. getData()는 말그대로 데이터만 가져오기 때문에 초기에 타블레이터 테이블을 만들 때, index를 지정해주고, rowSelected 할 때, getIndex()로 불러올 수 있다! odAn.grid1 = new Tabulator('#gridTest',{ placeholder:"데이터를 불러오는 중입니다", layout:"fitDataStretch", index: "R_ID", initialSort:[ {column:"R_NAME", dir:"asc"}, ], columns: [ { field: "R_ID", title: "R ID", width: "42%", sorter:"number",}, { field: "R_NAME", title: "R 명", ..
Chart.js bar chart 막대차트 2개일 때 간격 조정하는 옵션 Chart.js bar chart 막대차트 2개일 때 간격 조정하는 옵션 chart.options.categoryPercentage = 0.5; chart.options.barPercentage = 1.0; HTML 삽입 미리보기할 수 없는 소스 참고 : Chart.js 한글문서! 감사합니다! https://yeon22.github.io/Chartjs-kr/ Chart.js | 당신의 웹사이트를 위한 HTML5 차트 오픈소스 2.0의 새로운 기능 모든 것에 애니메이션을! 데이터 변경, 색상 수정과 데이터 집합을 추가할 때 탁월한 애니메이션 효과를 제공합니다 yeon22.github.io 한글 문서 작성하신 분 : 감사합니다~! https://medium.com/@su_bak/side-project-cha..
OpenLayers 오픈레이어스에서 선 여러개 긋기 OpenLayers 오픈레이어스에서 지도위에 선 여러개 긋기. 아래 코드는 제가 작업한 전체코드의 일부이기 때문에 복붙 그대로 하시면 아마 안될것입니다. 참고만 하세요~ 그리고 미래의 나를 위해.. 오늘도 일단 테스트 코드를 블로그에 열심히 복붙... 제발 까먹지 말기... 1번 : 처음에는 한개만 그어놨었는데... 여러개가 필요하다면 어떻게 해야될지 고민했다. 이런식이라면 객체를 계속 생성해야 되기 때문에 선 1개 그을때는 모르겠지만 여러개를 긋는다면 보완이 필요함. drawLineTEST: function () { // 지도 생성 let map = new ol.Map({ target: 'odAnlsTEST', layers: [ new ol.layer.Tile({ source: new ol.source..
Tabulator 타블레이터 행 움직이게 하는 옵션 tabulator에서 테이블 1개에서 그리드를 이동시키거나, 테이블 2개 사이를 행이 왔다갔다 하는 옵션. 타블레이터 행을 움직이게하는 옵션, movableRows:true, movableRowsConnectedTables:'', movableRowsReceiver: "add", 공식 문서 : https://tabulator.info/docs/5.2/move#rows-table Tabulator - Interactive JavaScript Tables Create interactive data tables in seconds with Tabulator. A free, open source, fully featured JavaScript table / data grid generation library. ..
Chart.js Stacked Bar Chart 차트 BorderRadius 사방으로 둥글게 chart js에서 bar 막대 차트를 가로형으로 만들고 가장자리를 모두 둥글게 하고 싶었는데... 생각보다 오래걸림. 왜냐하면 데이터 시작하는 부분에서 자꾸 borderRadius가 안먹었다. 해결 방법은.... 시작하는 데이터에 borderSkipped:false를 해주어야 했다!!! 코드펜에서 테스트한 나의 결과물 : HTML 삽입 미리보기할 수 없는 소스 처음에 영문도 모를 때 도움 받았던 이슈 : https://github.com/chartjs/Chart.js/issues/9217 Stacked bar chart with borderRadius only rounds the last dataset · Issue #9217 · chartjs/Chart.js Expected Behavior All b..
Tabulator와 Chart.js 활용시, Chart.js 데이터를 Tabulator에 넣는 방법. Chart.js를 활용하여 차트를 먼저 만들어 놨는데, Tabulator를 추가할 일이 생겼다. 데이터를 처음부터 다시 가공하기 보다는 만들어 놓은 chart 데이터를 조금만 변형하면 되겠다. Chart.js에서 사용중인 데이터는 다음과 같다. ChartData : {"date":["2023-10-05 12:45:00","2023-10-05 13:00:00","2023-10-05 13:15:00","2023-10-05 13:30:00"],"TRF":[253,256,274,249],"WD_TRF":[268,261,275,274],"YD_TRF":[268,261,275,274],"PDST":[54,45,96,101],"WD_PDST":[58,25,74,101],"YD_PDST":[58,25,74,101],"..

티스토리툴바