Question

我们拥有来自多个站点的数据，数据会更新并将其存储在融合表中。我们希望允许用户选择网站（下拉菜单网页）以查看不同的数据显示。我在Google Charts API中使用“数据表”找到了一个示例，但是它可以让它工作，我可以使用它来显示另一种类型的数据表。但是，不能通过线图和条形图等其他图表来获取它。

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style></style>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

    var query = "SELECT 'Label' as beach, " + "'Pieces total' as Total " +'FROM 1c-FiEDwdwMt55a4AlE8Xuu40rUBR_qeI8ENiHtPV';
        var beach = document.getElementById('beach').value;
        if (beach) {
          query += " WHERE 'Label' = '" + beach + "'";
        }
        var queryText = encodeURIComponent(query);
        var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
        gvizQuery.send(function (handleQueryResponse){
            var data = response.getDataTable();
            var chart = new google.visualization.BarChart(document.getElementById('clarensBarchartPhone'));
            chart.draw(data, {}
                             }
                       )
            };
</script>
</head>
  <body>
   <div>
      <label>Beach:</label>
      <select id="beach" onchange="drawVisualization();">
        <option value="" selected="selected">All</option>
        <option value="Baye de Clarens">Baye de Clarens</option>
        <option value="Pierrier">Pierrier</option>
        <option value="Pierrier sud">Pierrier sud</option>
        <option value="Maladaire">Maladaire</option>
        <option value="Port La Tour-de-Peilz">Port de La La Tour-de-Peilz</option>
        <option value="Bain des dames">Bain des dames</option>
        <option value="Oyonne">Oyonne</option>
        <option value="Veveyse">Veveyse</option>
        <option value="L'Arabie">l'Arabie</option>
        <option value="Montreux">Montreux</option>
        <option value="Boiron">Boiron</option>
        <option value="Villa Barton">Villa Barton</option>
        <option value="Jardin Botanique">Jardin Botanique</option>
        <option value="Thonnon">Thonnon</option>
      </select>
    </div>
 <div id="clarensBarchartPhone" style="width: 450px; height: 375px; margin:0 auto 0 auto"></div>

  </body>
</html>

查询有效（它有功能输出），我不明白如何在另一种形式的Chart中使用该输出。

由于

Answer 1

首先，建议使用loader.js加载谷歌图表，而不是旧图书馆jsapi ...

接下来，handleQueryResponse功能出现问题。

handleQueryResponse通常是该函数的名称，而(argument)应为response

此处，response将不存在......

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

它应该像......

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

但实际上在使用内联时实际上不需要名称，请参阅下面的工作示例......

google.charts.load('current', {
  callback: drawVisualization,
  packages:['corechart', 'table']
});

function drawVisualization() {
  var query = "SELECT 'Label' as beach, " + "'Pieces total' as Total " +'FROM 1c-FiEDwdwMt55a4AlE8Xuu40rUBR_qeI8ENiHtPV';
  var beach = document.getElementById('beach').value;
  if (beach) {
    query += " WHERE 'Label' = '" + beach + "'";
  }
  var queryText = encodeURIComponent(query);
  var gvizQuery = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
  gvizQuery.send(function (response) {
    var data = response.getDataTable();
    var chart = new google.visualization.BarChart(document.getElementById('clarensBarchartPhone'));
    chart.draw(data, {
      chartArea: {
        width: '40%'
      }
    });
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <label>Beach:</label>
  <select id="beach" onchange="drawVisualization();">
    <option value="" selected="selected">All</option>
    <option value="Baye de Clarens">Baye de Clarens</option>
    <option value="Pierrier">Pierrier</option>
    <option value="Pierrier sud">Pierrier sud</option>
    <option value="Maladaire">Maladaire</option>
    <option value="Port La Tour-de-Peilz">Port de La La Tour-de-Peilz</option>
    <option value="Bain des dames">Bain des dames</option>
    <option value="Oyonne">Oyonne</option>
    <option value="Veveyse">Veveyse</option>
    <option value="L'Arabie">l'Arabie</option>
    <option value="Montreux">Montreux</option>
    <option value="Boiron">Boiron</option>
    <option value="Villa Barton">Villa Barton</option>
    <option value="Jardin Botanique">Jardin Botanique</option>
    <option value="Thonnon">Thonnon</option>
  </select>
</div>

<div id="clarensBarchartPhone" style="width: 450px; height: 375px; margin:0 auto 0 auto"></div>

谷歌图表将查询结果传递给谷歌图表

1 个答案: