Class ColumnChartBuilder

ColumnChartBuilder

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

このサンプルは、データテーブルのデータを使って縦棒グラフを作成する方法を示しています。

var sampleData = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Year")
    .addColumn(Charts.ColumnType.NUMBER, "Sales")
    .addColumn(Charts.ColumnType.NUMBER, "Expenses")
    .addRow(["2004", 1000, 400])
    .addRow(["2005", 1170, 460])
    .addRow(["2006", 660, 1120])
    .addRow(["2007", 1030, 540])
    .addRow(["2008", 800, 600])
    .addRow(["2009", 943, 678])
    .addRow(["2010", 1020, 550])
    .addRow(["2011", 910, 700])
    .addRow(["2012", 1230, 840])
    .build();

var chart = Charts.newColumnChart()
    .setTitle('Sales & Expenses')
    .setXAxisTitle('Year')
    .setYAxisTitle('Amount (USD)')
    .setDimensions(600, 500)
    .setDataTable(sampleData)
    .build();

Methods

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

詳細なドキュメント

build()

グラフを作成します。

リターン

Chart - Chart オブジェクト。ドキュメントや UI 要素への埋め込み、静止画像としての使用が可能です。


reverseCategories()

領域軸で系列の描画を逆にします。縦範囲のグラフ(折れ線グラフ、面グラフ、縦棒グラフなど)では、横軸は右から左に描画されます。横範囲のグラフ(棒グラフなど)の場合、縦軸は上から下に向かって描画されます。円グラフの場合、スライスは反時計回りに描画されます。

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

リターン

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


setBackgroundColor(cssValue)

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

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

パラメータ

名前説明
cssValueString色の CSS 値("blue""#00f" など)。

リターン

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


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"]);

パラメータ

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

リターン

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


setDataSourceUrl(url)

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

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

パラメータ

名前説明
urlStringデータソースの URL(クエリ パラメータを含む)。

リターン

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


setDataTable(tableBuilder)

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

パラメータ

名前説明
tableBuilderDataTableBuilderデータテーブル ビルダーこの呼び出しの一環として新しいデータテーブルが直ちに作成されるため、ビルダーを更新してもグラフには反映されません。

リターン

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


setDataTable(table)

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

パラメータ

名前説明
tableDataTableSourceグラフに使用するデータ表です。

リターン

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


setDataViewDefinition(dataViewDefinition)

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

パラメータ

名前説明
dataViewDefinitionDataViewDefinitionグラフ描画用に所定のデータソースから導出されるビューを定義するデータビュー定義オブジェクト。

リターン

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


setDimensions(width, height)

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

パラメータ

名前説明
widthIntegerグラフの幅(ピクセル単位)。
heightIntegerグラフの高さ(ピクセル単位)。

リターン

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


setLegendPosition(position)

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

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

パラメータ

名前説明
positionPosition凡例の位置。

リターン

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


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

パラメータ

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

リターン

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


setOption(option, value)

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

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

パラメータ

名前説明
optionString設定するオプション。
valueObject設定する値。

リターン

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


setRange(start, end)

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

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

パラメータ

名前説明
startNumber範囲軸の最も低いグリッド線の値。
endNumber範囲の軸の最も高いグリッド線の値。

リターン

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


setStacked()

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

リターン

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


setTitle(chartTitle)

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

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

パラメータ

名前説明
chartTitleStringグラフのタイトルが表示されます。

リターン

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


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

パラメータ

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

リターン

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


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

パラメータ

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

リターン

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


setXAxisTitle(title)

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

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

パラメータ

名前説明
titleStringX 軸のタイトル。

リターン

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


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

パラメータ

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

リターン

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


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

パラメータ

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

リターン

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


setYAxisTitle(title)

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

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

パラメータ

名前説明
titleStringY 軸のタイトル。

リターン

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


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

パラメータ

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

リターン

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


useLogScale()

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

リターン

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