谷歌腳本中的Amcharts（通過電子表格）

背景 - 我有一個包含一些數據的電子表格，我想準備和呈現這些數據中的一些「動態圖表」，我認爲是在腳本編輯器中創建一些圖表 - HTML然後在.gs代碼中用doGet函數調用這個HTML文件（在發佈後 - 將僅供內部成員使用）谷歌腳本中的Amcharts（通過電子表格）

圖表的類似示例可以被看作here，但是當我將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"); 
});

道歉，如果我不能夠正確地解釋它。我仍然在這個新手...

（注： - 已刪除的實際代碼的一些部分，使之短）

來源

2013-07-26 Vasim

如果我明白你的問題的權利，你需要使用HTML Service來顯示碼。基本上，您的Apps腳本項目將有兩個文件，一個Code.gs和一個html文件。然後，在Code.gs中使用以下內容，假定帶有HTML的文件被稱爲「index.html」。

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

使用AmCharts的好運，但 - 我從來沒有嘗試過那一個。但是，除了Piety，我嘗試過的每個其他圖表庫都失敗了。 Caja sanitizer阻止了很多東西的運行。

來源

2013-07-26 12:42:48 Fred

感謝Fred ....修改代碼後，它仍然無法正常工作...我認爲它是因爲Caja阻止運行的東西...有沒有其他方法可以在HTML服務中插入圖表並通過它調用它們的doGet。 – Vasim

谷歌腳本中的Amcharts（通過電子表格）

回答

相關問題