자바스크립트7 chart.js를 사용한 데이터 시각화하기 #3/3 https://jobtc.tistory.com/146 (기본 차트) https://jobtc.tistory.com/147 (실시간 차트) https://jobtc.tistory.com/148 (서버 데이터 차트) 안녕하세요 IT여행자입니다. chart.js 라이브러리를 사용한 데이터 시각화의 마지막 단계인 서버로부터 실시간으로 데이터를 수신받아 그래프를 그려보는 과정입니다. 본 지면에서는 서버를 spring boot의 Restful API를 사용하여 데이터를 수신받았지만 실제로는 어떤 서버를 사용하던 상관이 없습니다. 단 수신된 데이터가 JSON구조이어야 합니다.또한 본 지면에서는 서버와 관련된 설정 부분이나 서버 전체 코드 부분은 생략합니다. 이점 양해해 주시기 바랍니다. 서버와의 데이터 송수신은 서버.. 2024. 12. 27. chart.js를 사용한 데이터 시각화하기 #2/3 https://jobtc.tistory.com/146 (기본 차트) https://jobtc.tistory.com/147 (실시간 차트) https://jobtc.tistory.com/148 (서버 데이터 차트) 안녕하세요 IT여행자입니다. 두 번째 시간으로 이번에는 로컬에서 실시간으로 변경되는 데이터를 사용하여 그래프를 동적으로 그려서, 보다 생동감 있는 데이터 시각화를 해 보도록 하겠습니다. 주요 요점은 아래의 2가지입니다.line 그래프에서 꺾인 부분을 부드럽게 표현하기실시간으로 데이터를 발생시켜 그래프에 적용하기1. line 그래프에서 꺾인 부분을 부드럽게 표현하기line 그래프에서 꺾인 부분을 부드럽게 표현하려면 tension 속성값을 지정하면 됩니다. tension은 곡률을 의미하는데, ten.. 2024. 12. 27. chart.js를 사용한 데이터 시각화하기 #1/3 https://jobtc.tistory.com/146 (기본 차트) https://jobtc.tistory.com/147 (실시간 차트) https://jobtc.tistory.com/148 (서버 데이터 차트) 데이터 차트) 안녕하세요. IT여행자입니다. 데이터를 시각화하는 방법에는 여러 가지 방법들이 있습니다. 사용하는 컴퓨터 언어나 서비스 환경에 따라 서로 다른 방법으로 데이터를 시각화합니다. 본 지면에서는 chart.js 라이브러리를 사용하는 방법을 사용해 보도록 하겠습니다. chart.js 라이브러리는 자바스크립트와 태그를 사용하여 데이터를 시각화할 수 있는 도구 중 하나로 널리 알려져 있습니다.chart.js 라이브러리를 사용한 데이터 시각화 과정은 아래의 몇 단계로 나누어 살펴보고자 합니.. 2024. 12. 26. 브라우저에서 새로 고침 할 때 현재값 유지하기 안녕하세요 IT여행자입니다. 웹 특성 중 하나가 브라우저를 새로 고침 하면 현재 값이 유지되지 않는다는 것입니다. 따라서 현재 값을 유지하거나 새로고침 현상 없이 현재 값을 다른 값으로 변경하기 위한 다양한 방법들이 존재합니다. 현재 값을 유지한다는 것이 웹 프로그램이 아닌 일반 컴퓨터 프로그램들에게서는 별거 아닌 문제이기는 합니다. 그냥 변수에 담아 필요한 시점이나 장소에 그냥 대입해 주면 당연히 화면에 출력되기 때문입니다. 그러나 서두에 말한 것처럼 웹은 정확히는 http 프로토콜 특성상 기본적으로 상태값 또는 현재값을 유지해 주는 기능이 없습니다. 대부분의 FRONT-END 프레임워크에서는 이런 상태값을 유지해 주는 기능을 지원하여 약간의 노력만 하면 대부분 해결할 수 있을 것입니다. 본 지면에서.. 2023. 9. 23. 초보 개발자를 위한 스무 고개 게임 만들기 안녕하세요 IT여행자입니다. 입문자 딱지를 떼도 어떤 프로그램을 어떻게 만들지 잘 떠오르지 않는 때가 바로 초보 개발자 시절이라고 생각합니다. 뭔가를 배우기는 했는데 내가 배운 것으로 무엇을 할 수 있을지도 잘 모르는 때이기도 하고요. 이런 분들을 위해 HTML, CSS, Javascript만으로 스무고개란 간단한 게임을 만들어 보도록 하겠습니다. 동여상도 첨부 되어 있으니 참고해 주시길 바랍니다. 간단히 개발 환경을 말씀드리자면 앞서서 말씀드린것과 같이 html, css, javascript만을 사용하였습니다. 또한 개발 툴은 어떤 툴을 사용하든지 상관없습니다. 저는 이클립스를 사용하여 제작해 보도록 하겠습니다. 가장 먼저 프로젝트를 '스무고개게임' 이라고 만들도록 하겠습니다. 이클립스 환경에 따라 다.. 2023. 2. 20. Chart.js를 사용한 차트 만들기 안녕하세요 IT여행자입니다. 이번 여행지는 Chart.js 라이브러리를 사용하여 차트 만들기 입니다. 차트를 만드는 라이브러리나 API는 그 종류가 굉장히 많이 있지만 Chart.js는 자바 스크립트를 사용하여 간단히 차트를 만들수 있는 라이브러리 입니다. 여행 방법은 아래와 같습니다. 1. CDN 형태로 라이브러리 가져오기 라이브러리를 다운로드 받아 프로젝트내에 포함시킬 수 도 있습니다. " target="_blank" rel="noopener">https://cdn.jsdelivr.net/npm/chart.js"> 2. 기본 골격 데이터를 생성하는 언어는 JSP를 사용하였지만 어떤 언어이든 상관없습니다. 데이터를 자바스크립트로 전달 할 수만 있으면 상관 없습니다. line type 1 특별한 이유는 .. 2023. 1. 16. 자바스크립트 함수 유형 안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다. 이번 IT 작은 구슬에서는 자바스크립트에서 사용되는 함수를 정의하는 다양한 방법들에 대해서 설펴 보고자 합니다. 선언적 함수함수 표현식익명함수(즉시실행함수)화살표 함수생성자를 통한 함수리터널 유형 함수 1. function 함수명( [매개변수] ) {... } 선언적 함수가장 보편적으로 많이 사용하고 있던 함수 선언 형식입니다. 함수가 hoisting 된다는 특징이 있습니다. 함수가 hoisting 된다는 의미는 선언되는 순서와 상관없이 스크립트 엔진은 가장 먼저 메모리 스택에 함수를 로딩하여 사용할 준비를 해 준다는 의미입니다. 즉, 코드의 순서가 "사용->선언"순으로 작성하든, "선언->사용" 순으로 작성하든 상관이 없다는 말입니다. 이러한.. 2020. 6. 3. 이전 1 다음 반응형
