时间戳

首页 > 解决方案 > 如何将二维数组传递给谷歌图表 html

html - 如何将二维数组传递给谷歌图表 html

问题描述

我有由谷歌工作表脚本生成的二维数组：[Steve, 2],[Bob, 101],[Anna, 78] 等。

  var t = HtmlService.createTemplateFromFile('ActivityChart'); // Modified
   t.DataForChart = (newdata_03);
   html = t.evaluate().setWidth(950).setHeight(600); // Added
   SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
   .showModalDialog(html,' ');

我需要将其传递给：

 <!DOCTYPE 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(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],      //need to replace it with my array
      ['Work',     11],               //need to replace it with my array
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

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

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>

如果您能提供帮助，我将不胜感激，因为我的 html 非常薄弱。

标签： htmlgoogle-apps-script

解决方案

我相信你的情况和目标如下。

  • 您问题中的 HTML 和 Javascript 是ActivityChart.
  • 在您的脚本中，newdata_03oft.DataForChart = (newdata_03);是[["Steve", 2], ["Bob", 101], ["Anna", 78],,,].
  • 您想将此二维数组发送到 HTML 端，并将其与google.visualization.arrayToDataTable.

对于这个，这个修改怎么样？在此修改中，使用了 scriptlet。请修改ActivityChart您的 HTML 和 Javascript 如下。在这种情况下，我没有修改 Google Apps 脚本端。

从：

var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],      //need to replace it with my array
  ['Work',     11],               //need to replace it with my array
  ['Eat',      2],
  ['Commute',  2],
  ['Watch TV', 2],
  ['Sleep',    7]
]);

到：

<? const str = JSON.stringify(DataForChart); ?>
let ar = JSON.parse(<?= str ?>);
ar.unshift(["header1", "header2"]);
var data = google.visualization.arrayToDataTable(ar);

笔记：

  • 根据您的问题，我认为二维数组可能没有标题行。所以我使用添加了标题行ar.unshift(["header1", "header2"])。如果您的数据包含标题行，请删除它。

参考：

推荐阅读