javascript - 从 javascript(Google Apps 脚本)将数组添加到 html 文件
问题描述
我有一个 html 文件和一个 javascript 文件(Google Apps 脚本),并且 html 文件呈现一个图表。
我想从 javascript 文件中将一个数组添加到该图表中,但它不起作用(所以尝试这个替代想法)。
这是html文件:
<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('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows(
//HERES WHERE I WANT TO ADD IN THE ARRAY THAT FUNCTIONS PROPERLY
);
chart.draw(dataTable);
}
</script>
<div id="example3.1" style="height: 400px;">Graph D</div>
这是我的 Code.gs:
function showDialog() {//This shows the modal which renders the chart
//Firstly replace the placeholder in the html with the below array somehow. Then...
var html = HtmlService.createHtmlOutputFromFile('GraphD')
.setWidth(800)
.setHeight(700);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'My custom dialog');
}
这是我要在渲染之前插入到 html 文件中的数组:
var MyArray = [[ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)]];
所以我希望在渲染之前将上面的数组插入到 HTML 中的注释占位符中,任何帮助都会很棒。
解决方案
您希望Array
从 Google Apps 脚本中传递一个作为DataTable
客户端 Google Charts API 方法的参数。
一种方法是使用google.script.run
执行服务器端函数来读取/生成要在图表上可视化的数据并将其传递给客户端代码,但是此 API 无法传递 JavaScript 日期对象,因此而不是传递这些类型的对象我们应该传递它们的一些表示。
如果我们不传递包含 Date 对象的 JavaScript 数组,而是传递 JSON,该怎么办?该DataTable
方法可以支持数组,也可以支持 JSON。
传递一个 JSON,允许我们传递而不是传递new Date(1789,3,30)
传递"Date(1789,3,30)"
(删除new
并将剩余的引号括起来)。
例子:
function showDialog() {
SpreadsheetApp.getUi().showModalDialog(
HtmlService.createHtmlOutputFromFile("index"),
"My dialog")
}
function doSomething(){
var data = {
cols:[
{ type: 'string', id: 'Position' },
{ type: 'string', id: 'Name' },
{ type: 'date', id: 'Start' },
{ type: 'date', id: 'End' }
],
rows:[
{c:[ {v:"President"}, {v:"George Washington"}, {v:"Date(1789, 3, 30)"}, {v:"Date(1797, 2, 4)"}]},
{c:[ {v:"President"}, {v:"John Adams"}, {v:"Date(1797, 2, 4)"}, {v:"Date(1801, 2, 4)" }]},
{c:[ {v:"President"}, {v:"Thomas Jefferson"}, {v:"Date(1801, 2, 4)"}, {v:"Date(1809, 2, 4)" }]},
{c:[ {v:"Vice President"}, {v:"John Adams"}, {v:"Date(1789, 3, 21)"}, {v:"Date(1797, 2, 4)"}]},
{c:[ {v:"Vice President"}, {v:"Thomas Jefferson"}, {v:"Date(1797, 2, 4)"}, {v:"Date(1801, 2, 4)"}]},
{c:[ {v:"Vice President"}, {v:"George Clinton"}, {v:"Date(1805, 2, 4)"}, {v:"Date(1812, 3, 20)"}]}
]
}
return data;
}
索引.html
<div id="example3.1" style="height: 400px;">Graph D</div>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
google.script.run.withSuccessHandler(function(data){
var container = document.getElementById('example3.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable(data);
chart.draw(dataTable);
}).doSomething();
}
</script>
资源
推荐阅读
- c# - 与包含文字的变量混合的文字的正则表达式是什么?
- xamarin.forms - 如何使用 Xamarin.Forms 和 MvvmCross 设置我的 UWP 项目
- c# - C# for 循环,通过用户指定的数字给出 i/(i+1) 的总和
- bitbucket - Bitbucket Hooks 与 Webhooks
- php - 如何删除两个文本字段之间的空格
- php - 检索 exercise_day 等于当天的记录
- json - 解组到自定义接口
- python - 从权限类访问 hyperlinkedRelatedField 对象
- django - jqgrid 在 Django 模板中的使用:“item-jqgrid-entity1”的反向
- jenkins - 从工件中选择工件以在 Jenkins 中部署管道作业