使用国家名称使用 amcharts 为特定国家着色答案

【问题标题】：To colored the particular country using amcharts using country name使用国家名称使用 amcharts 为特定国家着色
【发布时间】：2016-11-30 07:26:07
【问题描述】：

我有地图 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
                       }
                     }
 );

任何建议如何实现。

【问题讨论】：

标签： javascript maps amcharts

【解决方案1】：

images 数组中的图像只是将图像放置在地图上所需的纬度和经度坐标处。如果你想为一个国家着色，你必须在dataProvider中的areas数组中指定它，通过引用国家的id，这是它的ISO-3166两个字符的国家代码（例如，阿根廷是AR，巴西是BR 等）：

  "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 中找到可以为区域设置的所有属性。

【讨论】：