javascript - 使用 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

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

此外，为了更加清晰起见，这是我尝试创建的一个较大仪表板的简化片段，该仪表板填充两个图表。

如果它有用，这里是我尝试使用的整段代码(表格图表按本示例中的预期填充):

代码:

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

您可能需要注意:

The UI service was deprecated on December 11, 2014. To create user interfaces, use the HTML service instead.

幸运的是，有一个教程“Converting from UiApp + Chart Service to Html Service + Google Visualization API”。

For users of Google Apps Script, there are two alternatives for visualizing data:

1. Continue using Charts + UiApp. While deprecated and not supported for auto-completion in the editor, UiApp still works. There has been no announcement that it will actually be shut down… yet.
2. Follow Google’s recommendation, and use HtmlService instead. A feature request to have Charts supported by the HtmlService has been declined. So this seemingly-simple recommendation entails the additional requirement that you use Google’s other Charts offering, also known as the Google Visualization API, or GViz.

希望这有帮助