このサービスを使用すると、Google Charts Tools を使用してグラフを作成し、サーバー側でレンダリングできます。ウェブブラウザでグラフをレンダリングする場合は、代わりに Google Charts API を使用します。
この例では、基本的なデータ表を作成し、面グラフにデータを入力して、ウェブページに画像として追加します。
function doGet() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, 'Month')
.addColumn(Charts.ColumnType.NUMBER, 'In Store')
.addColumn(Charts.ColumnType.NUMBER, 'Online')
.addRow(['January', 10, 1])
.addRow(['February', 12, 1])
.addRow(['March', 20, 2])
.addRow(['April', 25, 3])
.addRow(['May', 30, 4])
.build();
var chart = Charts.newAreaChart()
.setDataTable(data)
.setStacked()
.setRange(0, 40)
.setTitle('Sales per Month')
.build();
var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart');
var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
var imageUrl = "data:image/png;base64," + encodeURI(imageData);
htmlOutput.append("Render chart server side: <br/>");
htmlOutput.append("<img border=\"1\" src=\"" + imageUrl + "\">");
return htmlOutput;
}
クラス
名前 | 概要 |
---|---|
AreaChartBuilder | 面グラフのビルダー。 |
BarChartBuilder | 棒グラフのビルダー。 |
Chart | 静止画像に変換できる Chart オブジェクト。 |
ChartHiddenDimensionStrategy | ソースの隠れたディメンションがグラフでどのように表されるかを列挙したものです。 |
ChartMergeStrategy | ソース内の複数の範囲をグラフで表する方法を列挙します。 |
ChartOptions | 高さや色など、Chart に現在設定されているオプションを公開します。 |
ChartType | グラフサービスでサポートされているグラフの種類。 |
Charts | スクリプトでグラフを作成するためのエントリ ポイント。 |
ColumnChartBuilder | 縦棒グラフのビルダー。 |
ColumnType | DataTable 内の列の有効なデータ型を列挙したものです。 |
CurveStyle | グラフの曲線のスタイルを列挙します。 |
DataTable | グラフで使用するデータテーブル。 |
DataTableBuilder | DataTable オブジェクトのビルダー。 |
DataTableSource | データを DataTable として表すことができるオブジェクトのインターフェース。 |
DataViewDefinition | グラフデータを可視化するためのデータビューの定義です。 |
DataViewDefinitionBuilder | DataViewDefinition オブジェクトのビルダー。 |
LineChartBuilder | 折れ線グラフのビルダー。 |
MatchType | 文字列値のマッチング方法を列挙します。 |
NumberRangeFilterBuilder | 番号範囲フィルタ オプションのビルダー。 |
Orientation | オブジェクトの向きの列挙型です。 |
PickerValuesLayout | 選択した値を選択ツール ウィジェットに表示する方法の列挙。 |
PieChartBuilder | 円グラフのビルダー。 |
PointStyle | 線に含まれるポイントのスタイルを列挙したものです。 |
Position | グラフ内の凡例の位置を列挙したものです。 |
ScatterChartBuilder | 散布図のビルダー。 |
StringFilterBuilder | 文字列フィルタ コントロールのビルダー。 |
TableChartBuilder | 表グラフのビルダー。 |
TextStyle | テキスト スタイル設定オブジェクト。 |
TextStyleBuilder | TextStyle オブジェクトの作成に使用されるビルダー。 |
AreaChartBuilder
Methods
BarChartBuilder
Methods
Chart
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
getAs(contentType) | Blob | このオブジェクト内のデータを、指定されたコンテンツ タイプに変換された blob として返します。 |
getBlob() | Blob | このオブジェクト内のデータを blob として返します。 |
getOptions() | ChartOptions | このグラフのオプション(高さ、色、軸など)を返します。 |
ChartHiddenDimensionStrategy
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
IGNORE_BOTH | Enum | デフォルト。グラフの非表示の列と非表示の行はスキップされます。 |
IGNORE_ROWS | Enum | グラフでは、非表示の行のみがスキップされます。 |
IGNORE_COLUMNS | Enum | グラフでは、非表示の列のみがスキップされます。 |
SHOW_BOTH | Enum | グラフの非表示の列や非表示の行はスキップされません。 |
ChartMergeStrategy
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
MERGE_COLUMNS | Enum | デフォルトです。 |
MERGE_ROWS | Enum | グラフでは複数の範囲の行が結合されます。 |
ChartOptions
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
get(option) | Object | このグラフに構成されたオプションを返します。 |
getOrDefault(option) | Object | このグラフに構成されたオプションを返します。 |
ChartType
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
TIMELINE | Enum | タイムライン グラフ。 |
AREA | Enum | 面グラフ |
BAR | Enum | 棒グラフ |
BUBBLE | Enum | バブルチャート。 |
CANDLESTICK | Enum | ローソク足チャート。 |
COLUMN | Enum | 縦棒グラフ |
COMBO | Enum | 複合グラフ |
GAUGE | Enum | ゲージグラフ。 |
GEO | Enum | マップチャート。 |
HISTOGRAM | Enum | ヒストグラム |
RADAR | Enum | レーダー チャート。 |
LINE | Enum | 折れ線グラフ |
ORG | Enum | 組織図 |
PIE | Enum | 円グラフ |
SCATTER | Enum | 散布図 |
SPARKLINE | Enum | スパークライン グラフ。 |
STEPPED_AREA | Enum | 階段面グラフ。 |
TABLE | Enum | 一覧表 |
TREEMAP | Enum | ツリーマップ グラフ。 |
WATERFALL | Enum | ウォーターフォール グラフ。 |
Charts
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
ChartHiddenDimensionStrategy | ChartHiddenDimensionStrategy | ソースの隠れたディメンションがグラフでどのように表されるかを列挙したものです。 |
ChartMergeStrategy | ChartMergeStrategy | ソース内の複数の範囲をグラフで表する方法を列挙します。 |
ChartType | ChartType | Charts サービスでサポートされるグラフタイプの列挙型。 |
ColumnType | ColumnType | DataTable 内の列の有効なデータ型を列挙したものです。 |
CurveStyle | CurveStyle | グラフの曲線のスタイルを列挙します。 |
PointStyle | PointStyle | 線に含まれるポイントのスタイルを列挙したものです。 |
Position | Position | グラフ内の凡例の位置を列挙したものです。 |
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
newAreaChart() | AreaChartBuilder | Google Chart Tools に関するドキュメントの説明に沿って、面グラフの作成を開始します。 |
newBarChart() | BarChartBuilder | Google Chart Tools に関するドキュメントの説明に沿って、棒グラフの作成を開始します。 |
newColumnChart() | ColumnChartBuilder | Google グラフツールのドキュメントの説明に従って、縦棒グラフの作成を開始します。 |
newDataTable() | DataTableBuilder | 空のデータテーブルを作成します。このテーブルでは、値を手動で設定できます。 |
newDataViewDefinition() | DataViewDefinitionBuilder | 新しいデータビュー定義を作成します。 |
newLineChart() | LineChartBuilder | Google Chart Tools に関するドキュメントの説明に沿って、折れ線グラフの作成を開始します。 |
newPieChart() | PieChartBuilder | Google グラフツールのドキュメントの説明に従って、円グラフの作成を開始します。 |
newScatterChart() | ScatterChartBuilder | Google グラフツールのドキュメントの説明に従って、散布図の作成を開始します。 |
newTableChart() | TableChartBuilder | Google グラフツールのドキュメントの説明に従って、表グラフの作成を開始します。 |
newTextStyle() | TextStyleBuilder | 新しいテキスト スタイル ビルダーを作成します。 |
ColumnChartBuilder
Methods
ColumnType
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
DATE | Enum | 日付値に対応します。 |
NUMBER | Enum | 数値に対応します。 |
STRING | Enum | 文字列値に対応します。 |
CurveStyle
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
NORMAL | Enum | 曲線のない直線です。 |
SMOOTH | Enum | 線の角度が滑らかになります。 |
DataTable
DataTableBuilder
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
addColumn(type, label) | DataTableBuilder | データテーブルに列を追加します。 |
addRow(values) | DataTableBuilder | データテーブルに行を追加します。 |
build() | DataTable | データテーブルをビルドして返します。 |
setValue(row, column, value) | DataTableBuilder | テーブル内に特定の値を設定します。 |
DataTableSource
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
getDataTable() | DataTable | このオブジェクト内のデータを DataTable として返します。 |
DataViewDefinition
DataViewDefinitionBuilder
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
build() | DataViewDefinition | このビルダーを使用して作成されたデータビュー定義オブジェクトをビルドして返します。 |
setColumns(columns) | DataViewDefinitionBuilder | データビューに含める列のインデックスを設定し、ロール列の情報を指定します。 |
LineChartBuilder
Methods
MatchType
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
EXACT | Enum | 完全一致のみ |
PREFIX | Enum | 値の先頭から始まる接頭辞を照合します |
ANY | Enum | 任意の部分文字列に一致 |
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
getName() | String | オプション JSON で使用するマッチタイプの名前を返します。 |
NumberRangeFilterBuilder
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
setMaxValue(maxValue) | NumberRangeFilterBuilder | 範囲の下限の上限値を設定します。 |
setMinValue(minValue) | NumberRangeFilterBuilder | 範囲の下限に対して許容される最小値を設定します。 |
setOrientation(orientation) | NumberRangeFilterBuilder | スライダーの向きを設定します。 |
setShowRangeValues(showRangeValues) | NumberRangeFilterBuilder | 選択した範囲の範囲を表示するスライダーの横にラベルを表示するかどうかを設定します。 |
setTicks(ticks) | NumberRangeFilterBuilder | 数値範囲フィルタのスライダーのつまみを合わせることができる目盛り(範囲バー内の固定位置)の数を設定します。 |
Orientation
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
HORIZONTAL | Enum | 横向き。 |
VERTICAL | Enum | 縦向き。 |
PickerValuesLayout
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
ASIDE | Enum | 選択した値は、値選択ツール ウィジェットの横に 1 行のテキストで表示されます。 |
BELOW | Enum | 選択した値は、ウィジェットの下に 1 行のテキストで表示されます。 |
BELOW_WRAPPING | Enum | 以下と似ていますが、選択ツールに収まらないエントリは新しい行に改行されます。 |
BELOW_STACKED | Enum | 選択した値はウィジェットの下の列に表示されます。 |
PieChartBuilder
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
build() | Chart | グラフを作成します。 |
reverseCategories() | PieChartBuilder | 領域軸で系列の描画を逆にします。 |
set3D() | PieChartBuilder | グラフを 3 次元に設定します。 |
setBackgroundColor(cssValue) | PieChartBuilder | グラフの背景色を設定します。 |
setColors(cssValues) | PieChartBuilder | グラフ内の線の色を設定します。 |
setDataSourceUrl(url) | PieChartBuilder | Google スプレッドシートなどの外部ソースからデータを取り込むために使用されるデータソースの URL を設定します。 |
setDataTable(tableBuilder) | PieChartBuilder | DataTableBuilder を使用して、グラフに使用するデータテーブルを設定します。 |
setDataTable(table) | PieChartBuilder | グラフの線と X 軸のラベルを含むデータ表を設定します。 |
setDataViewDefinition(dataViewDefinition) | PieChartBuilder | グラフに使用するデータビュー定義を設定します。 |
setDimensions(width, height) | PieChartBuilder | グラフのディメンションを設定します。 |
setLegendPosition(position) | PieChartBuilder | グラフに関する凡例の位置を設定します。 |
setLegendTextStyle(textStyle) | PieChartBuilder | グラフの凡例のテキスト スタイルを設定します。 |
setOption(option, value) | PieChartBuilder | このグラフの詳細オプションを設定します。 |
setTitle(chartTitle) | PieChartBuilder | グラフのタイトルを設定します。 |
setTitleTextStyle(textStyle) | PieChartBuilder | グラフのタイトルのテキスト スタイルを設定します。 |
PointStyle
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
NONE | Enum | 線ポイントを表示しません。 |
TINY | Enum | 小さい線ポイントを使用します。 |
MEDIUM | Enum | 線ポイントは中程度のサイズにします。 |
LARGE | Enum | 大きいサイズの線ポイントを使用します。 |
HUGE | Enum | 最もサイズの大きい線のポイントを使用します。 |
Position
プロパティ
プロパティ | 種類 | 説明 |
---|---|---|
TOP | Enum | グラフの上部。 |
RIGHT | Enum | グラフの右側。 |
BOTTOM | Enum | グラフの下。 |
NONE | Enum | 凡例は表示されません。 |
ScatterChartBuilder
Methods
StringFilterBuilder
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
setCaseSensitive(caseSensitive) | StringFilterBuilder | 照合で大文字と小文字を区別するかどうかを設定します。 |
setMatchType(matchType) | StringFilterBuilder | コントロールを正確な値のみに一致させるか(MatchType.EXACT )、値の先頭から始まる接頭辞(MatchType.PREFIX )、任意の部分文字列(MatchType.ANY )と照合するかを設定します。 |
setRealtimeTrigger(realtimeTrigger) | StringFilterBuilder | キーが押されたときにコントロールを一致させるか、入力フィールドの変更(フォーカスが失われるか Enter キーを押したとき)にのみコントロールを一致させるかを設定します。 |
TableChartBuilder
Methods
TextStyle
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
getColor() | String | テキスト スタイルの色を取得します。 |
getFontName() | String | テキスト スタイルのフォント名を取得します。 |
getFontSize() | Number | テキスト スタイルのフォントサイズを取得します。 |
TextStyleBuilder
Methods
メソッド | 戻り値の型 | 概要 |
---|---|---|
build() | TextStyle | このビルダーを使用して作成されたテキスト スタイル設定オブジェクトを作成して返します。 |
setColor(cssValue) | TextStyleBuilder | テキスト スタイルの色を設定します。 |
setFontName(fontName) | TextStyleBuilder | テキスト スタイルのフォント名を設定します |
setFontSize(fontSize) | TextStyleBuilder | テキスト スタイルのフォントサイズを設定します。 |