javascript google可视化选择选项

时间:2016-09-27 08:05:01

标签: charts google-visualization

我尝试使用谷歌电子表格来实现下拉选择选项! 但是我遇到了一些错误...... 在控制台中,它显示了......

**A Parser-blocking, cross-origin script, https://www.google.com/uds/?file=visualization&v=1&packages=corechart%2Cgeomap%2Ctable, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.**
**A Parser-blocking, cross-origin script, https://www.google.com/uds/api/visualization/1.0/b5ac9efed10eef460d14e653d0…zh_TW,default+zh_TW,ui+zh_TW,geomap+zh_TW,table+zh_TW,corechart+zh_TW.I.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.**

我尝试修复它的提示,但它无法解决... 这是我写的代码

<html><head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type=text/javascript>
google.setOnLoadCallback(runQuery);
google.load('visualization', '1',
        {
          'packages':['corechart', 'table', 'geomap']
        }
);function runQuery() {
var tableid = '1zCrjWMRxcedcvdWWAwtc9psQoK8GoGyxy8R53Ga_ztk#gid=0';
var uri = "SELECT geometry FROM " + tableid ;
var queryText = "https://spreadsheets.google.com/tq?key=" + encodeURIComponent(uri);
var query = new google.visualization.Query(queryText);
query.setQuery("select B");
var a = query.setQuery("select B,C,D ");
query.send(function(resp){
if (!resp.isError()) {
  var dataTable = resp.getDataTable();
  var jsonData = JSON.parse(dataTable.toJSON());
  var len = jsonData.rows.length;
  console.log(len);
  alert(len);
  }
});}</script></head><body></body></html>

1 个答案:

答案 0 :(得分:4)

1) Parser-blocking消息应该只是一个警告。

无论如何,要避免该消息,请使用loader.js加载库,
而不是旧库jsapi

您需要更改load语句,如下所示......

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart', 'table', 'geomap']});
google.charts.setOnLoadCallback(runQuery);
...

根据release notes ...

  

通过jsapi加载程序保留的Google图表版本不再一致更新。从现在开始请使用新的gstatic装载机。

2)怀疑发生了另一个错误,请检查回复消息

请参阅以下工作代码段,当我运行它时,错误为Access denied ...

google.charts.load('current', {'packages':['corechart', 'table', 'geomap']});
google.charts.setOnLoadCallback(runQuery);

function runQuery() {
var tableid = '1zCrjWMRxcedcvdWWAwtc9psQoK8GoGyxy8R53Ga_ztk#gid=0';
var uri = "SELECT geometry FROM " + tableid ;
var queryText = "https://spreadsheets.google.com/tq?key=" + encodeURIComponent(uri);
var query = new google.visualization.Query(queryText);
query.setQuery("select B");
var a = query.setQuery("select B,C,D ");
query.send(function(resp){
if (!resp.isError()) {
  var dataTable = resp.getDataTable();
  var jsonData = JSON.parse(dataTable.toJSON());
  var len = jsonData.rows.length;
  console.log(len);
  } else {
    console.log('Error: ' + resp.getMessage() + '\nDetails: ' + resp.getDetailedMessage());
  }
});}
<script src="https://www.gstatic.com/charts/loader.js"></script>