如何使用数组而不是值正确填充 Google 图表（地图）

Question

我想填充此 google 地图 - 使用数据库中的城市和每个城市的用户数绘制图表。

为此，我使用了以下代码：

   <?      
    $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 ?>

使用此代码，地图仅输出数组中的一个城市... 我知道我在代码中遗漏了一些东西，所以请帮忙...... 我的问题是如何使用我查询的数组正确填充 google 图表？

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

Answer 1

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

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 图表（地图）

How to properly populate the Google Chart (Map) with arrays instead of values

javascript

php

java

arrays

google-maps