IT 수업 16주차 (85) JSP LIBRARY_CHART

 

 

 

 

 

html의 canvas는 그림을 그려주는 코드이다.

 

 

스크립트 안에 차트데이터를 넣어주고, 차트의 옵션, 캔버스의 요소 선택 그리고 차트의 객체를 생성하기 위한 코드를 작성하여 실행해본다.

 

< 실행화면 >

 

 

 

 

 

이번에는 맛집 데이터를 추출하여 차트로 만들어 볼 것이다.

 

 

 

이전에 만들어 놓은 맛집 js 파일을 가져온다.

 

 

※ 데이터를 가져오기 위해서는 받은 json 데이터위에 대괄호 앞에 const로 정의를 해줘야한다.

 

 

 

그리고 해당 html 파일에 중구.js 파일을 연결시켜 준다.

 

 

 

 

 

음식 카테고리만 추출하여 콘솔창에 출력시켜본다.

 

 

 

이번에는 카테고리 별로 누적을 시켜 볼 것이다.

 

먼저 item 별로 누적시켜 확인해본다.

 

 

 

 

 

카테고리 별로 누적시키기 위해 if문을 사용한다.

 

 

그리고 콘솔에다 keys와 values를 추출해본다.

 

 

그리고 앞에서 만들었단 차트들을 가져와 const drawChart = ()=>{} 에서 {}(대괄호) 안에 복사 붙여넣기 해준다.

색상도 2개 추가해주고 labels와 data의 이름들을 바꿔준다.

 

 

그러면 해당 값과 키들이 차트로 나타나는 것을 볼 수 있다.

 

 

 

 

 

 

만약 json파일의 해당 숫자들을 합치려면 sum을 사용해야하고 json파일의 개당 갯수를 구하려고하면 +1을 해주면 된다.

 

이렇게 지역별 범죄횟수를 합쳐서 범죄종류별로 구하고 싶을 때는 sum으로 해줘야한다.

범죄 json 파일

 

변수 num을 만들어서 sum을 더해줌

 

 

 

하지만 맛집처럼 개별 가게 수로 나타나 있을 때는 +1씩 해주면 된다.

맛집 json 파일

 

이미 있는 수들을 더해주는 것이 아니라 갯수를 카운트 하는 것이므로 sum이 필요가 없다.