Question

好的，所以我从谷歌的图表工具文档中复制并粘贴了这个例子： https://developers.google.com/fusiontables/docs/samples/gviz_datatable

我只是用我的替换他们的融合表信息，我无法让表格出现。

这就是我现在将融合表设置为公共访问的内容：

    <html>
<head>
<meta charset="UTF-8">
<title>Fusion Tables API Example: Google Chart Tools Data Table</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
    rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', { packages: ['table'] });

  function drawTable() {
    var query = "SELECT 'fundraiser' as fundraiser, " +
        "'price' as price, 'merchant' as merchant " +
        'FROM 1QN6e86FybBULPekKvvXd_RF1jw01H7bZAJFjhUg';
    var fundraiser = document.getElementById('fundraiser').value;
    if (team) {
      query += " WHERE 'fundraiser' = '" + fundraiser + "'";
    }
    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query(
        'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

    gvizQuery.send(function(response) {
      var table = new google.visualization.Table(
          document.getElementById('visualization'));
      table.draw(response.getDataTable(), {
        showRowNumber: true
      });
    });
  }

  google.setOnLoadCallback(drawTable);
</script>
</head>
<body>
<div>
  <label>Scoring Team:</label>
  <select id="fundraiser" onchange="drawTable();">
    <option value="">All</option>
    <option value="default">default</option>
    <option value="aaaatester">aaaatester</option>
  </select>
</div>
<div id="visualization"></div>
</body>
</html>

Answer 1

我不确定您的查询到底出了什么问题，但这对我有用：

function drawTable () {
    console.log('foo');
    var query = 'SELECT fundraiser, price, merchant FROM 1QN6e86FybBULPekKvvXd_RF1jw01H7bZAJFjhUg';
    var fundraiser = document.getElementById('fundraiser').value;
    if (fundraiser) {
        query += ' WHERE fundraiser = \'' + fundraiser + '\'';
    }
    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

    gvizQuery.send(function(response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var table = new google.visualization.Table(document.getElementById('visualization'));
        table.draw(response.getDataTable(), {
            showRowNumber: true
        });
    });
}

function init () {
    // draw the table
    drawTable();

    // setup the fundraiser dropdown to redraw the table when the user changes the value
    var el = document.querySelector('#fundraiser');
    if (document.addEventListener) {
        el.addEventListener('change', drawTable);
    }
    else if (document.attachEvent) {
        el.attachEvent('onchange', drawTable);
    }
    else {
        el.onchange = drawTable;
    }
}
google.load('visualization', '1', {packages: ['table'], callback: init});

将此作为HTML：

<div>
    <label>Scoring Team:</label>
    <select id="fundraiser">
        <option value="">All</option>
        <option value="default">default</option>
        <option value="aaaatester">aaaatester</option>
    </select>
</div>
<div id="visualization"></div>

但我建议，如果您要使用这样的过滤器，初始查询未经过滤，则切换到使用CategoryFilter过滤浏览器中的数据而不是制作每次用户更改过滤器时查询服务器。唯一一次对服务器进行重复查询是有意义的，当使用多个筛选查询而不是一个未筛选查询时，进出服务器的总流量可能大大降低。

带有Fusion Table Example错误的Google图表

1 个答案: