Question

背景 - 我有一个包含一些数据的电子表格，我想准备并从这些数据中提供一些“动态图表”，我想到的是在脚本编辑器中创建一些图表 - HTML然后在.gs代码中使用doGet函数调用此HTML文件（发布后 - 仅由内部成员使用）

可以查看类似的图表示例here，但是当我将HTML代码添加到HTML页面并使用HTML页面中的脚本标记添加Javascript代码时，浏览器中不会显示任何内容。

如何在google doGet功能中实现此图表（或其他类似类型的图表）。

代码

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
var lineChartData = [{
    date: new Date(2009, 10, 2),
    value: 5},
{
    date: new Date(2009, 10, 3),
    value: 15},
{
    date: new Date(2009, 10, 4),
    value: 13},
{
    date: new Date(2009, 10, 5),
    value: 17},

{
    date: new Date(2009, 11, 4),
    value: 26}];

AmCharts.ready(function() {
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = lineChartData;
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.categoryField = "date";

// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
    chart.autoMargins = false;
    chart.marginRight = 0;
    chart.marginLeft = 0;
    chart.marginBottom = 22;
    chart.marginTop = 0;

// AXES
// category                
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
categoryAxis.axisAlpha = 0;

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 4;
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);

// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "line";
graph.valueField = "value";
graph.lineColor = "#D8E63C";
graph.customBullet = "http://www.amcharts.com/lib/images/star.gif"; // bullet for all          data points
graph.bulletSize = 14; // bullet image should be a rectangle (width = height)
graph.customBulletField = "customBullet"; // this will make the graph to display custom      bullet (red star)
chart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);

// WRITE
chart.write("chartdiv");
});

道歉，如果我无法正确解释。我仍然是这个新手...

（注意： - 删除了部分实际代码以使其缩短）

Answer 1

如果我理解你的问题，你需要使用HTML Service来显示该代码。基本上，您的Apps脚本项目将有两个文件，一个Code.gs和一个html文件。然后，在Code.gs中使用以下内容，假设带有HTML的文件被调用＆＃34; index.html＆＃34;。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

使用AmCharts祝你好运 - 我从来没有尝试过那个。但是，除了Piety之外，我尝试过的所有其他图表库在HTML服务中都失败了。 Caja sanitizer阻止了很多东西的运行。

Google脚本中的Amcharts（通过电子表格）

1 个答案: