Question

一直在尝试按照指南here创建饼图，然后在Google Apps脚本中开发一些仪表板功能。我发现当你实现调用脚本函数时（在示例中它将是drawChart（）函数），被视为“活动内容”，如here所示。我已经看到了其他不使用HTML的示例，但这些示例似乎都需要使用已经过折旧的UiApp类。那么，在Google Apps脚本中获取仪表板/图表功能以获得HTTPS安全证书的唯一方法是什么？如果是这种情况，似乎相当有限。我看到一两个帖子提到类似的挫折只得到一个白色的屏幕，我相信这是由于HTTPS的限制。

最初我没有发布代码，因为我觉得这里的问题很清楚。这是我的代码。我还尝试了一个简单的HTML“Hello World”文件，它没有任何函数/脚本，并且有效。以下是与我的Google表格相关的脚本：

 function OpenChart(){
    var html = HtmlService.createHtmlOutputFromFile('DummyChart');
    SpreadsheetApp.getUi().showModalDialog(html, "Statistics");
    }

以下是它调用的HTML文件：

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      //Load charts package and visualization API
      google.charts.load('current', {'packages': ['corechart']});

      google.charts.setOnLoadCallback(MakeChart);

      //Here is the script I think could be causing a problem
      function MakeChart() 
      {
      var ss = SpreadsheetApp.getActive();
      var s = ss.getSheets();
      var s = sheets[1];
      var UI = SpreadsheetApp.getUi();
      var response = UI.prompt("Please enter the first cell in the category").getResponseText();
      var ir = s.getRange(response);
      var n= 0;
      var stored = [];
      stored.push(["Income Category", "Frequency"]);
      while (ir.getValue()!= "") {
       n = n +1;
       ir = ir.offset(1, 0);
       }
       //Above we just set n, below we use n to fill our array
       ir = ir.offset(-n,0)

       for(i =0; i<n;i++) {
        stored.push([ir.getValue(),ir.offset(n+2,0).getValue()]);
        ir = ir.offset(1, 0);
       }
       var data = google.visualization.arrayToDataTable([
       stored[]]);
       /*I tried to also load data here directly as is seen on the pie chart    example I used. This didn't have any affect*/


       var options = { 'chartArea:backgroundColor': "Azure",
       'is3D': true,
       'title': 'Test Chart'};

        //Now instantiate it

        var chart = new     google.visualization.PieChart(document.getElementById('chartDiv'));
        chart.draw(data, options);

      }

     </script>

  </head>
  <body>
     <div id="chartDiv" style="width: 450px; height: 300px;"> </div>
  </body>
</html>

任何帮助表示感谢。

Answer 1

以下是一个如何运作的简单示例。我坚持使用基本示例，并将饼图示例中的值添加到电子表格中。客户端需要调用服务器端来获取数据。这是google.script.run完成的。您可以修改getData（）以满足您的需求。

code.gs：

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu("charts").addItem("piechart", "openPieChart").addToUi()
}


function openPieChart(){
  var html = HtmlService.createHtmlOutputFromFile("piechart");
  var ui = SpreadsheetApp.getUi();
  ui.showModalDialog(html, "piechart")
}

function getData(){      
 return SpreadsheetApp.getActiveSheet().getDataRange().getValues()
}

piechart.html

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(function(){google.script.run.withSuccessHandler(drawChart).getData()});

      function drawChart(values) {

        var data = google.visualization.arrayToDataTable(values);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Google Apps不允许在HTML中使用“活动内容”，并且UiApp类已经过折旧

1 个答案: