如何将动态带注释的时间线图表直接嵌入到 Google 表格中答案

【问题标题】：How to embed a dynamic annotated timeline chart directly into Google Sheets如何将动态带注释的时间线图表直接嵌入到 Google 表格中
【发布时间】：2019-01-22 22:56:54
【问题描述】：

Google 表格仅在股票产品中提供一个时间线图表 - 我通过 google.visualizations 找到了时间线图表选项，可以处理我正在寻找的内容，但我不想在外部发布 - 我想在我当前的报告中构建它，但我一生无法弄清楚如何通过脚本集成示例代码。（时间线参考：https://developers.google.com/chart/interactive/docs/gallery/timeline）。

我只是尝试使用示例代码来看看这是否有效，但没有运气。我还尝试删除 .addrows 部分以使用工作表中的范围动态更新数据表，但我认为我也没有正确输入。下面是示例代码

    <html>
      <head>
        <script type="text/javascript"                 
        src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['timeline']});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {
            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();

            dataTable.addColumn({ type: 'string', id: 'President' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
              [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
              [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
              [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

            chart.draw(dataTable);
          }
        </script>
      </head>
      <body>
        <div id="timeline" style="height: 180px;"></div>
      </body>
    </html>

我希望创建一个可水平滚动的时间线图表，其中包括数据条目上的注释 - 该图表应从我在工作表 2 上运行的查询填充 - 此查询填充学期开始和学期结束日期（图表中的条目）、数据标识符和注释部分（用于注释）。

【问题讨论】：

使用“侧边栏”中的代码。如果需要，将其作为“图像”发送到工作表（您将失去所有自定义功能）。

标签： javascript google-apps-script charts google-visualization

【解决方案1】：

您可以使用query class 从工作表中提取数据 --> google.visualization.Query

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

google.charts.load('current', {
  packages:['timeline', 'table']
}).then(function () {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1bIydJJY_-H9NHHhxca9U-jNmKjYUkln14v20N7klAGg/edit?usp=sharing');
  query.setQuery('select E,A,C');
  query.send(handleQueryResponse);

  function handleQueryResponse(response) {
    if (response.isError()) {
      console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = response.getDataTable();
    chart.draw(dataTable);
  }
});

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

【讨论】：

这解决了它的一个方面，谢谢！我正在努力解决的下一部分是通过 Google 脚本在 Google 表格本身上嵌入它，而不是将其作为图像推送 - 如果可能的话 - 注释方面是我尝试使用此图表的主要原因。