Question

我刚刚完成了关于类似主题的solution from this question的实施，但解决方案对我不起作用。

我正在尝试创建一个使用谷歌电子表格数据的仪表板，但我似乎无法正确加载。

每当我加载网页时，我会经常收到以下错误消息：

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文档中的示例完全相同，以便尽可能轻松地实现。

修改

由于回答者的提示，我对我的查询网址进行了不同的修改，到目前为止还没有改进。

以下是我地址栏中的网址：

网址

这是一张单页文件。

在回答第一个答案时，我尝试了以下查询网址，但没有成功。

首先

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

最后一个网址背后的想法是，在新的Google工作表中，gid是d /之后/编辑之后的字符串。

非常感谢您的帮助。

Answer 1

在以下位置找到dataSourceURL：

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

替换：

edit#gid=0

使用：

gviz/tq?sheet=Sheet1

如果这不起作用，那么您需要使用gid这是一个唯一的9到10位数字。（例如gid=1104711743）。打开你的工作表并查看地址栏，你应该在网址的末尾看到它。

你的行应该是这样的：

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

使用外部Google表格填充Google Charts仪表板

1 个答案: