谷歌chartapi自定義html數據源查詢超時

我只是試圖實現我認爲是谷歌自定義HTML數據源的例子。我明顯錯過了一些東西，但無法看到它。谷歌chartapi自定義html數據源查詢超時

目標是讓我的默認頁面從我自己的數據源中檢索表格的數據並繪製它。

我收到的錯誤是最終我得到一個超時對話框顯示。

我有兩個文件default.htm和data.htm。有一段時間這也將在相關的網站上。（www.ichoosewellness.com/chartapitest）。

的default.htm：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

    <title></title> 

    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
     google.load('visualization', '1', { packages: ['corechart'] }); 

    </script> 

    <script type="text/javascript"> 

     function drawVisualization() { 
      // Replace the data source URL on next line with your data source URL. 
      var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html'); 
      // 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(); 

      // Create and draw the visualization. 
      var comboChart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
      comboChart.draw(); 

      var div = document.getElementById('chart_div'); 
      div.style.backgroundColor = 'red'; 
     } 

     google.setOnLoadCallback(drawVisualization); 

     var div = document.getElementById('chart_div'); 
     div.style.backgroundColor = 'red'; 


    </script> 

</head> 

<body> 

    <div id='chart_div' style="width: 500px; height: 250px; border: 1px solid green;"> 

    </div> 

</body> 

</html>

data.htm

<html> 
<body> 
    <table border='1' cellpadding='2' cellspacing='0'> 
     <tr style='font-weight: bold; background-color: #aaa;'> 
      <td> 
       label 1 
      </td> 
      <td> 
       label 2 
      </td> 
     </tr> 
     <tr bgcolor='#f0f0f0'> 
      <td align='right'> 
       1 
      </td> 
      <td> 
       a 
      </td> 
     </tr> 
     <tr bgcolor='#ffffff'> 
      <td align='right'> 
       2 
      </td> 
      <td> 
       b 
      </td> 
     </tr> 
     <tr bgcolor='#f0f0f0'> 
      <td align='right'> 
       3 
      </td> 
      <td> 
       c 
      </td> 
     </tr> 
     <tr bgcolor='#ffffff'> 
      <td align='right'> 
       4 
      </td> 
      <td> 
       d 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2011-06-23 badMonkey

這個問題現在是很老，但我會添加什麼我發現了它，因爲我也有類似的問題。

基本上我試圖讓google.visualization.Query（）調用我的WCF REST服務並讓它返回一個json數據表。每次執行查詢時，即使GET請求成功執行，也會引發超時錯誤。罪魁禍首原來是響應字符串和跨站點域權限的格式。

響應格式非常特殊，如果未正確定義，會引發超時錯誤。你必須仔細閱讀下面的詳細文檔。

下面是詳細正確的格式說明的網址： http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html 1

其次不要忘了跨站點域的權限。因爲我從localhost：63532進行了測試，並調用位於localhost：63002上的REST服務，所以它們不是同一個域，並且沒有被查詢。爲了測試，我需要將以下內容添加到響應頭中。

Access-Control-Allow-Origin:http://localhost:63532

這兩項是超過超時錯誤的關鍵。

在你的代碼調用HTML的情況下，如果你閱讀上面的鏈接文檔，那裏有一個描述HTML響應格式的部分。這裏是相關的文字：

如果請求指定了html：響應應該是一個HTML頁面定義一個HTML表格與數據。這對於調試代碼很有用，因爲瀏覽器可以直接呈現可讀格式的結果。您無法使用google.visualization.Query對象發送對HTML響應的查詢。您必須使用自定義代碼的HTML響應查詢，或通過在瀏覽器中鍵入類似一個URL：

因爲在你的代碼中試圖做到這一點：

var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html');

從文檔看來，這不被查詢功能支持。

來源

2011-09-13 23:35:19

谷歌chartapi自定義html數據源查詢超時

回答

相關問題