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

Class BarChartBuilder

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

棒グラフを作成する方法の例を次に示します。データは Google スプレッドシートからインポートされます。

// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=B1%3AC11' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=0&headers=-1';

const chartBuilder = Charts.newBarChart()
                         .setTitle('Top Grossing Films in US and Canada')
                         .setXAxisTitle('USD')
                         .setYAxisTitle('Film')
                         .setDimensions(600, 500)
                         .setLegendPosition(Charts.Position.BOTTOM)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

メソッド

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

詳細なドキュメント

`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();

戻る

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

`reverseDirection()`

横軸に沿って棒が増加する方向を反転します。デフォルトでは、値は左から右に増加します。このメソッドを呼び出すと、右から左に拡大されます。

戻る

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

`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"` など）。

戻る

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

`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 番目の線の色を表します。

戻る

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

`setDataSourceUrl(url)`

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

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

パラメータ

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

戻る

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

`setDataTable(tableBuilder)`

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

パラメータ

名前	型	説明
`tableBuilder`	`DataTableBuilder`	データテーブルビルダー。この呼び出しの一部として新しいデータ表が即座に作成されるため、ビルダーの更新はグラフに反映されません。

戻る

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

`setDataTable(table)`

グラフの線と X 軸ラベルを含むデータ表を設定します。最初の列は文字列で、横軸のラベルを含める必要があります。その後に任意の数の列を追加できます。すべての列は数値にする必要があります。各列は個別の行として表示されます。

パラメータ

名前	型	説明
`table`	`DataTableSource`	グラフに使用するデータ表。

戻る

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

`setDataViewDefinition(dataViewDefinition)`

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

パラメータ

名前	型	説明
`dataViewDefinition`	`DataViewDefinition`	グラフの描画に使用するデータソースから派生させるビューを定義するデータビュー定義オブジェクト。

戻る

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

`setDimensions(width, height)`

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

パラメータ

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

戻る

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

`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`	凡例の位置。

戻る

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

`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`	グラフの凡例に使用するテキストスタイル。

戻る

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

`setOption(option, value)`

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

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

パラメータ

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

戻る

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

`setRange(start, end)`

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

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

パラメータ

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

戻る

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

`setStacked()`

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

戻る

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

`setTitle(chartTitle)`

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

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

パラメータ

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

戻る

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

`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()` を呼び出します。

戻る

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

`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()` を呼び出します。

戻る

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

`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 軸のタイトル。

戻る

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

`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()` を呼び出します。

戻る

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

`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()` を呼び出します。

戻る

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

`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 軸のタイトル。

戻る

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

`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()` を呼び出します。

戻る

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

`useLogScale()`

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

戻る

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