시각화

시각화

[ApexCharts] 별도 버튼으로 차트 이미지 다운로드 하기

ApexCharts에 기본적으로 차트 이미지 다운로드 버튼이 있는데 별도 버튼으로 분리하려고 한다. ApexChart 설치하기공식 홈페이지 : https://apexcharts.com/docs/installation/ Installation & Getting Started – ApexCharts.jsIntegrating ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready to be used. Check out all the options of ApexChartswww.apexcharts.com apexcharts와 react-apexcharts를 설치해준다.npm install apexcharts reac..

시각화

[HTML] html 문서 안에   는 무엇인가? - 특수문자

OpenLayers → Examples → Select Features의 예제 소스를 보다가 라는 처음보는 문구를 발견하게 되었다. https://openlayers.org/en/latest/examples/select-features.html Select Features Example of using the Select interaction. Choose between Single-click, Click, Hover and Alt+Click as the event type for selection in the combobox below. When using Single-click or Click you can hold the Shift key to toggle the feature in the sele..

시각화

[deck.gl] 우리나라 지도 만들기 (Arc Layer)

Preview 데이터 준비하기 deck.gl의 Arc Layer Example을 우리나라 버전으로 변경하려고 한다. https://deck.gl/examples/arc-layer 1. 우리나라 SHP 파일 다운로드 http://www.gisdeveloper.co.kr/?p=2332 2. 좌표계 변경 (WSG 84 - EPSG:4326) https://norwegian-forest-cat.tistory.com/213 3. QGIS로 중심점 추출 - 도시별로 Arc를 연결하기 위해 중심점이 필요하다. 참고 : https://norwegian-forest-cat.tistory.com/215 code File Tree src ├── korea │ ├── assets │ │ └── arrow.svg │ ├── m..

시각화

[Echarts] SVG 게이지 그래프 만들기

Echarts의 Example 중 Water Content의 SVG를 변경하여 그래프를 만드려고 한다. https://echarts.apache.org/examples/en/editor.html?c=pictorialBar-body-fill Examples - Apache ECharts echarts.apache.org 처음에는 svg 파일을 import하여 적용해보려 했으나 실패했고, 공식문서를 참조하여 svg 파일의 d= 부분부터 복사하여 배열에 추가했다. Echarts 공식문서 참조: https://echarts.apache.org/handbook/en/how-to/chart-types/scatter/basic-scatter/#symbol-style 완성 화면 완성 코드 Echarts를 React에서..