Google apps script 谷歌应用脚本webApp用户界面重绘用户界面

Google apps script 谷歌应用脚本webApp用户界面重绘用户界面,google-apps-script,Google Apps Script,我有一个GAS,它显示一个来自谷歌电子表格的领导板(谷歌图表) 我希望每次电子表格更新时,图表都会刷新并显示最新的分数 每次有新分数时,电子表格都会计算新分数并更新列表。(此部件已使用气体正常工作) 似乎不起作用的是webApp没有重新加载/绘制图表 电子表格触发器onChange()调用logChange()函数,该触发器在电子表格更改时触发,并成功记录其进程的开始和结束(成功调用redrawUI()函数) 下面提供了webApp代码。每次电子表格发生变化时,有人能帮我重新绘制图表吗 func

我有一个GAS,它显示一个来自谷歌电子表格的领导板(谷歌图表)

我希望每次电子表格更新时,图表都会刷新并显示最新的分数

每次有新分数时,电子表格都会计算新分数并更新列表。(此部件已使用气体正常工作)

似乎不起作用的是webApp没有重新加载/绘制图表

电子表格触发器
onChange()
调用
logChange()
函数,该触发器在电子表格更改时触发,并成功记录其进程的开始和结束(成功调用
redrawUI()
函数)

下面提供了webApp代码。每次电子表格发生变化时,有人能帮我重新绘制图表吗

function doGet(e) {
  var app = drawUI();
  return app;
}

function logChange(e) {
  Logger.log("Changed at: " + new Date());
  redrawUI();
  Logger.log("after redrawUI recall " + new Date());
  return app;
}

function redrawUI() {
  var app = drawUI();
  return app;
}

function drawChart() {
  var ss = SpreadsheetApp.openById('txS....w'); //Spreadsheet Key
  var hs = ss.getSheetByName('All Scores');
  var data = hs.getRange(1, 1, 11, 3);

  var barChart = Charts.newBarChart()
  .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,2]))
  .setDataTable(data)
  .setOption('axisTitlesPosition', 'in')
  .setOption('hAxis.minorGridlines.count', 9)
  .setOption('theme', 'maximized')
  .setOption('colors', ['#45818e'])
  .setLegendPosition(Charts.Position.NONE)
  .setYAxisTextStyle(Charts.newTextStyle().setFontName('Courier New').setFontSize(48))
  .setDimensions(1000, 800)
  .build();

  return barChart;
}

function drawUI() {
  var barChart = drawChart();

  var app = UiApp.createApplication();
  var mainPanel = app.createHorizontalPanel();
  var hsLabel = app.createLabel("THE Geek Game 2013")
                   .setStyleAttribute("font-size", "5em")
                   .setStyleAttribute("font-weight", "bold")
                   .setStyleAttribute("line-height", "2em");
  var subLabel = app.createLabel("Leader Board")
                   .setStyleAttribute("font-size", "3em")
                   .setStyleAttribute("font-weight", "bold")
  var vPanel = app.createVerticalPanel().setId("vPanel");

  mainPanel.add(vPanel).setSize("100%", "100%")
    .setCellHorizontalAlignment(vPanel, (UiApp.HorizontalAlignment.CENTER));
  vPanel.add(hsLabel).add(subLabel);
  vPanel.add(barChart).setSize("500", "100%");
  vPanel.setCellHorizontalAlignment(hsLabel, (UiApp.HorizontalAlignment.CENTER));
  vPanel.setCellHorizontalAlignment(subLabel, (UiApp.HorizontalAlignment.CENTER));

  app.add(mainPanel);
  app.createServerHandler("redrawUI");  
  return app;
}
如果您想查看当前应用程序的显示方式,请查看以下链接:

AFAIK除了在webApp本身中使用“计时器*”之外,没有用户操作就无法刷新webApp用户界面

我建议让电子表格绑定脚本中的onChange触发器在userProperties中设置一个“标志值”,并使用计时器*轮询该值,并在注意到更改时进行更新。您可以将刷新限制在一天中的特定时间,以避免配额限制


*注意:有关处理器触发器的计时器示例。

感谢Serge的回复。但是,表单提交不被视为用户操作吗?我忘了提到,电子表格连接到谷歌表单,每次提交表单时,电子表格都会更新分数,并触发电子表格的
onChange()
触发器。如何使用此用户操作重新绘制领导委员会?-感谢webapp是一个独立的应用程序,表单和UI实例之间没有可用的桥梁,这就是为什么我建议使用此复选框技巧。感谢Serge的技巧。它工作得很好,现在我能够在一段时间间隔内删除并重新绘制图表,这会导致图表消失,并每隔30秒显示一次新的结果(例如:)但是,我希望在这个视频的24m55处复制您在谷歌I/O视频中看到的效果()。侧边栏似乎正在使用UiApp,并显示一个动态图表(?),在每次提交表单时都会进行更新(可能会稍微延迟)。有人知道这是怎么做到的吗?我对上面的评论提出了一个单独的问题,因为这几乎是一个不同的问题。如果有人愿意回答上述评论,请在此处回答: