应用脚本Google电子表格中的图表

Question

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

我在电子表格中有此Java代码，其中添加了一个UI，具有某些复选框和一个附加到UI的图表。 单击第一个（EDC）复选框时，范围（C2）变为true / false，更改数据中的图表值。

由于该图表不会自动更新，因此我决定删除现有图表并添加一个新图表。 首次运行代码时... UI随“填充图表”一起可见，当我单击复选框时，现有图表将被删除，而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函数后添加的任何内容根本不会发生。

不要删除具有相同ID的UiElement并重新创建一个新元素-非常糟糕的事情将发生在UiApp或GWT中，这是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;
}

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