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

Question

Background - I have a spreadsheet with some data in it, I want to prepare and present some "dynamic charts" from this data, what I have thought is create some charts in script editor - HTML and then in the .gs code call this HTML file with a doGet function (after publishing - will be used by Internal members only)

A similar example of chart can be viewed here but when I add the HTML code to the HTML page and Javascript code as with script tags in the HTML page, nothing is displayed in the browser.

How can I implment this chart (or other with similar type) within google doGet function.

Code

<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");
});

Apologies, if I am not able to explain it properly. I am still a newbie in this...

(Note:- have deleted some part of actual code to make it short)

Answer 1

If I understood your question right, you need to use the HTML Service to display that code. Basically, your Apps Script project will have two files, one Code.gs and an html file. Then, use the following in Code.gs, assuming the file with the HTML is called "index.html".

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

Good luck using AmCharts, though - I've never tried that one. However, every other charts library I've tried has failed in HTML Service except for Piety. The Caja sanitizer prevents a lot of stuff from running.