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 Script プロジェクトには、Code.gs ファイルと html ファイルの 2 つのファイルがあります。次に、HTML を含むファイルが「index.html」と呼ばれると仮定して、Code.gs で次を使用します。

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

ただし、AmCharts を使用して頑張ってください。私はそれを試したことはありません。ただし、Piety を除いて、私が試した他のすべてのチャート ライブラリは HTML サービスで失敗しました。Cajaサニタイザーは、多くのものが実行されるのを防ぎます.

于 2013-07-26T12:42:48.977 に答える