Fatal编程技术网
  • html/
  • 在HTML页面中插入谷歌图表。谷歌应用程序脚本

在HTML页面中插入谷歌图表。谷歌应用程序脚本

html charts google-apps-script google-sheets

在HTML页面中插入谷歌图表。谷歌应用程序脚本,html,charts,google-apps-script,google-sheets,Html,Charts,Google Apps Script,Google Sheets,这就是问题所在。我试图创建一个带有图表的htmloutput，并将其插入谷歌网站。代码运行得很好，但我不知道如何更改图表数据并将数据变量替换为。代码是： 代码.gs function doGet() { return HtmlService .createTemplateFromFile('index') .evaluate(); } function getData() { var ss =SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-

这就是问题所在。我试图创建一个带有图表的htmloutput，并将其插入谷歌网站。代码运行得很好，但我不知道如何更改图表数据并将数据变量替换为。代码是：

代码.gs

function doGet() {
return HtmlService
  .createTemplateFromFile('index')
  .evaluate();
}

function getData() {
var ss =SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4');
var sheet = ss.getSheetByName("DATOS");
var hojanotas = ss.getSheetByName("NOTAS");
var last = sheet.getLastRow();
var datanotas = hojanotas.getDataRange().getValues();
var datas = sheet.getDataRange();
var lastnotas = hojanotas.getLastRow();
var datos = datas.getValues();
var email = Session.getActiveUser().getEmail();
var emaile = email.toString();
Logger.log(datos);
Logger.log(emaile);
  for (var i = 0; i < last; i++){
  var alumno = datos[i][0];
  var user = datos[i][3];

  Logger.log(alumno);
  Logger.log(user);


    if(emaile == user){
      for(var j = 2; j< lastnotas; j++){
        var student = datanotas[j][0];
        if(student == alumno){
          var data = hojanotas.getRange(j+1, 1, 1, 11).getValues();
          Logger.log(student);
          Logger.log(data);


     }}}}
var hojasalida = ss.getSheetByName("SALIDA").getRange(3,1,1,11).setValues(data);

     }
和index.html

<html>
<head>
<body>

<style>.header{background:lightblue}
td{border-top:solid black 2px} .corner{border:0}
td{font-size:12px}
tr{font-size:12px}
div{font-size:24px}</style>
<? var B3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("B3").getValue();
var C3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("C3").getValue();
var D3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("D3").getValue();
var E3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("E3").getValue();
var F3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("F3").getValue();
var G3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("G3").getValue();
var H3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("H3").getValue();
var I3 = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("I3").getValue();
var B33 = parseInt(B3);

?>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Asignatura', 'Anterior', 'Esta semana'],
      ['Matemáticas',  <?=B3?>,     6],
      ['Lengua',  6,     5],
      ['Naturales',  5,       6],
      ['Inglés',  7,      7]
    ]);

    var options = {

      title: 'Notas del Alumno',
      vAxis: {title: 'Asignaturas',  titleTextStyle: {color: 'black'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
 </script>

<? var data = SpreadsheetApp
.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4')
.getSheetByName("SALIDA")
.getDataRange()
.getValues(); 
var alumno = SpreadsheetApp.openById('1W3YA2jsuJELYsljy96p5-SMHTlqd0WK55h3bEqA2xR4').getSheetByName("SALIDA").getRange("A3").getValue();
?>
<div><?= alumno ?></div>
<table width="600" border="1" align="center">

<caption>
Notas del Alumno
</caption>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>

  <? for (var j = 0; j < data[i].length; j++) { ?>
    <td width="80" ><?= data[i][j] ?></td>
  <? } ?>
</tr>
<? } ?>
</table>
</head>



<div id="chart_div" style="width: 900px; height: 500px;"></div>

因此，在函数DrawChart的部分{在html部分等等，a想调用一些变量来代替数据。我用scriplet尝试了一下，但是没有用。它说：轴0不能是字符串或类似的东西

谢谢。

我认为这条线路有一个问题：

<div><?= alumno ?></div>
如果要将变量alumno的值注入到div标记中，则需要在加载HTML时运行一些JavaScript

window.onload=function(){
  console.log("This onload did run");
  if (alumno != "") {
    document.getElementById('idAlumno').textContent = alumno;
  };
};
查看浏览器中的开发人员工具，并打开浏览器控制台以查看是否存在任何错误。可能存在一个不相关的错误，该错误会在HTML呈现到达表之前终止它

window.onload=function(){
  console.log("This onload did run");
  if (alumno != "") {
    document.getElementById('idAlumno').textContent = alumno;
  };
};