온도 예측 페이지 만들기(공공 API 활용,json)

open api 활용해서 json 형식의 데이터 받아와서 차트 만들기

 

json데이터 예시

- hourly 요소의 time 요소 값이 필요함

 

필요한 open_api 정보를 정의하고

필요한 데이터는 hourly.time임

datasets은 차트 부분을 가리키는 것들로 사용

pointHoverRadius 을 통해 마우스 호버링되면 원이 커지게 됨

 

chart 를 쓰게 되면, 데이터 포맷팅에 맞춰서 값들을 설정하면 됨

 myChart 라는 dom 에 차트를 그림(캔버스에)

new Chart로 

 

fetch 요청한 데이터를 가져와서,

draw를 통해 차트를 그림

 

 

window.onload

dom이 로그가 안될때를 대비하여, 

스타일시트 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 이벤트가 시작되게 함

 

활용한 chart.js 링크

https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website