如何将动态注释时间线图表直接嵌入Google表格中

时间:2019-01-22 22:56:55

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

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上运行的查询中填充-该查询将填充术语开始和术语结束日期(图表中的条目),数据标识符和注释部分(用于注释)。

1 个答案:

答案 0 :(得分:1)

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

请参阅以下工作片段...

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>