Java 如何使用数组而不是值正确填充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中，这输出ok。。。它与城市列表以及每个城市的用户数量相呼应。 遇到的问题是“我的图表”脚本试图使用上述查询中的数据进行填充

   <!------ 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图表

---

另外，我已经阅读了有关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 ?>']);
  };

---

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

在绘制图表之前，使用console.logdata在console中打印数据。我认为这些数据只包含一个城市，如果从任何循环中调用drawMarkers，那么您需要保持var chart=new google.visualization.geographic artDocument.getElementById'italy'；在全球层面上，否则将只绘制最后一个城市。我确信有不止一个城市。对不起，我不确定我是否理解第二部分。。。我是否应该移动这个部分var chart=new google.visualization.geographartdocument.getElementById'italy'；图表。绘图数据，选项；在环路外？只有第一行。保留图表。按原样绘制代码。您不必每次都在循环中创建图表对象循环下应该保留哪些代码行？因为我已经测试了它，现在它不再显示图表了，所以它一定是一个错误。经过一些尝试，现在图表出现了错误：不兼容的数据表：错误：表包含的列比预期的多，预期为2列。现在，绘图标记应该在循环中。选项和rawData应该在循环开始前声明，数据和图表应该在循环结束后定义。请输入一些代码好吗？你怎么安排？很抱歉，我尝试了不同的安排，但没有结果很糟糕，我在rawData中犯了一个初始化错误。我现在已经编辑了我的代码。检查，它现在应该可以工作了。如果您仍然面临问题，我将发布一个示例

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