このサービスを使用すると、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;
}クラス
| 名前 | 概要 |
|---|---|
Area | 面グラフのビルダー。 |
Bar | 棒グラフのビルダー。 |
Chart | Chart オブジェクト。静止画像に変換できます。 |
Chart | ソースの非表示ディメンションがグラフでどのように表現されるかの列挙型。 |
Chart | ソース内の複数の範囲がグラフでどのように表現されるかの列挙。 |
Chart | 高さや色など、Chart に現在構成されているオプションを公開します。 |
Chart | Charts サービスでサポートされているグラフの種類。 |
Charts | スクリプトでグラフを作成するためのエントリ ポイント。 |
Column | 縦棒グラフのビルダー。 |
Column | Data の列の有効なデータ型の列挙。 |
Curve | グラフの曲線のスタイルの列挙。 |
Data | グラフで使用するデータテーブル。 |
Data | DataTable オブジェクトのビルダー。 |
Data | データを Data として表すことができるオブジェクトのインターフェース。 |
Data | グラフデータを可視化するためのデータビュー定義。 |
Data | Data オブジェクトのビルダー。 |
Line | 折れ線グラフのビルダー。 |
Match | 文字列値の照合方法の列挙型。 |
Number | 数値範囲フィルタ コントロールのビルダー。 |
Orientation | オブジェクトの向きの列挙型。 |
Picker | 選択した値をピッカー ウィジェットに表示する方法の列挙型。 |
Pie | 円グラフのビルダー。 |
Point | 線内のポイントのスタイルの列挙。 |
Position | グラフ内の凡例の位置の列挙型。 |
Scatter | 散布図のビルダー。 |
String | 文字列フィルタ コントロールのビルダー。 |
Table | テーブルグラフのビルダー。 |
Text | テキスト スタイル構成オブジェクト。 |
Text | Text オブジェクトの作成に使用されるビルダー。 |
AreaChartBuilder
メソッド
BarChartBuilder
メソッド
Chart
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
get | Blob | このオブジェクト内のデータを、指定されたコンテンツ タイプに変換された Blob として返します。 |
get | Blob | このオブジェクト内のデータを blob として返します。 |
get | Chart | このグラフのオプション(高さ、色、軸など)を返します。 |
ChartHiddenDimensionStrategy
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
IGNORE_BOTH | Enum | デフォルト。グラフは非表示の列と非表示の行をスキップします。 |
IGNORE_ROWS | Enum | グラフでは非表示の行のみがスキップされます。 |
IGNORE_COLUMNS | Enum | グラフでは非表示の列のみがスキップされます。 |
SHOW_BOTH | Enum | グラフでは、非表示の列や非表示の行はスキップされません。 |
ChartMergeStrategy
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
MERGE_COLUMNS | Enum | デフォルト。 |
MERGE_ROWS | Enum | グラフは複数の範囲の行を結合します。 |
ChartOptions
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
get(option) | Object | このグラフの構成済みオプションを返します。 |
get | 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
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
Chart | Chart | ソースの非表示ディメンションがグラフでどのように表現されるかの列挙型。 |
Chart | Chart | ソース内の複数の範囲がグラフでどのように表現されるかの列挙。 |
Chart | Chart | Charts サービスでサポートされているグラフの種類の列挙。 |
Column | Column | Data の列の有効なデータ型の列挙。 |
Curve | Curve | グラフの曲線のスタイルの列挙。 |
Point | Point | 線内のポイントのスタイルの列挙。 |
Position | Position | グラフ内の凡例の位置の列挙型。 |
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
new | Area | Google Chart Tools のドキュメントの説明に沿って、面グラフの作成を開始します。 |
new | Bar | Google Chart Tools のドキュメントの説明に沿って、棒グラフの作成を開始します。 |
new | Column | Google Chart Tools のドキュメントの説明に沿って、縦棒グラフの作成を開始します。 |
new | Data | 空のデータテーブルを作成します。このデータテーブルの値は手動で設定できます。 |
new | Data | 新しいデータビュー定義を作成します。 |
new | Line | Google Chart Tools のドキュメントで説明されているように、折れ線グラフの作成を開始します。 |
new | Pie | Google Chart Tools のドキュメントの説明に沿って、円グラフの作成を開始します。 |
new | Scatter | Google Chart Tools のドキュメントで説明されているように、散布図の作成を開始します。 |
new | Table | Google Chart Tools のドキュメントの説明に沿って、表グラフの作成を開始します。 |
new | Text | 新しいテキスト スタイル ビルダーを作成します。 |
ColumnChartBuilder
メソッド
ColumnType
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
DATE | Enum | 日付値に対応します。 |
NUMBER | Enum | 数値に対応します。 |
STRING | Enum | 文字列値に対応します。 |
CurveStyle
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
NORMAL | Enum | 曲線なしの直線。 |
SMOOTH | Enum | 線の角度が平滑化されます。 |
DataTable
DataTableBuilder
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
add | Data | データテーブルに列を追加します。 |
add | Data | データテーブルに行を追加します。 |
build() | Data | データテーブルをビルドして返します。 |
set | Data | テーブルに特定の値が設定されます。 |
DataTableSource
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
get | Data | このオブジェクト内のデータを DataTable として返します。 |
DataViewDefinition
DataViewDefinitionBuilder
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
build() | Data | このビルダーを使用して作成されたデータビュー定義オブジェクトをビルドして返します。 |
set | Data | データビューに含める列のインデックスを設定し、ロール列の情報を指定します。 |
LineChartBuilder
メソッド
MatchType
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
EXACT | Enum | 完全一致の値のみ |
PREFIX | Enum | 値の先頭から始まる接頭辞を照合する |
ANY | Enum | いずれかの部分文字列に一致 |
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
get | String | オプションの JSON で使用するマッチタイプの名前を返します。 |
NumberRangeFilterBuilder
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
set | Number | 範囲の下限の最大許容値を設定します。 |
set | Number | 範囲の下限の最小許容値を設定します。 |
set | Number | スライダーの向きを設定します。 |
set | Number | スライダーの横に、選択した範囲の範囲を示すラベルを表示するかどうかを設定します。 |
set | Number | 数値範囲フィルタのスライダーのつまみが配置できる目盛り(範囲バー内の固定位置)の数を設定します。 |
Orientation
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
HORIZONTAL | Enum | 画面の向きを横にする。 |
VERTICAL | Enum | 縦向き。 |
PickerValuesLayout
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
ASIDE | Enum | 選択した値は、値選択ウィジェットの横の 1 行のテキストに表示されます。 |
BELOW | Enum | 選択した値は、ウィジェットの下の 1 行のテキストに表示されます。 |
BELOW_WRAPPING | Enum | 以下と同様ですが、選択ツールに収まらないエントリは改行されます。 |
BELOW_STACKED | Enum | 選択した値は、ウィジェットの下の列に表示されます。 |
PieChartBuilder
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
build() | Chart | グラフを作成します。 |
reverse | Pie | ドメイン軸の系列の描画を反転します。 |
set3D() | Pie | グラフを 3 次元に設定します。 |
set | Pie | グラフの背景色を設定します。 |
set | Pie | グラフの線の色を設定します。 |
set | Pie | Google スプレッドシートなどの外部ソースからデータを取得するために使用されるデータソースの URL を設定します。 |
set | Pie | DataTableBuilder を使用して、グラフに使用するデータテーブルを設定します。 |
set | Pie | グラフの線と X 軸ラベルを含むデータテーブルを設定します。 |
set | Pie | グラフに使用するデータビューの定義を設定します。 |
set | Pie | グラフのディメンションを設定します。 |
set | Pie | グラフに対する凡例の位置を設定します。 |
set | Pie | グラフの凡例のテキスト スタイルを設定します。 |
set | Pie | このグラフの詳細オプションを設定します。 |
set | Pie | グラフのタイトルを設定します。 |
set | Pie | グラフのタイトルのテキスト スタイルを設定します。 |
PointStyle
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
NONE | Enum | 折れ線グラフのポイントを表示しない。 |
TINY | Enum | 小さな線ポイントを使用します。 |
MEDIUM | Enum | 中サイズの線ポイントを使用します。 |
LARGE | Enum | 大きなサイズの線ポイントを使用します。 |
HUGE | Enum | 最大のサイズの線ポイントを使用します。 |
Position
プロパティ
| プロパティ | タイプ | 説明 |
|---|---|---|
TOP | Enum | グラフの上。 |
RIGHT | Enum | グラフの右側。 |
BOTTOM | Enum | グラフの下。 |
NONE | Enum | 凡例は表示されません。 |
ScatterChartBuilder
メソッド
StringFilterBuilder
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
set | String | 照合で大文字と小文字を区別するかどうかを設定します。 |
set | String | コントロールが完全一致(Match)、値の先頭から始まる接頭辞(Match)、または任意の部分文字列(Match)のみと一致するかどうかを設定します。 |
set | String | キーが押されたときにコントロールを照合するか、入力フィールドが「変更」されたとき(フォーカスが失われたときや Enter キーが押されたとき)にのみ照合するかを設定します。 |
TableChartBuilder
メソッド
TextStyle
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
get | String | テキスト スタイルの色を取得します。 |
get | String | テキスト スタイルのフォント名を取得します。 |
get | Number | テキスト スタイルのフォントサイズを取得します。 |
TextStyleBuilder
メソッド
| メソッド | 戻り値の型 | 概要 |
|---|---|---|
build() | Text | このビルダーを使用して作成されたテキスト スタイル構成オブジェクトをビルドして返します。 |
set | Text | テキスト スタイルの色を設定します。 |
set | Text | テキスト スタイルのフォント名を設定します。 |
set | Text | テキスト スタイルのフォントサイズを設定します。 |