圖表在應用程序腳本谷歌電子表格

Question

我的第一篇文章，我必須承認，我不善於解釋的東西。讓我嘗試。

我在電子表格中添加了一個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後添加什麼，都不會發生。

不要刪除UiElement並重新創建具有相同ID的新元素 - 在UiApp或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; 
} 

最後7行的Show_chart改爲：

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; 
} 

不要忘記添加所有缺少的分號;。