html의 canvas는 그림을 그려주는 코드이다.
스크립트 안에 차트데이터를 넣어주고, 차트의 옵션, 캔버스의 요소 선택 그리고 차트의 객체를 생성하기 위한 코드를 작성하여 실행해본다.
< 실행화면 >
이번에는 맛집 데이터를 추출하여 차트로 만들어 볼 것이다.
이전에 만들어 놓은 맛집 js 파일을 가져온다.
※ 데이터를 가져오기 위해서는 받은 json 데이터위에 대괄호 앞에 const로 정의를 해줘야한다.
그리고 해당 html 파일에 중구.js 파일을 연결시켜 준다.
음식 카테고리만 추출하여 콘솔창에 출력시켜본다.
이번에는 카테고리 별로 누적을 시켜 볼 것이다.
먼저 item 별로 누적시켜 확인해본다.
카테고리 별로 누적시키기 위해 if문을 사용한다.
그리고 콘솔에다 keys와 values를 추출해본다.
그리고 앞에서 만들었단 차트들을 가져와 const drawChart = ()=>{} 에서 {}(대괄호) 안에 복사 붙여넣기 해준다.
색상도 2개 추가해주고 labels와 data의 이름들을 바꿔준다.
그러면 해당 값과 키들이 차트로 나타나는 것을 볼 수 있다.
만약 json파일의 해당 숫자들을 합치려면 sum을 사용해야하고 json파일의 개당 갯수를 구하려고하면 +1을 해주면 된다.
이렇게 지역별 범죄횟수를 합쳐서 범죄종류별로 구하고 싶을 때는 sum으로 해줘야한다.
변수 num을 만들어서 sum을 더해줌
하지만 맛집처럼 개별 가게 수로 나타나 있을 때는 +1씩 해주면 된다.
이미 있는 수들을 더해주는 것이 아니라 갯수를 카운트 하는 것이므로 sum이 필요가 없다.
'IT수업 > JAVASCRIPT' 카테고리의 다른 글
IT 수업 16주차 (87) JSP LIBRARY_QR code (0) | 2024.04.12 |
---|---|
IT 수업 16주차 (86) JSP LIBRARY_THREEJS (0) | 2024.04.12 |
IT 수업 16주차 (84) JSP LIBRARY_GSAP (0) | 2024.04.11 |
IT 수업 16주차 (83) JSP LIBRARY_SCROLLMAGIC (0) | 2024.04.09 |
IT 수업 16주차 (82) JSP LIBRARY_LODASH (0) | 2024.04.09 |