使amcharts地图响应不起作用

如何解决使amcharts地图响应不起作用

我有amcharts图书馆的地图，例如，我对此有回应：

如您所见，地图未覆盖容器的全宽，如何使其全宽？

我的另一个问题是，当我调整窗口大小时，在地图的顶部和底部会出现一些空白，如下所示：

我想在较小的窗口中删除该空格，我该怎么做？

    
    /* Chart code */
            am4core.useTheme(am4themes_animated);
            // Create map instance
            let chart = am4core.create("chartdiv",am4maps.MapChart);
            chart.logo.height = -15;
            chart.width = am4core.percent(100);
            chart.height = am4core.percent(100);
            chart.seriesContainer.draggable = false;
            chart.seriesContainer.resizable = false;
            chart.maxZoomLevel = 1;
            chart.responsive.enabled = true;
            // Set map deFinition
            chart.geodata = am4geodata_worldLow;
            // Set projection
            chart.projection = new am4maps.projections.Projection();
            // Create map polygon series
            let polygonSeries = chart.series.push(new am4maps.MappolygonSeries());
            // Exclude Antartica
            polygonSeries.exclude = ["AQ"];
            // Make map load polygon (like country names) data from GeoJSON
            polygonSeries.useGeodata = true;
            // Configure series
            let polygonTemplate = polygonSeries.mappolygons.template;
            polygonTemplate.tooltipText = "{name}";
            polygonTemplate.polygon.fillOpacity = 0.8;
            // take a color from color set
            polygonTemplate.adapter.add("fill",function(fill,target) {
                return colorSet.getIndex(target.dataItem.index + 1).saturate(0.2);
            });
            // Create hover state and set alternative fill color
            var slider = chart.chartContainer.createChild(am4core.Slider);
            slider.start = 0.5;
            slider.margin(0,20,0);
            slider.valign = "bottom";
            slider.align = "center";
            slider.width = 500;
            slider.events.on("rangechanged",()=>{
                chart.deltaLongitude = slider.start * 360 - 180;
            });
            // Add image series
            let imageSeries = chart.series.push(new am4maps.MapImageSeries());
            imageSeries.mapImages.template.propertyFields.longitude = "longitude";
            imageSeries.mapImages.template.propertyFields.latitude = "latitude";
            imageSeries.mapImages.template.tooltipText = "{title}";
            imageSeries.mapImages.template.propertyFields.url = "url";

            let circle = imageSeries.mapImages.template.createChild(am4core.Circle);
            circle.radius = 3;
            circle.propertyFields.fill = "color";

            let circle2 = imageSeries.mapImages.template.createChild(am4core.Circle);
            circle2.radius = 3;
            circle2.propertyFields.fill = "color";

            circle2.events.on("inited",function(event){
                animateBullet(event.target);
            });

            function animateBullet(circle) {
                let animation = circle.animate([{ property: "scale",from: 1,to: 5 },{ property: "opacity",to: 0 }],1000,am4core.ease.circleOut);
                animation.events.on("animationended",function(event){
                    animateBullet(event.target.object);
                })
            }

            let colorSet = new am4core.ColorSet();

            imageSeries.data = [ {
                "title": "Brussels","latitude": 50.8371,"longitude": 4.3676,"color":colorSet.next()
            },{
                "title": "copenhagen","latitude": 55.6763,"longitude": 12.5681,{
                "title": "Paris","latitude": 48.8567,"longitude": 2.3510,{
                "title": "Reykjavik","latitude": 64.1353,"longitude": -21.8952,{
                "title": "Moscow","latitude": 55.7558,"longitude": 37.6176,{
                "title": "Madrid","latitude": 40.4167,"longitude": -3.7033,{
                "title": "London","latitude": 51.5002,"longitude": -0.1262,"url": "http://www.google.co.uk",{
                "title": "Peking","latitude": 39.9056,"longitude": 116.3958,{
                "title": "New Delhi","latitude": 28.6353,"longitude": 77.2250,{
                "title": "Tokyo","latitude": 35.6785,"longitude": 139.6823,"url": "http://www.google.co.jp",{
                "title": "Ankara","latitude": 39.9439,"longitude": 32.8560,{
                "title": "Buenos Aires","latitude": -34.6118,"longitude": -58.4173,{
                "title": "Brasilia","latitude": -15.7801,"longitude": -47.9292,{
                "title": "ottawa","latitude": 45.4235,"longitude": -75.6979,{
                "title": "Washington","latitude": 38.8921,"longitude": -77.0241,{
                "title": "Kinshasa","latitude": -4.3369,"longitude": 15.3271,{
                "title": "Cairo","latitude": 30.0571,"longitude": 31.2272,{
                "title": "Pretoria","latitude": -25.7463,"longitude": 28.1876,"color":colorSet.next()
            } ];

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv"></div>