Google Chart中的動態餅圖不起作用

Question

我是Google Chart的新手，正在嘗試在動態Web項目（Java EE）中創建動態餅圖。 我已閱讀了該教程（ https://developers.google.com/chart/interactive/docs/queries ），並將餅圖代碼復制到了Google代碼平台。

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 Chart中的動態餅圖不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2012-12-26 20:25:37

Google Chart中的動態餅圖不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2012-12-26 20:25:37

解決方案1
0 已采納 2012-12-26 20:25:37