Class AreaChartBuilder

AreaChartBuilder

面グラフのビルダー。詳しくは、Google Charts のドキュメントをご覧ください。

次の例は、面グラフの作成方法を示したものです。

  // Create a data table with some sample data.
  var sampleData = Charts.newDataTable()
      .addColumn(Charts.ColumnType.STRING, "Month")
      .addColumn(Charts.ColumnType.NUMBER, "Dining")
      .addColumn(Charts.ColumnType.NUMBER, "Total")
      .addRow(["Jan", 60, 520])
      .addRow(["Feb", 50, 430])
      .addRow(["Mar", 53, 440])
      .addRow(["Apr", 70, 410])
      .addRow(["May", 80, 390])
      .addRow(["Jun", 60, 500])
      .addRow(["Jul", 100, 450])
      .addRow(["Aug", 140, 431])
      .addRow(["Sep", 75, 488])
      .addRow(["Oct", 70, 521])
      .addRow(["Nov", 58, 388])
      .addRow(["Dec", 63, 400])
      .build();

  var chart = Charts.newAreaChart()
      .setTitle('Yearly Spending')
      .setXAxisTitle('Month')
      .setYAxisTitle('Spending (USD)')
      .setDimensions(600, 500)
      .setStacked()
      .setColors(['red', 'green'])
      .setDataTable(sampleData)
      .build();

メソッド

メソッド	戻り値の型	概要
build()	Chart	グラフを作成します。
reverseCategories()	AreaChartBuilder	領域軸の系列の描画を反転します。
setBackgroundColor(cssValue)	AreaChartBuilder	グラフの背景色を設定します。
setColors(cssValues)	AreaChartBuilder	グラフの線の色を設定します。
setDataSourceUrl(url)	AreaChartBuilder	Google などの外部ソースからデータを取り込むために使用されるデータソースの URL を設定します。 スプレッドシート。
setDataTable(tableBuilder)	AreaChartBuilder	DataTableBuilder を使用して、グラフに使用するデータ表を設定します。
setDataTable(table)	AreaChartBuilder	グラフの線と X 軸のラベルを含むデータ表を設定します。
setDataViewDefinition(dataViewDefinition)	AreaChartBuilder	グラフで使用するデータビューの定義を設定します。
setDimensions(width, height)	AreaChartBuilder	グラフのディメンションを設定します。
setLegendPosition(position)	AreaChartBuilder	グラフに対する凡例の位置を設定します。
setLegendTextStyle(textStyle)	AreaChartBuilder	グラフの凡例のテキスト スタイルを設定します。
setOption(option, value)	AreaChartBuilder	このグラフの詳細オプションを設定します。
setPointStyle(style)	AreaChartBuilder	線内のポイントのスタイルを設定します。
setRange(start, end)	AreaChartBuilder	グラフの範囲を設定します。
setStacked()	AreaChartBuilder	積み上げ線を使用します。つまり、線と棒の値が積み上げ（累積）されます。
setTitle(chartTitle)	AreaChartBuilder	グラフのタイトルを設定します。
setTitleTextStyle(textStyle)	AreaChartBuilder	グラフのタイトルのテキスト スタイルを設定します。
setXAxisTextStyle(textStyle)	AreaChartBuilder	横軸のテキスト スタイルを設定します。
setXAxisTitle(title)	AreaChartBuilder	横軸にタイトルを追加します。
setXAxisTitleTextStyle(textStyle)	AreaChartBuilder	横軸のタイトルのテキスト スタイルを設定します。
setYAxisTextStyle(textStyle)	AreaChartBuilder	縦軸のテキスト スタイルを設定します。
setYAxisTitle(title)	AreaChartBuilder	縦軸にタイトルを追加します。
setYAxisTitleTextStyle(textStyle)	AreaChartBuilder	縦軸のタイトルのテキスト スタイルを設定します。
useLogScale()	AreaChartBuilder	範囲の軸を対数スケールに変換します（すべての値が正である必要があります）。

詳細なドキュメント

build()

グラフを作成します。

戻る

Chart - ドキュメントや UI 要素に埋め込んだり、静的アセットとして使用したりできる Chart オブジェクト。 説明します。

---

reverseCategories()

領域軸の系列の描画を反転します。縦長の範囲グラフ（折れ線、 面グラフや縦棒グラフなど）、横軸は右から左に描画されます。対象 水平範囲グラフ（棒グラフなど）の場合、縦軸は上から下に描画されます。 下に表示されます。円グラフでは、スライスが反時計回りに描画されることを意味します。

// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner.
var builder = Charts.newPieChart();
builder.reverseCategories();

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setBackgroundColor(cssValue)

グラフの背景色を設定します。

// Creates a line chart builder and sets the background color to gray
var builder = Charts.newLineChart();
builder.setBackgroundColor("gray");

パラメータ

名前	型	説明
cssValue	String	色の CSS 値（"blue"、"#00f" など）。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setColors(cssValues)

グラフの線の色を設定します。

// Creates a line chart builder and sets the first two lines to be drawn in green and red,
// respectively.
var builder = Charts.newLineChart();
builder.setColors(["green", "red"]);

パラメータ

名前	型	説明
cssValues	String[]	カラー CSS 値の配列（["red", "#acf"] など）。n 番目の要素 配列内の は、グラフ内の n 番目の線の色を表します。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setDataSourceUrl(url)

Google などの外部ソースからデータを取り込むために使用されるデータソースの URL を設定します。 スプレッドシート。データソースの URL と DataTable が指定されている場合、データソースの URL は無視されます。

データソースのクエリの詳細については、Google Charts のドキュメントをご覧ください。

パラメータ

名前	型	説明
url	String	データソースの URL（クエリ パラメータを含む）。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setDataTable(tableBuilder)

DataTableBuilder を使用して、グラフに使用するデータ表を設定します。これは便利な方法です。 build() を呼び出すことなく、データテーブルを設定できます。

パラメータ

名前	型	説明
tableBuilder	DataTableBuilder	データテーブル ビルダー。新しいデータテーブルが それ以降のビルダーの更新はグラフに反映されません。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setDataTable(table)

グラフの線と X 軸のラベルを含むデータ表を設定します。「 最初の列は文字列で、横軸のラベルが含まれている必要があります。任意の数の列 すべて数値でなければなりません。各列は別々の行として表示されます。

パラメータ

名前	型	説明
table	DataTableSource	グラフに使用するデータテーブル。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setDataViewDefinition(dataViewDefinition)

グラフで使用するデータビューの定義を設定します。

パラメータ

名前	型	説明
dataViewDefinition	DataViewDefinition	表示するビューを定義するデータビュー定義オブジェクト。 グラフ描画の特定のデータソースから派生した値。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setDimensions(width, height)

グラフのディメンションを設定します。

パラメータ

名前	型	説明
width	Integer	グラフの幅（ピクセル単位）。
height	Integer	グラフの高さ（ピクセル単位）。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setLegendPosition(position)

グラフに対する凡例の位置を設定します。デフォルトでは、凡例はありません。

// Creates a line chart builder and sets the legend position to right.
var builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

パラメータ

名前	型	説明
position	Position	凡例の位置。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setLegendTextStyle(textStyle)

グラフの凡例のテキスト スタイルを設定します。

// Creates a line chart builder and sets it up for a  blue, 26-point legend.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

パラメータ

名前	型	説明
textStyle	TextStyle	グラフの凡例に使用するテキスト スタイル。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setOption(option, value)

このグラフの詳細オプションを設定します。詳しくは、 このグラフをご覧ください。指定したオプションが無効な場合、このメソッドは機能しません。

// Build an area chart with a 1-second animation duration.
var builder = Charts.newAreaChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();

パラメータ

名前	型	説明
option	String	設定するオプション。
value	Object	設定する値。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setPointStyle(style)

線内のポイントのスタイルを設定します。デフォルトでは、ポイントには特定のスタイルはなく、 線が表示されます。

// Creates a line chart builder and sets large point style.
var builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

パラメータ

名前	型	説明
style	PointStyle	線上のポイントに使用するスタイル。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

関連情報

• PointStyle

---

setRange(start, end)

グラフの範囲を設定します。

範囲外のデータポイントがある場合は、それらのデータが含まれるように範囲が拡張されます あります。

パラメータ

名前	型	説明
start	Number	範囲の軸の最下方のグリッド線の値。
end	Number	範囲の軸の最も高いグリッド線の値。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setStacked()

積み上げ線を使用します。つまり、線と棒の値が積み上げ（累積）されます。デフォルトでは スタックがありません

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setTitle(chartTitle)

グラフのタイトルを設定します。タイトルはグラフの中央に表示されます。

// Creates a line chart builder and title to 'My Line Chart'.
var builder = Charts.newLineChart();
builder.setTitle('My Line Chart')

パラメータ

名前	型	説明
chartTitle	String	グラフのタイトル。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setTitleTextStyle(textStyle)

グラフのタイトルのテキスト スタイルを設定します。

// Creates a line chart builder and sets it up for a  blue, 26-point title.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setTitleTextStyle(style);

パラメータ

名前	型	説明
textStyle	TextStyle	グラフのタイトルに使用するテキスト スタイル。TextStyleBuilder オブジェクトを作成するには、Charts.newTextStyle() を呼び出します。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setXAxisTextStyle(textStyle)

横軸のテキスト スタイルを設定します。

// Creates a line chart builder and sets the X-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);

パラメータ

名前	型	説明
textStyle	TextStyle	横軸のタイトルに使用するテキスト スタイル。TextStyleBuilder オブジェクトを作成するには、Charts.newTextStyle() を呼び出します。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setXAxisTitle(title)

横軸にタイトルを追加します。タイトルは中央に配置され、軸の値の下に表示されます できます。

// Creates a line chart builder and sets the X-axis title.
var builder = Charts.newLineChart();
builder.setTitle('X-axis Title')

パラメータ

名前	型	説明
title	String	X 軸のタイトル。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setXAxisTitleTextStyle(textStyle)

横軸のタイトルのテキスト スタイルを設定します。

// Creates a line chart builder and sets the X-axis title text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);

パラメータ

名前	型	説明
textStyle	TextStyle	横軸のタイトルに使用するテキスト スタイル。TextStyleBuilder オブジェクトを作成するには、Charts.newTextStyle() を呼び出します。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setYAxisTextStyle(textStyle)

縦軸のテキスト スタイルを設定します。

// Creates a line chart builder and sets the Y-axis text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTextStyle(textStyle);

パラメータ

名前	型	説明
textStyle	TextStyle	横軸のタイトルに使用するテキスト スタイル。TextStyleBuilder オブジェクトを作成するには、Charts.newTextStyle() を呼び出します。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setYAxisTitle(title)

縦軸にタイトルを追加します。タイトルは中央に配置され、値の左側に表示されます。 できます。

// Creates a line chart builder and sets the Y-axis title.
var builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title')

パラメータ

名前	型	説明
title	String	Y 軸のタイトル。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

setYAxisTitleTextStyle(textStyle)

縦軸のタイトルのテキスト スタイルを設定します。

// Creates a line chart builder and sets the Y-axis title text style to blue, 18-point font.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

パラメータ

名前	型	説明
textStyle	TextStyle	横軸のタイトルに使用するテキスト スタイル。TextStyleBuilder オブジェクトを作成するには、Charts.newTextStyle() を呼び出します。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。

---

useLogScale()

範囲の軸を対数スケールに変換します（すべての値が正である必要があります）。範囲 軸は縦軸（折れ線グラフ、面グラフ、縦棒グラフ）で、 横軸（棒グラフなど）の場合は、横軸になります。

戻る

AreaChartBuilder - このビルダーはチェーンに役立ちます。