javascript - 外部 API 数据 ---> 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) 获取和操作数据到“code.gs”。现在，我希望将从 API (JSON) 接收到的“code.gs”数组数据推送/拉取到 HTML 服务图表，并制作一个漂亮的仪表板。 (一切都是网络应用)

如何从 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>