Query Source Ranges

Question

我正在研究一个刚落入我的膝盖的新项目，这有点超出了我的范围。我一直在研究如何创建一个谷歌图表，以及如何从谷歌电子表格中提供数据到目前为止没有运气。

我一直在寻找here的信息，但是我只是无法在文件中包含操作数据与查询谷歌电子表格来获取数据之间建立连接。

我一直在查看下面的代码，试图找出需要更换和调整的内容，以便将其扩展到谷歌电子表格但是我一直无法得到任何我尝试工作而且没有像youtube指南一样特别针对这一点。

`

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

`

Answer 1

您可以先阅读Creating a Chart from a Separate Spreadsheet。

通常，人们通过填充数据表并使用该数据绘制图表来创建Google Charts。如果您想要从Google电子表格中检索数据，您可以查询电子表格以检索要制图的数据：

function drawChart() {
var query = new google.visualization.Query(URL);
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, null);
}

Query Source Ranges

查询源URL指定要在查询中使用的电子表格的哪个部分：特定单元格，单元格范围，行或列，或整个电子表格。使用＆＃34; range =＆＃34;指定范围语法，例如：

https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4

以下是一些演示语法的示例：


A1：B10 - 从单元格A1到B10的范围

5：7 - 第5-7行

D：F - 列D-F

带有HTML格式的电子表格的Google信息中心

1 个答案:

Query Source Ranges