지도차트 그리기 Apache Echarts 를 이용하여 여러가지 차트를 생성 할 수 있습니다. 이번에는 Echarts 를 이용하여 지도차트를 생성하는 방법을 정리해보았습니다. Apache Echarts 설치 및 정보는 다음 포스트 참고 [Echarts]_1.Apache ECharts 설치,사용준비 1. 지도 생성을 위한 JSON 파일 추출 우선 Echarts 의 examples 에서 제공하는 USA.json 을 사용해 보았습니다. json 파일만 있다면, 어디던지 지도차트 생성이 가능합니다. https://echarts.apache.org/examples/en/editor.html?c=map-usa F12 를 통해 개발자 도구에서 USA.json 을 찾습니다 마우스 우클릭 -> 새창열기 -> 다른이름으로..

Echart 설치 및 준비는 다음 포스트 참고 https://yn971106.tistory.com/119 이번에는 Echarts 의 series 의 type 속성과 상관없이 통상적으로 사용되는 옵션 몇가지를 공부해 보았습니다. 1.legend : 범례 구성 요소. 범례 구성 요소는 다른 시리즈의 기호, 색상 및 이름을 보여줍니다. 범례를 클릭하여 차트에 시리즈 표시를 토글할 수 있습니다. 기본 설정 방법 화면 data1 , data2 를 상단에 표시해 줍니다. 별도의 설정 없이 legend 박스 클릭시 해당 차트를 지워주는 기능을 가지고 있습니다. 또한 마우스 오버시 기본적으로 해당 차트의 데이터가 반짝거리는 효과가 있습니다. legendHoverLink: false 이는 series 에서 legendH..

프론트를 개발하면서 차트는 굉장히 많이 사용됩니다. 그 중 프로젝트를 진행하면서 사용한 Apache Echarts 를 간단하게 다뤄보겠습니다. 공식 사이트 : https://echarts.apache.org/en/index.html 다운로드 https://www.jsdelivr.com/package/npm/echarts 저희는 JS 의 script 로 사용할 것이기 때문에 echarts.min.js 가 필요합니다. 위 사이트에서 아래의 목록 클릭 그럼 다음과 같은 페이지에서 마우스 우클릭 -> 다른이름으로 저장 echart.min.js 파일을 얻었습니다. 이제 사용하기 위해서 프로젝트로 이동합니다. 적용 jsp 의 head 부분에 위와같은 스크립트 형식으로 적용합니다. 경로는 해당 min파일의 위치가 되..