0

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

可以在此处查看类似的图表示例，但是当我将 HTML 代码添加到 HTML 页面和 Javascript 代码与 HTML 页面中的脚本标记一样时，浏览器中没有显示任何内容。

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

抱歉，如果我无法正确解释。我还是这方面的新手...

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

4

1 回答 1

0

如果我正确理解了您的问题，您需要使用HTML 服务来显示该代码。基本上，您的 Apps 脚本项目将有两个文件，一个 Code.gs 和一个 html 文件。然后，在 Code.gs 中使用以下内容，假设带有 HTML 的文件名为“index.html”。

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

不过，祝你使用 AmCharts 好运——我从未尝试过。但是，我尝试过的所有其他图表库在 HTML 服务中都失败了，除了 Piety。Caja sanitizer可以防止很多东西运行。

于 2013-07-26T12:42:48.977 回答