Google 个图表将查询结果传递给 google 个图表

Question

我们有来自多个站点的数据，数据得到更新清理并存储在融合 table 上。我们希望允许用户 select 站点（下拉菜单网页）查看不同的数据演示。我用 Google 图表 API 使用 "Data Table" 找到了一个例子，但无法让它工作我修改并使用它来显示另一种类型的数据 table。但是不能让它与折线图和条形图等其他图表一起工作。

<!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>

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

谢谢

Answer 1

首先，建议使用 loader.js 加载 google 图表，对比旧库 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>

Google 个图表将查询结果传递给 google 个图表

Google chart passing query results to google charts

javascript

charts

google-visualization

google-fusion-tables