このサービスを使用すると、ユーザーは Google グラフツールを使用してグラフを作成し、サーバーサイドでレンダリングできます。ウェブブラウザでグラフをレンダリングする場合は、代わりに 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 オブジェクトの作成に使用されるビルダー。 |
Area Chart Builder
メソッド
Bar Chart Builder
メソッド
Chart
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
get | Blob | このオブジェクト内のデータを指定したコンテンツ タイプに変換された BLOB として返します。 |
get | Blob | このオブジェクト内のデータを blob として返します。 |
get | Chart | このグラフのオプション(高さ、色、軸など)を返します。 |
Chart Hidden Dimension Strategy
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
IGNORE_BOTH | Enum | デフォルト。グラフでは、非表示の列と非表示の行はスキップされます。 |
IGNORE_ROWS | Enum | グラフでは、非表示の行のみがスキップされます。 |
IGNORE_COLUMNS | Enum | グラフでは、非表示の列のみがスキップされます。 |
SHOW_BOTH | Enum | グラフでは、非表示の列や非表示の行はスキップされません。 |
Chart Merge Strategy
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
MERGE_COLUMNS | Enum | デフォルトです。 |
MERGE_ROWS | Enum | チャートでは、複数の範囲の行が結合されます。 |
Chart Options
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
get(option) | Object | このグラフに構成されたオプションを返します。 |
get | Object | このグラフに構成されたオプションを返します。 |
Chart Type
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
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 グラフツールのドキュメントの説明に沿って、面グラフの作成を開始します。 |
new | Bar | Google グラフツールのドキュメントの説明に沿って、棒グラフの作成を開始します。 |
new | Column | Google グラフツールのドキュメントの説明に沿って、棒グラフの作成を開始します。 |
new | Data | 空のデータ表を作成します。値は手動で設定できます。 |
new | Data | 新しいデータビュー定義を作成します。 |
new | Line | Google グラフツールのドキュメントに記載されているように、折れ線グラフの作成を開始します。 |
new | Pie | Google グラフツールのドキュメントの説明に沿って、円グラフの作成を開始します。 |
new | Scatter | Google グラフツールのドキュメントに記載されているように、散布図の作成を開始します。 |
new | Table | Google グラフツールのドキュメントの説明に沿って、表グラフの作成を開始します。 |
new | Text | 新しいテキスト スタイル ビルダーを作成します。 |
Column Chart Builder
メソッド
Column Type
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
DATE | Enum | 日付値に対応します。 |
NUMBER | Enum | 数値に対応します。 |
STRING | Enum | 文字列値に対応します。 |
Curve Style
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
NORMAL | Enum | カーブのない直線。 |
SMOOTH | Enum | 線の角度が平滑化されます。 |
Data Table
Data Table Builder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
add | Data | データ表に列を追加します。 |
add | Data | データ表に行を追加します。 |
build() | Data | データ表をビルドして返します。 |
set | Data | テーブルに特定の値を設定します。 |
Data Table Source
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
get | Data | このオブジェクト内のデータは DataTable として返されます。 |
Data View Definition
Data View Definition Builder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
build() | Data | このビルダーを使用して作成されたデータビュー定義オブジェクトを構築して返します。 |
set | Data | データビューに含める列のインデックスを設定し、ロール列情報を指定します。 |
Line Chart Builder
メソッド
Match Type
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
EXACT | Enum | 値の完全一致のみを検索する |
PREFIX | Enum | 値の先頭から始まる接頭辞を照合する |
ANY | Enum | 任意の部分文字列に一致する |
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
get | String | オプション JSON で使用する一致タイプの名前を返します。 |
Number Range Filter Builder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
set | Number | 範囲の下限の最大許容値を設定します。 |
set | Number | 範囲の下限の最小許容値を設定します。 |
set | Number | スライダーの向きを設定します。 |
set | Number | 選択した範囲の範囲を示すラベルをスライダーの横に表示するかどうかを設定します。 |
set | Number | 数値範囲フィルタのスライダーのつまみが含まれる目盛り(範囲バーの固定位置)の数を設定します。 |
Orientation
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
HORIZONTAL | Enum | 横向き。 |
VERTICAL | Enum | 縦向き。 |
Picker Values Layout
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
ASIDE | Enum | 選択した値は、値選択ツールの横に 1 行のテキストで表示されます。 |
BELOW | Enum | 選択した値は、ウィジェットの下に 1 行のテキストとして表示されます。 |
BELOW_WRAPPING | Enum | 以下と同様ですが、選択ツールに収まらないエントリは新しい行に折り返されます。 |
BELOW_STACKED | Enum | 選択した値は、ウィジェットの下の列に表示されます。 |
Pie Chart Builder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
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 | グラフのタイトルのテキスト スタイルを設定します。 |
Point Style
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
NONE | Enum | 線のポイントを表示しない。 |
TINY | Enum | 小さな線ポイントを使用する。 |
MEDIUM | Enum | 中程度のサイズの線ポイントを使用します。 |
LARGE | Enum | サイズの大きなラインポイントを使用する。 |
HUGE | Enum | 最大サイズの線ポイントを使用する。 |
Position
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
TOP | Enum | グラフの上部。 |
RIGHT | Enum | グラフの右側。 |
BOTTOM | Enum | グラフの下。 |
NONE | Enum | 凡例は表示されません。 |
Scatter Chart Builder
メソッド
String Filter Builder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
set | String | 照合で大文字と小文字を区別するかどうかを設定します。 |
set | String | コントロールが正確な値のみ(Match )、値の先頭から始まる接頭辞(Match )、または任意のサブ文字列(Match )と一致するかどうかを設定します。 |
set | String | キーが押されたときにコントロールを照合するか、入力フィールドが「変更」されたとき(フォーカスが失われたときや Enter キーが押されたとき)にのみ照合するかを設定します。 |
Table Chart Builder
メソッド
Text Style
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
get | String | テキスト スタイルの色を取得します。 |
get | String | テキスト スタイルのフォント名を取得します。 |
get | Number | テキスト スタイルのフォントサイズを取得します。 |
Text Style Builder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
build() | Text | このビルダーを使用して作成されたテキスト スタイル設定オブジェクトをビルドして返します。 |
set | Text | テキスト スタイルの色を設定します。 |
set | Text | テキスト スタイルのフォント名を設定します。 |
set | Text | テキスト スタイルのフォントサイズを設定します。 |