Question

我正在尝试使用jquery ajax使用amCharts创建地图，但它不适用于ajax。

这里是我的ajax代码：

$('button#btn').click(function(){
        $('div#ozellikli').html('<center><img src="assets/img/loading.gif" width="200" height="200"/></center>')
        $.ajax({
            type:'post',
            url:'ozellikliAjax.php',
            data:$('form#oz').serialize(),
            success:function(msg){
                $('div#ozellikli').html(msg); 
            }
        });
   });

这是我的ajax php代码：

  <?php

    include 'config.php';

    $html="";

    $yil=$_POST['yil'];
    $tur=$_POST['tur'];

    ///HARITAYI CIZ
    $sql="SELECT id,il,COUNT(kurum) AS kurum_Say FROM ozellikli  GROUP BY id,il ORDER BY kurum_Say";


    $result=$baglanti->query($sql);
    $mapChart="";

    while ($query=$result->fetch(PDO::FETCH_ASSOC)) {
    $mapChart.=' { title: "'.$query['il'].':'.$query['kurum_Say'].'", id: "TR'.$query['id'].'",value:'.$query['kurum_Say'].', selectable: true },';
    }



    $html.='<script type="text/javascript">
AmCharts.ready(function() {

  var map;
         // *** CREATE MAP ***********************************************************
  function createMap(){  
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    var dataProvider = {
        mapVar: AmCharts.maps.turkeyLow
    };

    map.areasSettings = {
        unlistedAreasColor: "#43B1A9",
        rollOverOutlineColor: "#FFFFFF" 
            };

    map.colorSteps=5;

    map.valueLegend={
        left: 10,
        bottom:0,
        minValue: "En Az",
        maxValue: "En Çok"
    };      

    dataProvider.areas = ['.$mapChart.'];

    map.dataProvider = dataProvider;

   map.addListener(\'clickMapObject\', function (event) {
        // deselect the area by assigning all of the dataProvider as selected object
        map.selectedObject = map.dataProvider;

        // toggle showAsSelected
        event.mapObject.showAsSelected = !event.mapObject.showAsSelected;

        // bring it to an appropriate color 
        map.returnInitialColor(event.mapObject);


        var states = [];
        for (var i in map.dataProvider.areas) {
            var area = map.dataProvider.areas[i];
            if (area.showAsSelected) {
                states.push(area.title);
            }
        }        
    });


    map.write("mapdiv");

   }

   createMap(); 
});
</script>';


echo $html;
    ?>

运行ajax代码时，脚本正确加载ajax但是没有图表来映射。

我该如何解决这个问题？

感谢

Answer 1

如果以相同的方式注入资源，则需要手动设置它的就绪状态，否则它将无法正常工作。 AmCharts监听dom加载事件以设置以下属性：

AmCharts.isReady = true;

amCharts js无法使用ajax调用吗？

1 个答案: