将自定义参数传递给 query.send Google Query Language答案

【问题标题】：Pass Custom Parameter to query.send Google Query Language将自定义参数传递给 query.send Google Query Language
【发布时间】：2016-07-01 00:03:07
【问题描述】：

我正在使用谷歌的图表 API 创建一个基于网络的仪表板。我想绘制许多图形，需要通过此链接将自定义参数传递给 handleDataQueryResponse 函数：https://developers.google.com/chart/interactive/docs/spreadsheets#sheet-name。此函数通过 query.send(handleDataQueryResponse) 调用来调用。我原以为我可以通过调用来做到这一点： query.send(function() { handleDataQueryResponse(parameters) });但这对我不起作用。有任何想法吗？向其他方法开放以使查询及其处理程序可重用！

更多关于 google 的 javascript 图表 API 的信息在这里：https://developers.google.com/chart/interactive/docs/quick_start。

【问题讨论】：

标签： javascript google-visualization google-query-language

【解决方案1】：

这样的东西适合你吗？

google.charts.load('current', {
  callback: function () {
    drawChart0();
    drawChart1();
  },
  packages:['corechart', 'table']
});

function drawChart0() {
  var chart = new google.visualization.BarChart(document.getElementById('barchart'));
  var query = "http://www.google.com/fusiontables/gvizdata?tq=SELECT 'Label' as beach, 'Pieces total' as Total FROM 1c-FiEDwdwMt55a4AlE8Xuu40rUBR_qeI8ENiHtPV";
  var options = {
    animation: {
      duration: 500,
      startup: true,
      easing: 'out'
    },
    chartArea: {
      width: '40%'
    }
  };
  sendQuery(query, chart, options);
}

function drawChart1() {
  var chart = new google.visualization.Table(document.getElementById('tablechart'));
  var query = "https://docs.google.com/spreadsheets/d/19olM1pEF5qQvvKhwSH3d_X4w2DVfOWDwDtZKNFlMY3w/edit#gid=0&tq=select A, B where A >= date '2016-01-01'";
  var options = {};
  sendQuery(query, chart, options);
}

function sendQuery(query, chart, options) {
  new google.visualization.Query(query).send(function (response) {
    chart.draw(response.getDataTable(), options);
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart"></div>
<div id="tablechart"></div>

【讨论】：

谢谢，这非常有帮助。我看到查询与我一直使用的格式不同，我无法替换它们。这是我一直在使用的查询（来自 Google 的开发人员库）： var query = new google.visualization.Query('docs.google.com/spreadsheets/d/… A, B, C, D');我如何在这些之间切换，它们之间的功能区别是什么？

【解决方案2】：

我想出了一个解决方案，让我告诉你，它并不漂亮。但它有效。一如既往，很高兴得到改进和反馈！感谢@WhiteHat 帮助我。

google.charts.setOnLoadCallback(function() {
    drawChart('chart1', 0, 'SELECT A, B, C, D, E', {title: 'Chart 1'})

    drawChart('chart2', 1, 'SELECT A, H, I, J', {title: 'Chart 2'})
});

var chartsArray = [];
var optionsArray = [];
var nextID = 0;

function drawChart(tag, id, sqlCommand, options= {}, sheetName='Sheet1', numHeaders=1) {
    chartsArray[id] = new google.visualization.ColumnChart(document.getElementById(tag));

    optionsArray[id] = options;

    var queryString = encodeURIComponent(sqlCommand);

    var query = new google.visualization.Query(
       'https://docs.google.com/spreadsheets/d/1dfRA_NDsdfED3OEdx-v3ZzA2-oWPS4kU_2mV-PY/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString);
      query.send(handleDataQueryResponse);
}

function handleDataQueryResponse(response, id) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    chartsArray[nextID].draw(data, optionsArray[nextID]);
    nextID += 1;
}

【讨论】：