JavaScript (27) 썸네일형 리스트형 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],".. 마우스 오버시 svg fill 변경하기 마우스 오버시 svg fill 변경하기. 이렇게 만들어 놓긴했는데 반응이 느려서..사용 안하기로 함. function handleHover(button) { const svgPath = button.getAttribute("data-svg-path"); const svgDiv = button.querySelector("div"); const originalHTML = button.innerHTML; // 초기 HTML 내용 저장\ // 버튼에 마우스 호버 이벤트 리스너 추가 button.addEventListener("mouseenter", () => { // SVG 파일 로드 fetch(svgPath) .then(response => response.text()) .then(svgData => { //.. Chart.js에서 차트 update할 때, 왜 함수로 makeMixedChart를 만들어 놨고, 함수호출해서 MixedChart 생성후에 필요한 옵션을 그때그때 추가하면서 update하는 식인데... 오늘 처음 안 사실.. 1번처럼 하면 안먹혔다. 2번처럼 하면 먹힌다. 함수를 안만들고 그냥 new해서 바로바로 할 때는 또 된다.. //1번 적용안됨. //mainMixedChart.chartNM.options = {plugins:{legend:{display:false}}, datalabels: { display: false }}; //2번 mainMixedChart.chartNM.options.plugins.legend = {display: false }; mainMixedChart.chartNM.options.plugins.datalabels =.. js 객체안에 프로퍼티 출력 방법 자바스크립트... 객체 안에 넣은놈들을 확인하고 싶다.. 어떻게 했더라? 엥? 기억이 안나...!!!! js 객체안에 프로퍼티 출력 방법! 친절한 블로그를 만났다!! 감사!! https://jigeumblog.tistory.com/70 Javascript] 객체의 key(프로퍼티 이름), value(프로퍼티 값) 출력하기 1. Object.keys - 특정 객체의 프로퍼티를 출력하기 const newStudent = { "1.name" : "jinee", "2.age" : 26, "3.class" : "A", "4.number" : "23", "5.birthday" : "1997-04-01", "6.emailAddress": "jinee@google.com", "7.phoneNumber": "010-12.. svg fill을 javascript로 변경하기 프로젝트에 아이콘 이미지를 png로 사용 중이었는데, 상태가 normal과 hover 2가지이다. 그렇다보니 모든 아이콘 이미지가 2개씩 있다. 그냥 뭐 그대로 해도 되는데.. 이번에 내가 맡은 부분에서는 svg 파일 하나로 컨트롤을 해보고 싶었다. svg 파일을 이미지로 사용하면 마우스 오버 했을 때, fill을 변경 할 수가 없어서 자바스크립트로 했다. css background image로 해도 마찬가지로 fill을 변경 할 수 없었다. // pu_btn 마우스 오버 function handleHover(button) { const svgPath = button.getAttribute("data-svg-path"); const svgDiv = button.querySelector("div"); co.. 제이쿼리없이 마우스 드래그 탈 제이쿼리를 하기위해.. 요즘 작성하는 코드마다 열심히 자바스크립트로 하고 있다. HTML : 제목 bbbb JS : function drgg(){ const draggableDiv = document.getElementById('draggableDiv'); const title = document.querySelector("#draggableDiv > h1"); let isDragging = false; let offsetX, offsetY; // h1 제목에 마우스 다운 이벤트를 처리. title.addEventListener('mousedown', (e) => { isDragging = true; offsetX = e.clientX - draggableDiv.getBoundingClientRect.. javascript 매개변수 배열 자바스크립트에서 함수에 매개변수를 받을 때, 배열로 받으려면 어떻게 해야 될까? 가볍게 아래와 같이 .... 일단 이렇게 함수를 접근해서 진행해보기로 const testObj = { editPop : function( args ){ const f1 = args[0]; const f2 = args[1]; console.log("Inner : ", f1, f2); } } testObj.editPop(["ab","cd"]); 자바스크립트 배열 json 형식 데이터에서 정수값 실수로 변경하여 새로운 객체로 만들기 자바스크립트 배열 json 형식 데이터가 있습니다. 속성중에 score가 있는데, 이 부분을 일괄적으로 실수로 변경하고자 합니다. const data = [ {"name": "john", "score": 6}, {"name": "david", "score": 7}, {"name": "philip", "score": 8.9} ]; const new_array = data.map(item => { return { ...item, score: parseFloat((item.score).toFixed(1)) }; }); // 결과 출력 console.log(new_array); data 배열을 map 함수를 사용하여 새로운 new_array를 만들어 줍니다. `map()` 메서드에서 콜백 함수의 중괄호(`{}`.. 이전 1 2 3 4 다음 목록 더보기