반응형 JavaScript7 c3 Chart 범례(legend) 클릭 시 순서가 변경된다? 웹 페이지에서 데이터 시각화에 많이 사용되는 C3.js는 사용하기 쉽고 다양한 기능을 제공하는 차트 라이브러리입니다. 그러나 범례(legend) 클릭 시 데이터 순서가 변경되는 문제가 발생할 수 있습니다. 1. 문제점?C3.js에서 차트를 생성하고, 범례를 클릭하면 데이터가 표시되거나 숨겨집니다. 하지만 기본 설정에서는 범례를 클릭할 때 데이터의 순서가 자동으로 변경되는 문제가 발생할 수 있습니다. 이는 사용자가 데이터의 순서에 의존하는 경우, 불편을 초래할 수 있습니다. 2. 해결 방법: data.order 옵션 사용C3.js는 data.order 옵션을 제공하여 데이터의 순서를 제어할 수 있습니다. 이 옵션을 적절하게 설정함으로써 범례 클릭 시 데이터 순서가 변경되지 않도록 고정할 수 있습니다.dat.. JavaScript 2024. 9. 11. 함수의 return은? 함수의 return이 처음에는 굉장히 헷갈렸습니다. 왜 함수에 마지막에 저녀석을 왜 쓰는 거지? 저걸 위에 쓰니까 다른 코드들이 작동이 되지 않았던 부분에서 공부를 하면서 찾기 시작했습니다. (사실 이전에 공부했던 부분을 정리하였는데, 요즘은 강의를 들으면서 개인적으로 다른 내용도 추가하고 정리를 하는 부분입니다.) - return 문법은 왜? return 우측 값을 반환합니다. return 에는 아무거나 작성이 가능합니다. (숫자, boolean) -> 어떤 값도 반환하지 않는 경우에는 사용하지 않는 것이 좋습니다. 함수 종료 기능을 가지고 있습니다. 이전에 학원에서 공부했을 때는 함수 실행문 밑에 return이 있는 거를 그냥 따라치기 했었는데, 그냥 그런가보다만 했었는데, 3번 함수 종료 기능을 모.. JavaScript 2022. 12. 17. chart.js를 살짝 익혀봅시다 chart.js는 생각보다 어렵지 않습니다. 생각보다 단조롭고, 싱글 데이터값부터 멀티 데이터값까지 다양하게 넣을 수 있는 장점이 있습니다. 그동안 chart.js에 대해 많이 쫄아(?)있었지만, 생각보다 어렵지 않게 이용이 가능했습니다. 아직까지는 데이터를 불러와서 적용하는 부분보다는 random이나 고정값으로 밖에 테스트를 하지 못했습니다. 그래도 그려지는 부분, 원리를 아는 것이 가장 중요한 것이니까!! 1. chart.js 연결 CDN이나 파일로 연결을 하면 사용할 준비가 된 셈입니다. 저는 테스트를 목적으로 하는 부분이기에 CDN으로 연결을 하였으나, 실제로 chart.js를 서비스에 포함시킨다면 파일로 연결을 해야 이롭습니다. 2. 영역 만들기 영역을 잡지 않고 다이렉트로 mychart(def.. JavaScript 2021. 10. 28. [JavaScript] 대문자 - 소문자 변환 (toLowerCase, toUpperCase) 영문 알파벳은 대문자와 소문자가 구분이 되어있는데, 전부 소문자나 대문자로 변환하는 방법이 있습니다. toLowerCase(), toUpperCase()로 구분이 되고, 이 메서드를 작성하게 되면 전부 소문자 혹은 대문자로 변경이 됩니다. 위의 변환 방법은 오로지 영문에서만 동작하고, 별도의 인자를 받지 않습니다. toLowerCase() 문자열 소문자로 변환 toUpperCase() 문자열 대문자로 변환 하단의 있는 userAgent 내용을 toLowerCase를 통하여 소문자로 변경합니다. 이번에는 userAgent 내용을 toUpperCase를 통하여 대문자로 변경합니다. 새해가 되고, 열심히 공부하고 있는 과정 중에 모르는 부분이 있으면 이렇게 정리하면서 지식으로 만드는 방법은 분명히 중요하다고 .. JavaScript 2021. 2. 3. [JavaScript] 0~10까지 숫자 카운트 JavaScript에서 for문을 통하여 console에 0~10까지 카운트입니다. for(var i = 0; i JavaScript 2020. 12. 11. 카카오지도 API 연결 성공기 주말 내내까지는 아니고, 주말에 조금씩 시간내서 시안을 만들었던 부분에서 카카오지도를 연결해서 회사 위치를 넣어야하는 부분이 있었습니다. (내가 만든건데도.. 참) 일단, 여러가지이면서 다양한 페이지들을 구현해보려고 구성을 했었습니다. 위치 찾기나 회사 위치 등에 페이지를 보면서 꼭 넣어봐야지 했었는데, 이번에 페이지에 추가하게 되었습니다. 생각보다 넣는 것까지는 어렵지는 않았습니다. 그래 넣는것까지... 그 뒤가;; 정말, 위 코드만 넣고, 바로 지도가 되는 줄 알았습니다. 하지만..!! 로컬에서는 테스트가 되지 않아 굉장히 괴로워했다.. 그래서 API 관련 테스트는 웹서버에 업로드 후에 확인을 해야합니다. 위의 코드로 코드펜에 찍으면 그냥 이렇게만 나오기 때문입니다.. (CSS로 background:.. JavaScript 2020. 11. 2. 뒤로가기 액션에 대한 피드백 최근 데스크탑 웹페이지 작업을 하면서 뒤로가기 버튼을 넣으면 조금 사용자가 편리하지 않을까 생각하고 고려하고, 심오하게 생각하고, 또 생각하고 하다가 넣게 되었습니다. 그런데 뒤로가기는 어떻게? href에다가 뭘 넣어야하지? 엄청 고민하고 있었습니다. href에 인라인 문구만 기입하면 끝나는 부분이어서 간단했지만, 이 과정을 습득하는데에도 또 폭풍 검색을 하고 말았습니다. 1. href에 그대로 코드 작성 뒤로가기 일단, 제가 처음에 열심히 찾아본 방법 중에 깔끔하고, 많은 어려움이 없이 이해가 바로 되었던 코드였습니다. "오호.. 히스토리 빽~ (history.back() ) 이방법으로 하면 끝이구나" 하고 말이죠! 이게 맞는지 아닌지 테스트 해봐야되니까, 일단 테스트! 오호! 성공적 이었습니다. 그럼.. JavaScript 2020. 10. 29. 이전 1 다음 💲 추천 글 반응형