Question

我是Google Chart的新手，我正在尝试在动态webproject（Java EE）中创建动态饼图。我已阅读教程（https://developers.google.com/chart/interactive/docs/queries）并在谷歌代码游戏场中复制饼图代码。

function initialize() 
{
    // Replace the data source URL on next line with your data source URL.
    // Specify that we want to use the XmlHttpRequest object to make the query.
    var opts = {sendMethod: 'xhr'};
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?range=A%3AB&key=0Aq4N8GK8re42dHlGMG0wM00tdE5PVjJZellXTEhFNEE&gid=0&headers=-1', opts);

    // Send the query with a callback function.
    query.send(handleQueryResponse);
}

function handleQueryResponse(response)
{
    if (response.isError()) 
    {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, is3D: true});
}

google.setOnLoadCallback(drawVisualization);

但它不起作用，没有饼图。可以告诉我问题出在哪里。我的电子表格是https://docs.google.com/spreadsheet/ccc?key=0Aq4N8GK8re42dHlGMG0wM00tdE5PVjJZellXTEhFNEE 谢谢。

Answer 1

由于某种原因，它发送OPTION请求而不是正确的GET。这是因为你使用opts参数，删除它，一切都会正常工作。

此外，您可以在此处找到有关此参数的注释： https://developers.google.com/chart/interactive/docs/reference#Query

opt_options [Optional, Object] A map of options for the request. Note: If you are accessing a restricted data source, you should not use this parameter.

以下是完整代码：

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1.0', {'packages':['corechart']});
            google.setOnLoadCallback(initialize);

            function initialize() {
                // removed the `var opts...` line
                var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?range=A%3AB&key=0Aq4N8GK8re42dHlGMG0wM00tdE5PVjJZellXTEhFNEE&gid=0&headers=-1');

                query.send(handleQueryResponse);
            }

            function handleQueryResponse(response) {
                if (response.isError()) {
                    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                    return;
                }

                var data = response.getDataTable();
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240, is3D: true});
            }
        </script>
    </head>
    <body>
        <div id="chart_div"></div>
    </body>
</html>

Google图表中的动态饼图无效

1 个答案: