使用國家名稱amcharts爲特定國家上色

Question

我有地圖amchart，我想在這個特定的國家着色像這樣。 enter image description here

我試過這段代碼，但是這是創建圈子。它是如何實現的？

AmCharts.makeChart("mapdiv", 
        { 
         "type": "map", 
         "dataProvider": { 
         "map": "worldLow", 
         "images": [ { 
          "latitude": <?php echo $lat;?>, 
          "longitude": <?php echo $long;?>, 
          "type": "circle", 
          "width": 25, 
          "height": 25, 
          "color": "#926681", 
          "title": "<?php echo $selectedctry;?>", 
         } ] 
         }, 
         "areasSettings": { 
         "autoZoom": true, 
         }, 

         "areasSettings": { 
         "unlistedAreasColor": "#000", 
         "alpha": 0.5 
         }, 
         "disableDoubleClickZoom": true, 
         "zoomControl": { 
          "zoomControlEnabled": true 
          //"zoomOnDoubleClick": false 
         } 
        } 
); 

任何建議如何實現。

Answer 1

images數組中的圖像只是將圖像放在地圖上的所需經度和緯度座標處。如果要爲某個國家着色，則必須通過引用國家/地區代碼（它的ISO-3166兩個字符的國家代碼（例如，阿根廷是AR，巴西是BR等））來在areas陣列中指定它dataProvider， ：

"dataProvider": { 
    "map": "worldLow", 
    "areas": [{ 
     "id": "AR", 
     "color": "#ccdd00" 
    },{ 
     "id": "BR", 
     "color": "#aaff00" 
    }, 
    // repeat for each country 
    ] 
    } 

演示：

var map = AmCharts.makeChart("chartdiv", { 
 
    "type": "map", 
 
    "theme": "light", 
 
    "dataProvider": { 
 
    "map": "worldLow", 
 
    "areas": [{ 
 
     "id": "AR", 
 
     "color": "#ccdd00" 
 
    },{ 
 
     "id": "BR", 
 
     "color": "#aaff00" 
 
    }, 
 
    // repeat for each country 
 
    ] 
 
    }, 
 
    "areasSettings": { 
 
    "autoZoom": true, 
 
    "selectedColor": "#CC0000" 
 
    } 
 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 400px; 
 
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv"></div>

你可以找到你可以爲區域陣列here在一個區域設置的所有屬性。