Question

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

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

整个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

网址上的参数需要用 - ＆gt;分隔&

e.g。 - ＆GT; .../edit#gid=0&range=A1:C2

请参阅以下工作代码段...

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>

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

编辑

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

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

请参阅以下工作代码段...

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>

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

1 个答案: