使用 Google Apps 脚本和 UiApp() 填充饼图

Question

尝试使用电子表格中的 Google Apps 脚本构建饼图，但到目前为止没有任何效果。

这是我现在拥有的代码：

代码：

function doGet() {

var ss   =   SpreadsheetApp.openById('1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE');
var data = ss.getDataRange();

/* Build filters to analyze charts */
var neighborhoodFilter   = Charts.newCategoryFilter().setFilterColumnIndex(2).build();
var attendanceFilter     = Charts.newCategoryFilter().setFilterColumnIndex(3).build();

var pieChart   =  Charts.newPieChart()
                 .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([2,3]))
               .build();


var dashboard  =  Charts.newDashboardPanel().setDataTable(data)
               .bind([neighborhoodFilter, attendanceFilter], [pieChart])
               .build();

var app         = UiApp.createApplication();
var filterPanel = app.createVerticalPanel();
var chartPanel  = app.createHorizontalPanel();
filterPanel.add(neighborhoodFilter).add(attendanceFilter).setSpacing(10);
chartPanel.add(pieChart).setSpacing(10);


dashboard.add(app.createVerticalPanel().add(filterPanel).add(chartPanel));
app.add(dashboard);
return app;
}

它被部署为一个网络应用程序，可以在这里看到：https://script.google.com/macros/s/AKfycbyQMz3dSYqNLBEusCs4-_lB8u9wvy-P9Q_HXKn-oCH8b3gqgb4E/exec

我通过调试器运行它，一切正常。

此外，为了更清楚起见，这是一个简化的 sn-p，来自我正在尝试创建的一个更大的仪表板，它填充两个图表。

如果有用的话，这里是我尝试使用的整段代码（本示例中的表格按预期填充）：

代码：

function doGet() {

var ss   = SpreadsheetApp.openById('1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE');
var data = ss.getDataRange();

/* Build filters to analyze charts */
var nameFilter           = Charts.newStringFilter().setFilterColumnIndex(1).build();
var neighborhoodFilter   = Charts.newCategoryFilter().setFilterColumnIndex(2).build();
var attendanceFilter     = Charts.newCategoryFilter().setFilterColumnIndex(3).build();
var transportationFilter = Charts.newCategoryFilter().setFilterColumnIndex(4).build();
var travelFilter         = Charts.newCategoryFilter().setFilterColumnIndex(5).build();
var companyFilter        = Charts.newNumberRangeFilter().setFilterColumnIndex(6).build();

/* Build charts and dashboard object */
var tableChart =  Charts.newTableChart()
               .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,2,3,4,5,6]))
               .build();


var pieChart   =  Charts.newPieChart()
               .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([2,3]))
               .build();

var dashboard  =  Charts.newDashboardPanel().setDataTable(data)
               .bind([neighborhoodFilter, attendanceFilter, nameFilter, transportationFilter, travelFilter, companyFilter], [tableChart, pieChart])
               .build();

var app         = UiApp.createApplication();
var filterPanel = app.createVerticalPanel();
var chartPanel  = app.createHorizontalPanel();


 filterPanel.add(neighborhoodFilter).add(attendanceFilter).add(nameFilter).add(transportationFilter).add(travelFilter).add(companyFilter).setSpacing(10);
chartPanel.add(pieChart).add(tableChart).setSpacing(10);

dashboard.add(app.createVerticalPanel().add(filterPanel).add(chartPanel));
app.add(dashboard);
return app;
}

链接可以在这里看到工作表图表：https://script.google.com/macros/s/AKfycbwn66EMbZsrCNyuRCYMk6ERyXhKGNt3_m1i5VIj_ITzWxAnb1vw/exec

任何帮助将不胜感激。谢谢。

Answer 1

您可能需要注意：

UI 服务是deprecated on December 11, 2014。要创建用户界面，请改用HTML service。

还好有教程“Converting from UiApp + Chart Service to Html Service + Google Visualization API”。

对于 Google Apps 脚本的用户，可视化数据有两种选择：

1. 继续使用 Charts + UiApp。虽然已弃用且不支持在编辑器中自动完成，但 UiApp 仍然有效。目前还没有宣布它实际上会被关闭……但是。
2. 遵循 Google 的建议，改用 HtmlService。 A feature request 具有 HtmlService 支持的图表已被拒绝。因此，这个看似简单的建议需要您使用 Google 的其他 Charts offering，也称为 Google Visualization API，或 GViz。

希望对你有帮助