2012-12-23 29 views
0

我是Google Chart的新手,我試圖在動態Web項目(Java EE)中創建一個動態餅圖。我已閱讀教程(https://developers.google.com/chart/interactive/docs/queries)並將餅圖代碼複製到Google代碼播放區中。Google Chart中的動態餅圖不起作用

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 謝謝。

回答

0

由於某些原因,它發送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>