Panning and Zooming 초기값 homeGeoPoint: 처음 위치 homeZoomLevel: 처음 줌 레벨 var chart = root.container.children.push( am5map.MapChart.new(root, { // 유럽이 중심인 세계지도 homeZoomLevel: 3.5, homeGeoPoint: { longitude: 10, latitude: 52 } }) ); // PolygonSeries가 하나라도 만들어져야 줌 가능 polygonSeries.events.on("datavalidated", function() { chart.goHome(); }); 리셋: chart.goHome(); 줌 버튼 추가 chart.set("zoomControl", am5map.ZoomC..

map chart 세계지도 불러오기! 불러올 지도는 클릭하면 해당 국가의 도시를 보여주는 지도다 country data root var root = am5.Root.new("chartdiv"); var colors = am5.ColorSet.new(root, {}); root.setThemes([ am5themes_Animated.new(root) ]); chart var chart = root.container.children.push( am5map.MapChart.new(root, { panX: "rotateX", projection: am5map.geoMercator() }) ) chart.set("zoomControl", am5map.ZoomControl.new(root, {})); chart.c..

세계지도를 활용한 프로젝트를 만들기 위해서 amCharts5를 사용했다. https://www.amcharts.com/docs/v5/getting-started/ install npm install @amcharts/amcharts5 import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; cdn root element 차트를 만들 때 가장 중요한 오브젝트 wrapper같은 느낌 var root = am5.Root.new("chartdiv"); Root 인스턴스가 new()가 아니라(class' static method) new [ClassName]을 사용했다 amCharts5는 모두 이 ..