2016-11-30 11 views
0

を使用してamchartsを使用して特定の国を色付けするには私は地図の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 
         } 
        } 
); 

どのように達成できるか。

答えて

0

imagesの画像は、希望の緯度と経度の座標で画像を地図上に配置します。国を色付けしたい場合は、dataProviderareas配列にその国のID(ISO-3166 2文字の国コード)を指定する必要があります(たとえば、アルゼンチンは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内の領域に対して設定できるすべてのプロパティを見つけることができます。

関連する問題