0

我正在尝试使用 ajax 加载数据以使用下面的代码填充我的地图数据属性。

window.addEventListener('load', (event)=>{
            
            //create map instance
            var map = am4core.create("mapschartdiv", am4maps.MapChart);

            //make the map use a definition
            map.geodata = am4geodata_worldLow;

            //Let's use a projection
            map.projection = new am4maps.projections.Miller();

            //Polygo series
            //var polygonSeries = new am4maps.MapPolygonSeries();
            var polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
            
            

            polygonSeries.include = [
                "DZ",
                "AO",
                "SH",
                "BJ",
                "BW",
                "BF",
                "BI",
                "CM",
                "CV",
                "CF",
                "TD",
                "KM",
                "CG",
                "CD",
                "DJ",
                "EG",
                "GQ",
                "ER",
                "SZ",
                "ET",
                "GA",
                "GM",
                "GH",
                "GN",
                "GW",
                "CI",
                "KE",
                "LS",
                "LR",
                "LY",
                "MG",
                "MW",
                "ML",
                "MR",
                "MU",
                "YT",
                "MA",
                "MZ",
                "NA",
                "NE",
                "NG",
                "ST",
                "RE",
                "RW",
                "ST",
                "SN",
                "SC",
                "SL",
                "SO",
                "ZA",
                "SS",
                "SH",
                "SD",
                "SZ",
                "TZ",
                "TG",
                "TN",
                "UG",
                "CD",
                "ZM",
                "TZ",
                "ZW"
            ];

            polygonSeries.useGeodata = true;
            
            let country_arr = [];

            for(let id = 1; id<=246; id++){
                $.ajax({
                    type: "GET",
                    url: "https://url_of_data/data="+id,
                    success: function(res){
                        res = JSON.parse(res);
                        
                        country_arr.push({
                            id: res.id,
                            name: res.name,
                            value: res.value,
                            fill: am4core.color("#F05C5C")
                        });


                    }

                });
            }

            polygonSeries.data = country_arr;
            

            var polygonTemplate = polygonSeries.mapPolygons.template;
            polygonTemplate.tooltipText = "{name}: {value}";
            polygonTemplate.fill = am4core.color("#74B266");

            // Create hover state and set alternative fill color
            var hs = polygonTemplate.states.create("hover");
            hs.properties.fill = am4core.color("#367B25");


        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<div id="mapschartdiv"></div>
当我 console.log(polygonSeries.useGeodata) 我得到以下 [![enter image description here][1]][1]

country_arr 数据也在此数据属性中，但它被添加到数组中，如下所示：[![enter image description here][2]][2]

我怎么了？

这是我第一次使用这个库。[1]：https ://i.stack.imgur.com/hyTxi.png [2]：https ://i.stack.imgur.com/7Y1FY.png

4

0 回答 0