使用外部Google工作表填充Google圖表儀表板

剛剛完成對類似主題的solution from this question實施，但該解決方案對我無效。使用外部Google工作表填充Google圖表儀表板

我想創建一個儀表板，使用來自谷歌電子表格的數據，但我似乎無法得到它加載正確。

我經常收到以下錯誤消息，每當我加載網頁：

One or more participants failed to draw()

這是我現在使用的代碼：

<html> 
<head> 
<script type="text/javascript"> 

    // Load the Visualization API and the controls package. 
    google.charts.load('current', {'packages':['corechart', 'controls']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.charts.setOnLoadCallback(initialize); 

    function initialize() { 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=0'); 
     query.send(drawDashboard) 
    } 

    // Callback that creates and populates a data table, 
    // instantiates a dashboard, a range slider and a pie chart, 
    // passes in the data and draws it. 
    function drawDashboard(response) { 

    // Create our data table. 
    var data = response.getDataTable(); 

    // Create a dashboard. 
    var dashboard = new google.visualization.Dashboard(
     document.getElementById('dashboard_div')); 

    // Create a range slider, passing some options 
    var donutRangeSlider = new google.visualization.ControlWrapper({ 
     'controlType': 'NumberRangeFilter', 
     'containerId': 'filter_div', 
     'options': { 
     'filterColumnLabel': 'Donuts eaten' 
     } 
    }); 

    // Create a pie chart, passing some options 
    var pieChart = new google.visualization.ChartWrapper({ 
     'chartType': 'PieChart', 
     'containerId': 'chart_div', 
     'options': { 
     'width': 300, 
     'height': 300, 
     'pieSliceText': 'value', 
     'legend': 'right' 
     } 
    }); 

    // Establish dependencies, declaring that 'filter' drives 'pieChart', 
    // so that the pie chart will only display entries that are let through 
    // given the chosen slider range. 
    dashboard.bind(donutRangeSlider, pieChart); 

    // Draw the dashboard. 
    dashboard.draw(data); 
    } 
</script> 
</head> 

<body> 
    <div id="dashboard_div"> 
     <!--Divs that will hold each control and chart--> 
      <div id="filter_div"></div> 
      <div id="chart_div"></div> 
    </div> 
</body> 
</html>

鏈接到電子表格中可以看到這裏：https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=420659822

我想要繪製的儀表板是直接從這裏列出的源文檔中獲取：https://developers.google.com/chart/interactive/docs/gallery/controls

我試圖按照有關此加載外部電子表格的例子：https://developers.google.com/chart/interactive/docs/spreadsheets

的鏈接，我用這個項目的工作文件可以看這裏：https://s3-us-west-2.amazonaws.com/example-server/index.html

我試着刪除之前鏈接中的所有標題鏈接和樣式，以驗證其他任何內容都不會干擾可視化API，但這也不能解決問題。

另外：

的電子表格隱私設置爲
的鏈接是直接從地址欄所採取的查詢中使用「在網絡上公開」，但我也用了「共享鏈接'由谷歌提供，當你提示。
我使用的數據與Google文檔中的示例完全相同，以便儘可能輕鬆地實現。

編輯

由於回答者的提示，我experiemented我查詢網址不同的修改，迄今都沒有奏效。

下面是我的地址欄的網址：

URL

這是一個單頁文檔。

作爲對第一個答案的迴應，我嘗試了以下查詢網址，但沒有成功。

第一：

https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?sheet=Sheet1

二：

https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=0

三：

https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws

最後這個URL背後的想法是在新的Google表格中，gid是d /和之前/編輯後的字符串。

非常感謝您的幫助。

來源

2016-11-14 Jonathan Bechtel

找到你dataSourceURL在：

var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/edit#gid=0');

替換：

有：

gviz/tq?sheet=Sheet1

如果不工作，那麼你就需要使用gid這是一個獨一無二的9至10位數字。（例如gid=1104711743）。打開你的工作表並查看地址欄，你應該在URL的末尾看到它。

你行應該是這樣的：

var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FnETUo8yrthFBdUYsQ8Ty9e8pK3ouWZntvDnXlhHKws/gviz/tq?gid=1234567890');

來源

2016-11-14 14:56:51 zer00ne

感謝你這個答案。不過，我嘗試了您的網址建議，但這些建議對我無效。我更新了這個問題以反映這些嘗試。問題：在當地工作是否有可能影響到這一點？我記得有一個谷歌圖表類似的問題，但當我在本地查看頁面時卻無法正常工作，但在將它放到服務器上時加載。 –

好的，謝謝。因此，在我的預感中，我複製了該表以創建10位數字的gid編號，以使用您使用的URL格式，但它仍然無效。然後，我將電子表格中的隱私設置從「可以查看鏈接的任何人」更改爲「公開在網絡上」，但這也無法使用。如果我的電子表格中有一些設置可能會阻止這些數據填充，您有什麼想法嗎？ –

查看截圖http://i.imgur.com/FighmHg.png – zer00ne

使用外部Google工作表填充Google圖表儀表板

回答

相關問題