应用程序脚本谷歌电子表格中的图表

Question

我的第一篇文章，我必须承认，我不善于解释东西。让我试试。

我在电子表格中有这个java代码，它添加了一个用户界面，有一些复选框和＆amp;附加到UI的图表。 单击第一个（EDC）复选框时，范围（C2）变为true / false，更改数据中的图表值。

由于图表没有自动更新，我决定删除现有图表并添加一个新图表。当代码第一次运行时...... UI与Populate图表一起可见，当我单击复选框时，现有图表会被删除，但populate_chart函数却没有。谁能帮我？？？几乎是我的第一个代码（如此大）。

function Show_chart() {

var ss = SpreadsheetApp.getActive();

var calc = ss.getSheetByName("Calculations");

var data = calc.getRange(6, 19, 22, 2)

//  var values = data.getValues()

//   for (var row in values) {

//   for (var col in values[row]) {

//     Logger.log(values[row][col]);

//   }

//   }


var app = UiApp.createApplication().setHeight(600).setWidth(1200).setTitle("Attrition Report");

var mygrid = app.createGrid(7, 2)

var label1 = mygrid.setWidget(0, 0, app.createLabel("EDC Project"));

var label2 = mygrid.setWidget(1, 0, app.createLabel("Customer Project"));

var label3 = mygrid.setWidget(2, 0, app.createLabel("Support"));



var checkbox1 = mygrid.setWidget(0, 1, app.createCheckBox().setName("EDC"));

var checkbox2 = mygrid.setWidget(1, 1, app.createCheckBox().setName("CP"));

var checkbox3 = mygrid.setWidget(2, 1, app.createCheckBox().setName("Support"));


checkbox1.addClickHandler(app.createServerHandler("myClickHandler"));

var panel = app.createVerticalPanel();

panel.add(mygrid);

app.add(panel);

populate_charts()

ss.show(app);

}

function populate_charts(){ 

var ss = SpreadsheetApp.getActive();

var app = UiApp.getActiveApplication();

var calc = ss.getSheetByName("Calculations");

var data = calc.getRange(6, 19, 22, 2);

//1200 300

var chart = Charts.newLineChart().setDimensions(300, 100)

.setDataTable(data)

.build();

var chartpanel = app.createHorizontalPanel().setId("tbd");

chartpanel.add(chart);

return app.add(chartpanel);

}


function myClickHandler(e) {

var ss = SpreadsheetApp.getActive();

var calc = ss.getSheetByName("Calculations");

 var app = UiApp.getActiveApplication();

//  var data = calc.getRange(6, 19, 22, 2)

 var chvalue  = e.parameter.EDC;

 calc.getRange("C2").setValue(chvalue);

 var del = app.getElementById("tbd");

 return app.remove(del);

 populate_charts()


  } 

...谢谢

Answer 1

您应该在函数populate_charts();中 return app.remove(del);之前致电myClickHandler 。 无论你在函数return之后添加什么，都不会发生。

不要删除UiElement并重新创建具有相同Id的新元素 - 在UiApp或GWI中会发生非常糟糕的事情，这是UiApp背后的机制。

您可以简化populate_charts：

function populate_charts(app, sSheet){ 
  var data = sSheet.getSheetByName("Calculations").getRange(6, 19, 22, 2);
  var chart = Charts.newLineChart().setDimensions(300, 100)
                .setDataTable(data).build();
  return chart;
}

myClickHandler也可以减少：

function myClickHandler(e) {
  var app = UiApp.getActiveApplication();
  var chvalue  = e.parameter.EDC;
  var sSheet = SpreadsheetApp.getActive();
  sSheet.getSheetByName("Calculations").getRange("C2").setValue(chvalue);
  app.getElementById("chartContainer").clear().add(populate_charts(app, sSheet));
  return app;
}

Show_chart的最后7行更改为：

  app.add(mygrid.setId('grid'));
  app.add(app.createFlowPanel()
             .setId('chartContainer').add(populate_charts(app, ss)));
  checkbox1.addClickHandler(
        app.createServerHandler('myClickHandler')
          .addCallbackElement(app.getElementById('grid'))
          .addCallbackElement(app.getElementById('chartContainer')));
  return app;
}

不要忘记添加所有缺失的分号;。