使用国家名称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在一个区域设置的所有属性。