Question

我正在尝试通过使用jQuery调用PHP页面来自动创建图表（使用Google Charts API）。我正在为数据返回JSON，目前，我只是为选项返回一个字符串。

图表'数据'工作正常，但我无法自动传递'选项'。我的代码片段如下：

    var jsonData = $.ajax({
        url: "http://server.com/charts/dev/data.php",
        dataType:"json",
        async: false
    }).responseText;

    var optionData = $.ajax({
        url: "http://server.com/charts/dev/options.php",
        dataType:"text",
        async: false
    }).responseText;

    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, optionData);

如果我删除了试图获取'optionData'的jQuery，并且只是自己提供它，那么图表就会加载。否则，我得到'无法读取属性'0'的'null'出现错误（控制台上没有任何内容）。

PHP页面'options.php'看起来像这样（现在）：

<?php
echo <<< 'EOT'
{width: 400, height: 240}
EOT;

如果我添加Console.Log（optionData），我会按预期得到{width: 400, height: 240}。

Answer 1

您可以测试替换optiondata的数据类型。

自：

    var optionData = $.ajax({
        url: "http://server.com/charts/dev/options.php",
        dataType:"text",
        async: false
    }).responseText;

为：

    var optionData = $.ajax({
        url: "http://server.com/charts/dev/options.php",
        dataType:"JSON",
        async: false
    }).responseText;

Answer 2

要解决ajax调用问题，请定义错误，成功和完整的回调：

var optionData = $.ajax({
    url: "http://server.com/charts/dev/options.php",
    dataType:"json", // I think using 'text' here is wrong as `draw` expects objects
    async: false,
    error: function(xhr, status, err){
        console.log('Error: ' + xhr); // you can also output status and err if needed
    },
    success: function(data){
        console.log('Success: ' + data);
    },
    complete: function(data){
        console.log('Complete: ' + data);
    }
}).responseText;

还有一件事，要确保PHP返回一个对象，json会在PHP中对其进行编码：

echo json_encode($your_data);

Answer 3

无论我尝试什么，jQuery似乎总是返回一个字符串，而不是一个对象。

这适用于'google.visualization.DataTable'，但'google.visualization.AreaChart'需要一个对象。我现在正在使用这样的东西，它完美无缺：

var optionData = jQuery.parseJSON($.ajax({
    url: "http://server.com/charts/release/getChartOptions.php",
    dataType:"json"
    async: false
}).responseText);

感谢您的帮助！

从jQuery将选项传递给Google Charts

3 个答案: