Google Geochart - 来自JSON数据的同一国家/地区多个值

Posted 2021-05-05

我试图从我的数据库（通过JSON）发送的数据中显示Google Geochart中每个国家/地区的所有值，但只显示最后一行（下面突出显示的情况下为“供应商2”）。我已经审查了this answer并试图纳入建议的group() method;但是这会产生一个我无法成功调试的控制台错误：'unexpected token}'，它指的是var groupData声明中的结束花括号。

这是当前显示的内容，不使用任何group（）方法。我还需要'供应商1'来展示。

这是代码：

function incAvailableCountry() {
$.ajax({
    url: "inc-analysis/country-available.php,
    dataType: "json"
}).done(function(jsonData){
    var data = new google.visualization.DataTable(jsonData);
    var groupData = google.visualization.data.group(
        data,
        [0, 1],
        [{
            aggregation: google.visualization.data.count,
            column, 0
        }]);
    var options = {
        width: 'auto',
        keepAspectRatio: true,
        legend: 'none'
    };

    for (var i = 0; i < data.getNumberOfRows(); i++) {
        var locationRows = groupData.getFilteredRows([{
            column: 0,
            value: data.getValue(i, 0)
        }]);
        var nameTooltip = '';
        locationRows.forEach(function(index){
            if (nameTooltip !== '') {
                nameTooltip += ', ';
            }
            nameTooltip += groupData.getValue(index, 1);
        });
        data.setValue(i, 1, nameTooltip);
    }

    var chart = new google.visualization.GeoChart(document.getElementById('incAvailableCountry'));
    chart.draw(data, options);
});}

PHP：

<?php include '../core/init.php';

$query = mysqli_query($conn, "(SELECT Country, Supplier
    FROM table 
    GROUP BY Supplier)
    ORDER BY Country");

$table = array();
$table['cols'] = array(
    array('label' => 'Country', 'type' => 'string'),
    array('label' => 'Supplier', 'type' => 'string')
);

$rows = array();
while ($r1 = mysqli_fetch_assoc($query)) {
    $temp = array();
    $temp[] = array('v' => (string)$r1['Country']);
    $temp[] = array('v' => (string)$r1['Supplier']);
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;

结果JSON：

{"cols":[
{"label":"Country","type":"string"},
{"label":"Supplier","type":"string"}],"rows":[
{"c":[{"v":"Spain"},
{"v":"Supplier 1"}]},
{"c":[{"v":"Spain"},
{"v":"Supplier 2"}]}]}

html：

<script src="https://www.google.com/jsapi"></script>
<script>google.charts.load('current', {'packages': ['geochart'], 'mapsApiKey': 'key...'});</script>
<div id="incAvailableCountry"></div>

答案

在组方法中，column后面应该是一个冒号:，而不是逗号,

var groupData = google.visualization.data.group(
    data,
    [0, 1],
    [{
        aggregation: google.visualization.data.count,
        column, 0
    }]);

改成...

var groupData = google.visualization.data.group(
  data,
  [0, 1],
  [{
    aggregation: google.visualization.data.count,
    column: 0,
    type: 'number'
  }]
);