Question

我想填充这张谷歌地图 - 包含数据库中城市的图表，以及每个城市的用户数量。

为了做到这一点，我使用了以下代码：

   <?      
    $query_city_users = "SELECT DISTINCT(city) FROM users 
                      WHERE approved = 1";
    $city_users = mysql_query($query_city_users, $con) or die(mysql_error());


       while ($row_city_users = mysql_fetch_assoc($city_users)) { 

            $query_users_from_city = "SELECT * FROM users 
                                     WHERE approved = 1 
                                     AND city= '".$row_city_users['city']."'";
            $users_from_city = mysql_query($query_users_from_city, $con) or die(mysql_error());
            $totalRows_users_from_city = mysql_num_rows($users_from_city); 
  ?>


               <?=$row_city_users['city'] ?> -
               <?=$totalRows_users_from_city ?> <br>

在PHP中输出正常...它回显了城市列表以及每个城市中有多少用户。遇到的问题是在我的图表脚本中尝试填充上述查询中的数据。

   <!------ MAP CHARTS------->
   <script type='text/javascript' src='https://www.google.com/jsapi'></script>
   <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geochart']});
   google.setOnLoadCallback(drawMarkersMap);

  function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['City',   'Users Number'],
    ['<?=$row_city_users['city'] ?>',  '<?=$totalRows_users_from_city ?>']

  ]);

  var options = {
    region: 'IT',
    displayMode: 'markers',
    colorAxis: {colors: ['lightblue', 'blue'],
    backgroundColor: 'blue',
    keepAspectRatio: 'true',


    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('italy'));
  chart.draw(data, options);
};
</script> 

 <?  } // end while ?>

使用此代码，地图仅从阵列中输出一个城市...... 我知道我错过了代码中的内容，所以请帮助... 我的问题是如何使用我查询的数组正确填充谷歌图表？

PS。我已经阅读了有关stackoverflow的相关问题，但他们并没有帮助我解决这个问题。

Answer 1

这是因为您的图表对象在循环中每次都是新创建的。您可以将以下代码移出循环

var rawData = [['City',   'Users Number']];
    var options = {
    region: 'IT',
    displayMode: 'markers',
    colorAxis: {colors: ['lightblue', 'blue'],
    backgroundColor: 'blue',
    keepAspectRatio: 'true',
    }

然后用

替换你的drawMarkersMap函数

function drawMarkersMap() {
    rawData.push(['<?=$row_city_users['city'] ?>',  '<?=$totalRows_users_from_city ?>']);
  };

然后在循环外再次使用

var data = google.visualization.arrayToDataTable(rawData);
var chart = new google.visualization.GeoChart(document.getElementById('italy'));
chart.draw(data, options);

维护代码的顺序。您可能需要修复一些小错误，因为我没有要测试的数据

如何使用数组而不是值正确填充Google Chart（Map）

1 个答案: