外部API数据---＆gt; HTML服务输出为图表/表格

Question

所提供的解决方案对我来说已经完成了一半，但我需要的是在图表中表示数据。

我在index.html中通过此代码静态获取数据：

<? var data = getData(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>

这是HTML输出：

我需要的是一个图形:(值在数组中我需要一种从数组中获取值并显示动态视觉的方法）：

我成功地能够从API（JSON）获取和操作数据到＃34; code.gs＆＃34;。现在我想推/拉＃34; code.gs＆＃34;从API（JSON）接收到HTML服务图表的数组数据，并制作漂亮的仪表板。 （一切都是Web App）

如何从code.gs获取动态数组数据到HTML服务图表？

很多论坛我都在谈论静态数据，他们在那里声明了一个包含.addcolumn和.addrow的数据表。

Answer 1

而不是写入<table>，您需要将数据写入javascript

像这样......

<script>
  google.charts.load('current', {
    callback: function () {
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('string', 'Date');
      dataTable.addColumn('number', 'Count');

      <? var data = getData(); ?>
      <? for (var i = 0; i < data.length; i++) { ?>
        dataTable.addRow([
          "<?= data[i][0] ?>", <?= data[i][1] ?>
        ]);
      <? } ?>

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(dataTable);
    },
    packages: ['corechart']
  });
</script>

以下是一个完整的工作示例，以显示html中还需要显示图表的内容 基本上，需要谷歌脚本

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

和图表的占位符

<div id="chart_div"></div>

（使用硬编码数据）

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'Date');
    dataTable.addColumn('number', 'Count');

    dataTable.addRow([
      "Thu Oct 13 2016 09:02:23 GMT-0500 (CDT)", 1
    ]);

    dataTable.addRow([
      "Fri Oct 14 2016 10:37:50 GMT-0500 (CDT)", 16
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(dataTable);
  },
  packages: ['corechart']
});

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