자바스크립트 차트 2

[공공데이터 활용] HTML canvas태그: 시간별 기온 차트 만들기 #2

이번에는 차트에 색상을 적용해야 한다. 색상 적용 예제도 MDN에 잘 나와있다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#a_createlineargradient_example 스타일과 색 적용하기 - Web API | MDN 도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그 developer.mozilla.org 스타일을 적용할 곳은 총 세 가지이다. 1. 따뜻한 색 - 차가운 색으로 배경 입히기 2. 차트의 라인에 색상과 굵기 주기 3. 폰트..

토이프로젝트 2022.02.01

[공공데이터 활용] HTML canvas태그: 시간별 기온 차트 만들기 #1

공공데이터를 활용하여 기온 정보를 뿌려주는 서비스를 개발 중이다. 시간별 기온 정보를 뿌려주기 위해 차트가 필요했는데 라이브러리를 쓰려고 찾아보았는데 나는 아주 기본적인 기능만 필요한 상황이라 굳이 라이브러리를 설치해서 차트를 그릴 필요는 없을 것 같다는 생각이 들었다. 그래서 공부도 할 겸 차트를 직접 그리기로 결정했다. 다행히 MDN에 canvas를 친절히 설명해주는 문서가 있었다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes 캔버스(canvas)를 이용한 도형 그리기 - Web API | MDN 앞서 캔버스 환경 설정(canvas environment)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 ..

토이프로젝트 2022.01.31