BOOKS/수월한 자바스크립트5 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. 개발 초보자를 위한 상위 Top10 구하기 안녕하세요 IT여행자입니다. 이번 내용은 입문 과정을 끝낸 개발 초보자분들이 배운 과정을 어떻게 응용하여 프로그램을 만들어 볼까 고민될 때 한번 만들어 볼 수 있는 프로그램을 준비해 봤습니다. 프로그램은 단순히 HTML, CSS, JAVASCRIPT만을 사용하였습니다. 개발을 잘하고 싶다면 직접 많이 만들어 봐야 한다는 것은 잘 알고 계실 거라 생각됩니다. 그리 복잡한 내용은 없으므로 차근차근 따라 만들어 보시길 바랍니다. 그럼 시작하겠습니다. 실행 결과 화면 입력 숫자의 범위는 제한이 없지만 표시되는 영역이 작으므로 -999~999까지 입력합니다. 처음 10개까지는 입력 순서대로 위쪽 영역에 표시되었다가 10개가 넘으면 입력 수들 중 상위 10개까지만 표시될 것입니다. 준비 파일 아래와 같이 3개의 파.. 2023. 2. 24. 초보 개발자를 위한 스무 고개 게임 만들기 안녕하세요 IT여행자입니다. 입문자 딱지를 떼도 어떤 프로그램을 어떻게 만들지 잘 떠오르지 않는 때가 바로 초보 개발자 시절이라고 생각합니다. 뭔가를 배우기는 했는데 내가 배운 것으로 무엇을 할 수 있을지도 잘 모르는 때이기도 하고요. 이런 분들을 위해 HTML, CSS, Javascript만으로 스무고개란 간단한 게임을 만들어 보도록 하겠습니다. 동여상도 첨부 되어 있으니 참고해 주시길 바랍니다. 간단히 개발 환경을 말씀드리자면 앞서서 말씀드린것과 같이 html, css, javascript만을 사용하였습니다. 또한 개발 툴은 어떤 툴을 사용하든지 상관없습니다. 저는 이클립스를 사용하여 제작해 보도록 하겠습니다. 가장 먼저 프로젝트를 '스무고개게임' 이라고 만들도록 하겠습니다. 이클립스 환경에 따라 다.. 2023. 2. 20. 이전 1 다음 반응형
