无法在Google Visualization API图表中加载工作表

Question

I am trying to use Google Charts to add to a website for my company, and am running into problems when connecting the Sheet. 我正在尝试使用Google图表将其添加到我公司的网站上，并且在连接工作表时遇到问题。 I started from the basics and tried to recreate the pie example in the tutorial, but have the chart load the data from a sheet, rather than creating the table in the code. 我从基础开始，尝试重新创建本教程中的饼图示例，但让图表从工作表加载数据，而不是在代码中创建表。 I am clearly doing something wrong. 我显然做错了。 When I look at the console, it reads: 当我查看控制台时，它显示为：

Error while parsing the 'sandbox' attribute: 'allow-popups-to-escape-sandbox' is an invalid sandbox flag. 解析“ sandbox”属性时出错：“ allow-popups-to-escape-sandbox”是无效的沙箱标志。

Do I not have something set up correctly? 我没有正确设置东西吗？

I know this is probably a very basic question, but I am just starting out and would appreciate help. 我知道这可能是一个非常基本的问题，但是我刚刚开始工作，将不胜感激。 Here is my code: 这是我的代码：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi">        </script>
<script type="text/javascript">

  google.load('visualization', '1.0', {'packages':['corechart']});

  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.

  function drawChart() {
  var query = new google.visualization.Query('http://docs.google.com/spreadsheets/d/1WvVr748_MgWa0goyfwlMB2AX_AYtfvXnsLP8N1kyaek');
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();

}


    var options = {'title':'How Many Donuts I Ate',
                   'width':400,
                   'height':300};

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);

</script>
</head>
  <body>
  <!--Div that will hold the pie chart-->
  <div id="chart_div"></div>
</body>
</html>

Answer 1

You should contain your whole "draw chart procedure" in drawChart() 您应该在drawChart()包含整个“绘制图表过程”

<script type="text/javascript">

google.load('visualization', '1.0', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.

function drawChart() {
var query = new google.visualization.Query('http://docs.google.com/spreadsheets/d/1WvVr748_MgWa0goyfwlMB2AX_AYtfvXnsLP8N1kyaek');
query.send(handleQueryResponse);


function handleQueryResponse(response) {
  var data = response.getDataTable();
}


var options = {'title':'How Many Donuts I Ate',
               'width':400,
               'height':300};

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

Answer 2

Since google.visualization.Query.send function is async i would suggest to change the chart rendering flow to: 由于google.visualization.Query.send函数是异步的，因此我建议将图表呈现流程更改为：

google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);


function drawChart() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1WvVr748_MgWa0goyfwlMB2AX_AYtfvXnsLP8N1kyaek');
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {

    if (response.isError()) {
        console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }


    var options = {
        'title': 'How Many Donuts I Ate',
        'width': 400,
        'height': 300
    };
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    var data = response.getDataTable();
    chart.draw(data, options);
}

Regarding the error message: 关于错误消息：

Error while parsing the 'sandbox' attribute: 'allow-popups-to-escape-sandbox' is an invalid sandbox flag. 解析“ sandbox”属性时出错：“ allow-popups-to-escape-sandbox”是无效的沙箱标志。

It has nothing to do with Google API but concerns Chrome browser, AFAIK it is not supported to specify allow-popups-to-escape-sandbox attribute for in current version ( desktop Chrome 45 ). 它与Google API无关，但与Chrome浏览器，AFAIK有关，不支持为当前版本（ desktop Chrome 45 ）指定allow-popups-to-escape-sandbox属性。 But staring from Chrome 46+ it is supported to specify this flag (just verified it with Chrome Canary 47 ) 但是从Chrome 46+开始，它支持指定此标志（只需使用Chrome Canary 47进行验证）

无法在Google Visualization API图表中加载工作表

问题描述

2 个解决方案

解决方案1
1 2015-09-17 05:56:14

解决方案2
0 2015-09-18 14:00:41

无法在Google Visualization API图表中加载工作表

问题描述

2 个解决方案

解决方案1 1 2015-09-17 05:56:14

解决方案2 0 2015-09-18 14:00:41

解决方案1
1 2015-09-17 05:56:14

解决方案2
0 2015-09-18 14:00:41