从json url制作Ammap

时间:2018-03-16 12:26:41

标签: javascript json localhost amcharts ammap

我尝试用气球文本制作土耳其地图。控制台没有给出错误,但是没有绘制图表。我想我应该首先计算土耳其国家的省份。我为此创建了一个名为number的变量。我的规则来自变量json文件为“nufusakayıtılil”名称。怎么了?如何修复我的代码?甲

这是我的剧本:

  var data = jQuery.getJSON("http://localhost:8080/personel", function(geo) {
  
    var ilVeSayilar = {}
    var personelilVeSayilar = [];
    $.each(data, function(index, item) {
  
      var il = null;
      if (item.nufusakayitliolduguil != null && item.nufusakayitliolduguil.length > 2) {
        il = item.nufusakayitliolduguil;
  
        if (ilVeSayilar[il] == null) {
          ilVeSayilar[il] = 0;
        }
        ilVeSayilar[il]++;
      }
    });
    //console.log(ilVeSayılar);
    $.each(ilVeSayilar, function(index, item) {
      newitem = {}
      newitem["id"] = index;
      newitem["value"] = item;
      personelilVeSayilar.push(newitem)
    })
    var defaultMap = "turkeyLow";
    var countryMaps = {
      "TR-01": ["ADANA"],
      "TR-02": ["ADIYAMAN"],
      "TR-03": ["AFYONKARAHİSAR"],
      "TR-04": ["AĞRI"],
      "TR-68": ["AKSARAY"],
      "TR-05": ["AMASYA"],
      "TR-06": ["ANKARA"],
      "TR-07": ["ANTALYA"],
      "TR-75": ["ARDAHAN"],
      "TR-08": ["ARTVİN"],
      "TR-09": ["AYDIN"],
      "TR-10": ["BALIKESİR"],
      "TR-74": ["BARTIN"],
      "TR-72": ["BATMAN"],
      "TR-69": ["BAYBURT"],
      "TR-11": ["BİLECİK"],
      "TR-12": ["BİNGÖL"],
      "TR-13": ["BİTLİS"],
      "TR-14": ["BOLU"],
      "TR-15": ["BURDUR"],
      "TR-16": ["BURSA"],
      "TR-17": ["ÇANAKKALE"],
      "TR-18": ["ÇANKIRI"],
      "TR-19": ["ÇORUM"],
      "TR-20": ["DENİZLİ"],
      "TR-21": ["DİYARBAKIR"],
      "TR-81": ["DÜZCE"],
      "TR-22": ["EDİRNE"],
      "TR-23": ["ELAZIĞ"],
      "TR-24": ["ERZİNCAN"],
      "TR-25": ["ERZURUM"],
      "TR-26": ["ESKİŞEHİR"],
      "TR-27": ["GAZİANTEP"],
      "TR-28": ["GİRESUN"],
      "TR-29": ["Gümüşhane"],
      "TR-31": ["HATAY"],
      "TR-33": ["MERSİN"],
      "TR-76": ["IĞDIR"],
      "TR-32": ["ISPARTA"],
      "TR-34": ["İSTANBUL"],
      "TR-35": ["İZMİR"],
      "TR-46": ["KAHRAMANMARAŞ"],
      "TR-78": ["KARABÜK"],
      "TR-70": ["KARAMAN"],
      "TR-36": ["KARS"],
      "TR-37": ["KASTAMONU"],
      "TR-38": ["KAYSERİ"],
      "TR-79": ["KİLİS"],
      "TR-71": ["KIRIKKALE"],
      "TR-39": ["KIRKLARELİ"],
      "TR-40": ["KIRŞEHİR"],
      "TR-41": ["KOCAELİ"],
      "TR-42": ["KONYA"],
      "TR-43": ["KÜTAHYA"],
      "TR-44": ["MALATYA"],
      "TR-45": ["MANİSA"],
      "TR-47": ["MARDİN"],
      "TR-48": ["MUĞLA"],
      "TR-49": ["MUŞ"],
      "TR-50": ["NEVŞEHİR"],
      "TR-51": ["NİĞDE"],
      "TR-52": ["ORDU"],
      "TR-80": ["OSMANİYE"],
      "TR-53": ["RİZE"],
      "TR-54": ["SAKARYA"],
      "TR-55": ["SAMSUN"],
      "TR-63": ["ŞANLIURFA"],
      "TR-56": ["SİİRT"],
      "TR-57": ["SİNOP"],
      "TR-73": ["ŞIRNAK"],
      "TR-58": ["SİVAS"],
      "TR-59": ["TEKİRDAĞ"],
      "TR-60": ["TOKAT"],
      "TR-61": ["TRABZON"],
      "TR-62": ["TUNCELİ"],
      "TR-64": ["UŞAK"],
      "TR-65": ["VAN"],
      "TR-77": ["YALOVA"],
      "TR-66": ["YOZGAT"],
      "TR-67": ["ZONGULDAK"],
    };
    // calculate which map to be used
    var currentMap = defaultMap;
    var titles = [];
    if (countryMaps[geo.country_code] !== undefined) {
      currentMap = countryMaps[geo.country_code][0];
  
      // add country title
      if (geo.country_name) {
        titles.push({
          "text": geo.country_name
        });
      }
    }
    var map = AmCharts.makeChart("chartdiv", {
      "type": "map",
      "theme": "light",
      "colorSteps": 10,
      "dataProvider": {
        "mapURL": "/lib/3/maps/js" + currentMap + ".js",
        "getAreasFromMap": true,
        "zoomLevel": 0.9,
        "areas": []
      },
      "areasSettings": {
        "autoZoom": true,
        "balloonText": "[[title]]: <strong>[[value]]</strong>"
      },
      "valueLegend": {
        "right": 10,
        "minValue": "Az",
        "maxValue": "Çok!"
      },
      "zoomControl": {
        "minZoomLevel": 0.9
      },
      "titles": titles,
      "listeners": [{
        "event": "init",
        "method": updateHeatmap
      }]
    });
  
    function updateHeatmap(event) {
      var map = event.chart;
      if (map.dataGenerated)
        return;
      if (map.dataProvider.areas.length === 0) {
        setTimeout(updateHeatmap, 100);
        return;
      }
      for (var i = 0; i < map.dataProvider.areas.length; i++) {
        map.dataProvider.areas[i].value = Math.round(Math.random() * 10000);
      }
      map.dataGenerated = true;
      map.validateNow();
    }
  });
<title>map created with amCharts | amCharts</title>

    <script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
    <link rel="stylesheet" href="http://www.ammap.com/lib/3/ammap.css" type="text/css">
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/turkeyLow.js"></script>
     <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
    <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <link rel="shortcut icon" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
<div style="margin: 0;background-color: rgba(80,80,80,1);">
    <div id="map" style="width: 100%; height: 662px;"></div>    

0 个答案:

没有答案