我一直在尝试使用HTML服务设置包含Google电子表格数据的信息中心。我的代码由4个不同的文件组成;
当我执行我的代码并在Web应用程序中运行它时,它并没有给我一个仪表板,而是显示我的原始代码作为输出。 (JS和CSS原始)
我一直在寻找不同的解决方案,例如this和this,但尽管在那里提供了解决方案,但我无法使其发挥作用。
这是我的一些代码
main.gs
function doGet() {
var HTML = HtmlService.createTemplateFromFile("Index");
return HTML
.evaluate()
.setTitle('Dashboard demo')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getSpreadsheetData () {
var sheetId = ""
var data = SpreadsheetApp.openById(sheetId).getSheetByName("Leadverwerking").getDataRange().getValues();
Logger.log(data);
return (data.length > 1) ? data : null;
}
索引
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src ="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<?= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
</head>
<body>
<div>
**content here**
</div>
<?= HtmlService.createHtmlOutputFromFile("JavaScript").getContent(); ?>
</body>
</html>
所以我认为这与 getContent 函数和这行代码的位置有关,但我无法弄清楚我做错了什么。任何想法为什么它不起作用?先感谢您!
修改
我已经取代了我的
<?= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
<?= HtmlService.createHtmlOutputFromFile("JavaScript").getContent(); ?>
与
<?!= include('Stylesheet'); ?>
<?!= include('JavaScript'); ?>
并在我的main.gs中添加了一个函数
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
现在webApp根本没有显示任何内容..但我想代码会被解析? 仍然没有空白输出的解决方案。
包含JS
<script>
// Load the Visualization API and desired package
google.load("visualization", "1.0", {"packages":["controls"]});
$(function() {
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(sendQuery);
});
function sendQuery() {
google.script.run
.withSuccesHandler(drawDashboard)
.withFailureHandler(function(msg) {
// Respond to failure conditions here.
$('#main-heading').text(msg);
$('#main-heading').addClass("error");
$('#error-message').show();
})
.getSpreadsheetData();
}
// Callback function to generate visualization using data in response parameter
function drawDashboard(response) {
$('#main-heading').addClass("hidden");
if(response == null) {
alert("Error: Invalid source data")
return;
}
else {
var data = google.visualization.arrayToDataTable(response,false);
var dashboard = new google.visualization.Dashboard(document.getElementsById("dashboard-div"));
var pieChart = new google.visualization.ChartWrapper ({
"chartType": "Piechart",
"containerId": "piechart-div",
// The pie chart will use the columns 'toelichting 1' and 'Beller'
// out of all the available ones.
'view" : { "columns": [1, 8]}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table-div'
});
var tlSlider = new google.visualization.ControlWrapper({
"controlType" : "NumberRangeFilter",
"containerId" : "slider-div",
"options": {
"filterColumnLabel": "Toelichting"
}
});
var beller = new google.visualization.ControlWrapper({
"controlType": "CategoryFilter",
"containerId": "selector-div",
"options": {
"filterColumnLabel": "Beller"
}
});
// afhankelijkheden opzetten tussen charts en controls
dashboard.bind(tlSlider, [pieChart,table]);
dashboard.bind(beller, [pieChart,table]);
// draw alle visualizations in het dashboard
dashboard.draw(data);
}
}
</script>
包含CSS
<!DOCTYPE html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.result-display {
margin-left: 15 px;
font-size: 125%;
}
.error {
color: #FF0000;
}
.hidden {
display: none;
}
.google-visualization-controls-label {
margin-left: 20px;
}
#dashboard-div {
width: 800px;
}
#control-div {
margin: 70px;
}
#charts-div {
margin: 10px;
}
#slider-div {
float:left;
}
#selector-div {
}
#piechart-div {
width: 50%;
height: 250px;
float:left;
}
#table-div {
width: 50%;
float:right;
}
</style>