Question

我正在尝试使用Geo Map构建一个页面，该页面从ajax获取来自php的数据。 php返回一个像这样的json：

(pt: 500, gb: 763, it: 565, de: 539, fr: 424)

我想知道如何构建动态数据表来读取我在Javascript端已经拥有的数组，而不是自己编写：

["pt" , 500],
["gb" , 763],
["it" , 565],
["de" , 539],
["fr" , 424]

我希望有一个像http://jsfiddle.net/R6Sh8/这样的方法，但是用它来构建数据来提供地图。

亲切的问候

Answer 1

假设您的PHP创建了一个有效的JSON：

{"pt": 500, "gb": 763, "it": 565, "de": 539, "fr": 424}

...你必须迭代对象的属性（JSON），并使用property-name的大写和property-value作为column-values为每个属性创建一行：

google.load("visualization", "1", {packages:["geochart"]});
      google.setOnLoadCallback(drawMap);

      function drawMap() {

        var data  = //json returned from php
                    {"pt": 500, "gb": 763, "it": 565, "de": 539, "fr": 424},
                    //create datatable
            dt    = new google.visualization.DataTable();
        //add columns
        dt.addColumn('string', 'Country');
        dt.addColumn('number', 'amount');
        //add rows
        for(var k in data){
          dt.addRow([k.toUpperCase(),data[k]]);
        }
        var chart = new google.visualization.GeoChart(document.getElementById('geo'));

        chart.draw(dt,{region:150});
      }

html,body,#geo{margin:0;padding:0;height:100%}
#geo{height:90%}

<div id="geo"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

动态Google地理地图数据

1 个答案: