在谷歌图表上设置查询范围的问题

Question

我对使用 google 图表/javascript 进行编码相当陌生，由于某种原因，当我尝试从电子表格中提取数据时，我无法指定范围。我使用的是一个很小的示例电子表格，但它仍然不会不工作。我的java代码在下面，我已经尝试了我能找到的每一个url修改。使用 'https://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttRICBBDR8j1yEAjg/edit#gid=0range=2:5' 不会改变结果。

使用 'https://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttRICBBDR8j1yEAjg/gviz/tq?range=2:5' 不会生成图表，即使排除范围也会。

整个java代码都在这里，我做错了什么？：

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

function drawChart() {

  var queryString =  encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttRICBBDR8j1yEAjg/edit#gid=0range=A1:C2' + queryString);
  query.send(handleSampleDataQueryResponse);
}

function handleSampleDataQueryResponse(response) {

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

  var data = response.getDataTable();


  var materialOptions = {
    chart: {
      title: 'Example Data'
    },
    width: 900,
    height: 500,
    series: {
      0: {
        axis: 'Miles'
      },
      1: {
        axis: 'Heartrate'
      }
    },
    axes: {
      y: {
        Miles: {
          label: 'Miles Run'
        },
        Heartrate: {
          label: 'Heart rate(BPM)'
        }
      }
    }
  };

  function drawMaterialChart() {
    var chartDiv = document.getElementById('chart_div');
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
  }
  drawMaterialChart();
}

Answer 1

url上的参数需要用-->&隔开

例如--> .../edit#gid=0&range=A1:C2

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: drawChart,
  packages: ['line', 'corechart', 'table']
});

function drawChart() {
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttRICBBDR8j1yEAjg/edit#gid=0&range=A1:C2');
  query.send(handleSampleDataQueryResponse);
}

function handleSampleDataQueryResponse(response) {

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

  var data = response.getDataTable();


  var materialOptions = {
    chart: {
      title: 'Example Data'
    },
    width: 900,
    height: 500,
    series: {
      0: {
        axis: 'Miles'
      },
      1: {
        axis: 'Heartrate'
      }
    },
    axes: {
      y: {
        Miles: {
          label: 'Miles Run'
        },
        Heartrate: {
          label: 'Heart rate(BPM)'
        }
      }
    }
  };

  function drawMaterialChart() {
    var chartDiv = document.getElementById('chart_div');
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
  }
  drawMaterialChart();
}

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

---

注意：如果您要包含查询字符串，
选择语句需要在 url 上设置的范围内
目前，范围仅包括列 A 到 C
但是sql有H, O, Q, R, U

---

编辑

删除范围并尝试使用方法setQuery 来使用SQL 语句...

query.setQuery('SELECT A, B, C LIMIT 3');

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: drawChart,
  packages: ['line', 'corechart', 'table']
});

function drawChart() {
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1BHeR6LetK5ztqvgIm53OpbNFjMttRICBBDR8j1yEAjg/edit#gid=0');
  query.setQuery('SELECT A, B, C LIMIT 3');  
  query.send(handleSampleDataQueryResponse);
}

function handleSampleDataQueryResponse(response) {

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

  var data = response.getDataTable();


  var materialOptions = {
    chart: {
      title: 'Example Data'
    },
    width: 900,
    height: 500,
    series: {
      0: {
        axis: 'Miles'
      },
      1: {
        axis: 'Heartrate'
      }
    },
    axes: {
      y: {
        Miles: {
          label: 'Miles Run'
        },
        Heartrate: {
          label: 'Heart rate(BPM)'
        }
      }
    }
  };

  function drawMaterialChart() {
    var chartDiv = document.getElementById('chart_div');
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
  }
  drawMaterialChart();
}

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