javascript - 来自电子表格的 Google Geochart 动态值

Question

这有点超出我的能力，我想我只是遗漏了一个小细节。我正在尝试获取美国的热图(Google geochart)以根据 Google 电子表格中的数字动态更新。

我有一个工作示例

    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
    <div id="geochart-colors" style="width: 100%; height: 100%;"></div>

    <script type="text/javascript">
          google.setOnLoadCallback(drawRegionsMap);
          function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable([
              ['State', 'Pledge'],
              ['Wyoming', 5],
              ['Alasak', 10],
              ['Arizona', 15],
              ['Nevada', 20],
              ['Colorado', 25],
              ['Algeria', 7],
              ['Algeria', 17],
              ['Idaho', 27],
              ['Algeria', 13],
              ['Montana', 3],
              ['Utah', 33],
              ['California', 30],
              ['Oregon', 27],
              ['Washington', 13],
              ['New Mexico', 10],
              ['Texas', 13],
              ['Kansas', 10]
            ]);

    var options = {
        region: 'US',
        displayMode: 'regions',
        resolution: 'provinces',
        colorAxis: {
          colors: ['#444444', '#f70000']
        },
        backgroundColor: '#222222',
        datalessRegionColor: '#333333',
        defaultColor: '#333333',
        legend: 'none'
      };
            var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
            chart.draw(data, options);
          };
    </script>

http://jsfiddle.net/75L98227/

但是，当我尝试将地理图表的来源切换为从 Google 文档中提取时，没有任何内容弹出，如此处所示

    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
    <div id="geochart-colors" style="width: 100%; height: 100%;"></div>
    <script type="text/javascript">

          google.setOnLoadCallback(drawRegionsMap);

          function drawRegionsMap() {
            var query = google.visualization.Query('https://docs.google.com/spreadsheets/d/1FxR8f6JujykDpNW1HOZPQoGV3h73e42dpfDCVvOlXdY&sheet=ByState&range=A1:B51&headers=1');

            query.setQuery('select A,B');
            query.send(handleQueryResponseTR);
            function handleQueryResponseTR(response) {
                    if (response.isError()) {
                        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                    return;
                }

            var options = {
              region: 'US',
              displayMode: 'regions',
              resolution: 'provinces',
              colorAxis: {
                colors: ['#444444', '#f70000']
              },
              backgroundColor: '#222222',
              datalessRegionColor: '#333333',
              defaultColor: '#333333',
              legend: 'none'
            };

            var data = response.getDataTable();
            var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
            chart.draw(data, options);
          };
    </script>

http://jsfiddle.net/x5rykyhj/

我不知道我错过了什么。这是我迄今为止构建的所有内容的基础:https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=en

Answer 1

您遇到了几个问题——查询不正确，因为需要设置 gid 才能到达工作表 2，而您没有使用“new”关键字。注意在 gid 上，导航到在线电子表格并选择所需的工作表，使用 URL，不要尝试使用工作表查询选择器。这是行不通的。

我以前做过，示例页面在这里:

http://www.cloudformatter.com/GoogleCharts.GoogleChartSamples.Development.USPopulation

这是我根据您的 fiddle 创建的 fiddle (我添加了一个表格以查看正在检索的数据以确定):

http://jsfiddle.net/x5rykyhj/4/

google.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1FxR8f6JujykDpNW1HOZPQoGV3h73e42dpfDCVvOlXdY/edit?gid=143931468&headers=1&range=A1:B51');
    //query.setQuery('select A,B');
    query.send(handleQueryResponseTR);
    }
    function handleQueryResponseTR(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' +            response.getDetailedMessage());
            return;
        }

    var options = {
      region: 'US',
      displayMode: 'regions',
      resolution: 'provinces',
      colorAxis: {
        colors: ['#444444', '#f70000']
      },
      backgroundColor: '#222222',
      datalessRegionColor: '#333333',
      defaultColor: '#333333',
      legend: 'none'
    };

    var data = response.getDataTable();

    var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
    var table = new google.visualization.Table(document.getElementById('table_div'));

    chart.draw(data, options);
        table.draw(data, {
    width: '100%', height: '100%'
});
  };

结果是: