このページは Cloud Translation API によって翻訳されました。

Class AreaChartBuilder

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

面グラフを作成する方法の例を次に示します。

// Create a data table with some sample data.
const 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();

const 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 要素に埋め込んだり、静的な画像として使用したりできるグラフオブジェクト。

`reverseCategories()`

ドメイン軸での系列の描画を反転します。垂直範囲グラフ（折れ線グラフ、面グラフ、棒グラフなど）の場合、水平軸は右から左に描画されます。横方向の範囲グラフ（棒グラフなど）の場合、垂直軸は上から下に描画されます。円グラフの場合、スライスは反時計回りに描画されます。

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

戻る

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

`setBackgroundColor(cssValue)`

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

// Creates a line chart builder and sets the background color to gray
const 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.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

パラメータ

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

戻る

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

`setDataSourceUrl(url)`

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

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

パラメータ

名前	型	説明
`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.
const 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.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

パラメータ

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

戻る

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

`setOption(option, value)`

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

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

パラメータ

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

戻る

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

`setPointStyle(style)`

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

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

パラメータ

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

戻る

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

`setRange(start, end)`

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

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

パラメータ

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

戻る

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

`setStacked()`

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

戻る

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

`setTitle(chartTitle)`

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

// Creates a line chart builder and title to 'My Line Chart'.
const 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.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const 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.
const 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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

パラメータ

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

戻る

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

`useLogScale()`

範囲軸を対数目盛にします（すべての値が正である必要があります）。範囲軸は、縦型グラフ（折れ線グラフ、面グラフ、縦棒グラフなど）では縦軸、横型グラフ（棒グラフなど）では横軸です。

戻る

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

Class AreaChartBuilder

メソッド

詳細なドキュメント

build()

戻る

reverseCategories()

戻る

setBackgroundColor(cssValue)

パラメータ

戻る

setColors(cssValues)

パラメータ

戻る

setDataSourceUrl(url)

パラメータ

戻る

setDataTable(tableBuilder)

パラメータ

戻る

setDataTable(table)

パラメータ

戻る

setDataViewDefinition(dataViewDefinition)

パラメータ

戻る

setDimensions(width, height)

パラメータ

戻る

setLegendPosition(position)

パラメータ

戻る

setLegendTextStyle(textStyle)

パラメータ

戻る

setOption(option, value)

パラメータ

戻る

setPointStyle(style)

パラメータ

戻る

関連情報

setRange(start, end)

パラメータ

戻る

setStacked()

戻る

setTitle(chartTitle)

パラメータ

戻る

setTitleTextStyle(textStyle)

パラメータ

戻る

setXAxisTextStyle(textStyle)

パラメータ

戻る

setXAxisTitle(title)

パラメータ

戻る

setXAxisTitleTextStyle(textStyle)

パラメータ

戻る

setYAxisTextStyle(textStyle)

パラメータ

戻る

setYAxisTitle(title)

パラメータ

戻る

setYAxisTitleTextStyle(textStyle)

パラメータ

戻る

useLogScale()

戻る

`build()`

`reverseCategories()`

`setBackgroundColor(cssValue)`

`setColors(cssValues)`

`setDataSourceUrl(url)`

`setDataTable(tableBuilder)`

`setDataTable(table)`

`setDataViewDefinition(dataViewDefinition)`

`setDimensions(width, height)`

`setLegendPosition(position)`

`setLegendTextStyle(textStyle)`

`setOption(option, value)`

`setPointStyle(style)`

`setRange(start, end)`

`setStacked()`

`setTitle(chartTitle)`

`setTitleTextStyle(textStyle)`

`setXAxisTextStyle(textStyle)`

`setXAxisTitle(title)`

`setXAxisTitleTextStyle(textStyle)`

`setYAxisTextStyle(textStyle)`

`setYAxisTitle(title)`

`setYAxisTitleTextStyle(textStyle)`

`useLogScale()`