所提供的解决方案对我来说已经成功了一半,但我需要的是在图表中表示数据。
我通过 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
声明了一个数据表。
最佳答案
而不是写入 <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>
关于javascript - 外部 API 数据 ---> HTML 服务输出为图表/表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40043189/