javascript - 谷歌图表和 jquery POST

Question

我正在尝试使用从 jquery POST 方法返回的数据填充 Google 地理图表，但它没有创建图表。我的代码如下所示:

HTML:

<div id="geomap" style="width: 500px; height: 500px; position: relative;"></div>

JavaScript:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
    google.load('visualization', '1', {'packages': ['geochart']});  
    $.post('functions/functions.php', {f: 'getreferralstats'}, function(data) {     
        if (data.success) {
            console.log(data.countries);
            google.setOnLoadCallback(drawRegionsMap);
            function drawRegionsMap() {
                var chartData = google.visualization.arrayToDataTable([
                    ['Country', 'Hits'],
                    data.countries
                ]); 
                var options = {};   
                var chart = new google.visualization.GeoChart(document.getElementById('geomap'));
                chart.draw(chartData, options);
            };
        }           
    }, "json"); 
</script>

我的国家/地区 JSON 对象的输出如下所示:

Object {MX: "164305", AR: "120045", CO: "56741", CL: "48449", VE: "26777"…}

知道我在这里遗漏了什么。图表永远不会呈现。

Answer 1

您可能遇到了时间问题。如果您的 AJAX 调用在 google.load 调用完成后返回，则 google.setOnLoadCallback 不执行任何操作。简单的解决方案是在加载 Visualization API 后启动 AJAX 调用:

google.load('visualization', '1', {'packages': ['geochart'], callback: drawRegionsMap});
function drawRegionsMap () {
    $.post('functions/functions.php', {f: 'getreferralstats'}, function(data) {
        if (data.success) {
            var chartData = google.visualization.arrayToDataTable([
                ['Country', 'Hits'],
                data.countries
            ]);

            var options = {};

            var chart = new google.visualization.GeoChart(document.getElementById('geomap'));
            chart.draw(chartData, options);
        }
    }, "json"); 
}

我怀疑您仍然会遇到问题，除非 data.countries 是一个包含两个元素的数组(一个国家和一个值，例如 ['Brazil', 5]) .如果 data.countries 是一个数组数组，那么你想改用它:

var chartData = google.visualization.arrayToDataTable([['Country', 'Hits']].concat(data.countries));