Question

我一直在尝试使用HTML服务设置包含Google电子表格数据的信息中心。我的代码由4个不同的文件组成;

Main.gs（由doGet＆amp; getSsData组成）
Index.html（来自CSS和JS的getContent）
StyleSheet.html
JavaScript.html

当我执行我的代码并在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>

Google WebApp代码未执行;显示原始代码

0 个答案: