如何用数组而不是值正确填充谷歌图表(地图）

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

本文关键字：谷歌 填充 地图 数组 何用      更新时间：2023-09-26

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

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

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

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

附言。我已经阅读了有关stackoverflow的相关问题，但是它们对这种情况没有帮助。

这是因为

您的图表对象每次在循环中都是全新的。您可以将以下代码移出循环，如下所示

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);

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

相关文章：