오늘은 chart.js를 활용해서 위와같은 디자인의 라인차트를 커스텀 하는 방법을 포스팅 하려고 한다. chart.js는 대표적인 차트용 라이브러리로, 굉장히 다양한 커스텀 방식을 지원한다.Line Chart의 공식문서에 의하면, 초기 셋팅은 다음과 같다.   나는 위 셋팅에서 꺾임은 좀 더 부드럽게, 가로선을 없애며, 각 데이터별 point부분도 생략할것이다.뿐만아니라 그래프 아래에 그라데이션을 만들고, 맨 위에 데이터명에 해당하는 범례는 다른디자인을 쓰기 위해 생략할것이다. 구현 당시 특히 그라데이션 부분을 어떻게 해야할지 고민이 많았다. 자료가 없었기 때문에 ㅜ_^ 같은 상황을 겪는 분들에게 팁을 주자면, 구글에 영어로 chart.js line chart 등의 키워드로 검색한 뒤, 이미지탭에서 내가..

은 주차장 입장시 최적의 자리를 배정해줌으로써 주차 스트레스를 줄여주는 AIoT 프로젝트다. 학부생시절 IoT프로젝트를 진행한적은 있지만, 대개 IoT 시스템만 맡거나, 웹만 맡거나 했으므로 전체적인 구조에 대한 고민은 부족했었다. 그렇다보니 특히 이 프로젝트에서 아키텍처 구조상의, 통신문제를 많이 마주쳤던것 같다. 가장 크게 고민했던 문제는 총 두가지였다.1. 키오스크 - 관리자화면 - IoT간의 실시간성을 어떻게 반영할것인가?2. 포트포워딩이 불가능한 시연환경에서, 로컬서버인 IoT서버와 배포서버인 AWS서버가 통신하게 할것인가?  1. 키오스크 - 관리자화면 - IoT간의 실시간성을 어떻게 반영할것인가? 주차장 시스템이다 보니, 관리자페이지 - 키오스크 - IoT시스템간의 실시간성이 매우 중요했다...