このサービスを使用すると、 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 サービスでサポートされているグラフの種類。 |
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
メソッド
BarChartBuilder
メソッド
Chart
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
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
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
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 | グラフ内の凡例の位置を列挙したものです。 |
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
newAreaChart() | AreaChartBuilder | Google Chart の説明に沿って面グラフの作成を開始します。 ツールのドキュメントをご覧ください。 |
newBarChart() | BarChartBuilder | Google Chart の説明に沿って棒グラフの作成を開始します。 ツールのドキュメントをご覧ください。 |
newColumnChart() | ColumnChartBuilder | Google グラフで説明されているように、縦棒グラフの作成を開始します。 ツールのドキュメントをご覧ください。 |
newDataTable() | DataTableBuilder | 値を手動で設定できる空のデータテーブルを作成します。 |
newDataViewDefinition() | DataViewDefinitionBuilder | 新しいデータビュー定義を作成します。 |
newLineChart() | LineChartBuilder | Google グラフに沿って折れ線グラフの作成を開始します。 ツールのドキュメントをご覧ください。 |
newPieChart() | PieChartBuilder | Google Chart の説明に沿って円グラフの作成を開始します。 ツールのドキュメントをご覧ください。 |
newScatterChart() | ScatterChartBuilder | Google グラフの説明に沿って散布図の作成を開始します。 ツールのドキュメントをご覧ください。 |
newTableChart() | TableChartBuilder | Google Chart の説明に沿って表グラフの作成を開始します。 ツールのドキュメントをご覧ください。 |
newTextStyle() | TextStyleBuilder | 新しいテキスト スタイル ビルダーを作成します。 |
ColumnChartBuilder
メソッド
ColumnType
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
DATE | Enum | 日付値に対応します。 |
NUMBER | Enum | 数値に対応します。 |
STRING | Enum | 文字列値に対応します。 |
CurveStyle
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
NORMAL | Enum | 曲線のないまっすぐな線。 |
SMOOTH | Enum | 線の角度は滑らかになります。 |
DataTable
DataTableBuilder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
addColumn(type, label) | DataTableBuilder | データテーブルに列を追加します。 |
addRow(values) | DataTableBuilder | データテーブルに行を追加します。 |
build() | DataTable | データテーブルをビルドして返します。 |
setValue(row, column, value) | DataTableBuilder | テーブルに特定の値を設定します。 |
DataTableSource
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
getDataTable() | DataTable | このオブジェクト内のデータを DataTable として返します。 |
DataViewDefinition
DataViewDefinitionBuilder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
build() | DataViewDefinition | このビルダーを使用して構築されたデータビュー定義オブジェクトをビルドして返します。 |
setColumns(columns) | DataViewDefinitionBuilder | データビューに含める列のインデックスを設定し、ロールと列を指定します 情報です。 |
LineChartBuilder
メソッド
MatchType
プロパティ
プロパティ | タイプ | 説明 |
---|---|---|
EXACT | Enum | 完全一致のみ |
PREFIX | Enum | 値の先頭から始まる接頭辞を照合 |
ANY | Enum | 任意の部分文字列に一致 |
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
getName() | String | オプション JSON で使用されるマッチタイプの名前を返します。 |
NumberRangeFilterBuilder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
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
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
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
メソッド
StringFilterBuilder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
setCaseSensitive(caseSensitive) | StringFilterBuilder | 照合で大文字と小文字を区別するかどうかを設定します。 |
setMatchType(matchType) | StringFilterBuilder | コントロールが正確な値のみ(MatchType.EXACT )、接頭辞と一致するかどうかを設定します
値の先頭(MatchType.PREFIX )、または任意の部分文字列
(MatchType.ANY )。 |
setRealtimeTrigger(realtimeTrigger) | StringFilterBuilder | キーが押されたときにコントロールが必ず一致するか、入力フィールドが押されたときにコントロールが一致するかを設定します '変更'(フォーカスが失われる、または Enter キーを押す)。 |
TableChartBuilder
メソッド
TextStyle
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
getColor() | String | テキスト スタイルの色を取得します。 |
getFontName() | String | テキスト スタイルのフォント名を取得します。 |
getFontSize() | Number | テキスト スタイルのフォントサイズを取得します。 |
TextStyleBuilder
メソッド
メソッド | 戻り値の型 | 概要 |
---|---|---|
build() | TextStyle | このビルダーを使用して作成されたテキスト スタイル設定オブジェクトをビルドして返します。 |
setColor(cssValue) | TextStyleBuilder | テキスト スタイルの色を設定します。 |
setFontName(fontName) | TextStyleBuilder | テキスト スタイルのフォント名を設定します |
setFontSize(fontSize) | TextStyleBuilder | テキスト スタイルのフォントサイズを設定します。 |