縦棒グラフのビルダー。詳しくは、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()
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");
パラメータ
名前 | 型 | 説明 |
---|---|---|
cssValue | String | 色の 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"]);
パラメータ
名前 | 型 | 説明 |
---|---|---|
cssValues | String[] | カラー CSS 値の配列(["red", "#acf"] など)。配列の n 番目の要素は、グラフの n 番目の線の色を表します。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
setDataSourceUrl(url)
Google スプレッドシートなどの外部ソースからデータを取り込むために使用されるデータソースの URL を設定します。データソースの URL と DataTable を指定した場合、データソースの URL は無視されます。
データソースのクエリについて詳しくは、Google グラフのドキュメントをご覧ください。
パラメータ
名前 | 型 | 説明 |
---|---|---|
url | String | データソースの URL(クエリ パラメータを含む)。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
setDataTable(tableBuilder)
DataTableBuilder を使用して、グラフに使用するデータテーブルを設定します。これは、build()
を呼び出すことなくデータテーブルを設定できる便利なメソッドです。
パラメータ
名前 | 型 | 説明 |
---|---|---|
tableBuilder | DataTableBuilder | データテーブル ビルダーこの呼び出しの一環として新しいデータテーブルが直ちに作成されるため、ビルダーを更新してもグラフには反映されません。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
setDataTable(table)
グラフの線と X 軸のラベルを含むデータ表を設定します。最初の列は文字列とし、横軸のラベルを格納します。任意の数の列を指定できます。すべて数値にする必要があります。各列は個別の行として表示されます。
パラメータ
名前 | 型 | 説明 |
---|---|---|
table | DataTableSource | グラフに使用するデータ表です。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
setDataViewDefinition(dataViewDefinition)
グラフに使用するデータビュー定義を設定します。
パラメータ
名前 | 型 | 説明 |
---|---|---|
dataViewDefinition | DataViewDefinition | グラフ描画用に所定のデータソースから導出されるビューを定義するデータビュー定義オブジェクト。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
setDimensions(width, height)
グラフのディメンションを設定します。
パラメータ
名前 | 型 | 説明 |
---|---|---|
width | Integer | グラフの幅(ピクセル単位)。 |
height | Integer | グラフの高さ(ピクセル単位)。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
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 | 凡例の位置。 |
リターン
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);
パラメータ
名前 | 型 | 説明 |
---|---|---|
textStyle | TextStyle | グラフの凡例に使用するテキスト スタイル。 |
リターン
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();
パラメータ
名前 | 型 | 説明 |
---|---|---|
option | String | 設定するオプション。 |
value | Object | 設定する値。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
setRange(start, end)
グラフの範囲を設定します。
範囲外のデータポイントがある場合は、それらのデータポイントを含むように範囲が拡大されます。
パラメータ
名前 | 型 | 説明 |
---|---|---|
start | Number | 範囲軸の最も低いグリッド線の値。 |
end | Number | 範囲の軸の最も高いグリッド線の値。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
setStacked()
setTitle(chartTitle)
グラフのタイトルを設定します。タイトルはグラフの中央に表示されます。
// Creates a line chart builder and title to 'My Line Chart'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
パラメータ
名前 | 型 | 説明 |
---|---|---|
chartTitle | String | グラフのタイトルが表示されます。 |
リターン
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);
パラメータ
名前 | 型 | 説明 |
---|---|---|
textStyle | TextStyle | グラフのタイトルに使用するテキスト スタイルです。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);
パラメータ
名前 | 型 | 説明 |
---|---|---|
textStyle | TextStyle | 横軸のタイトルに使用するテキスト スタイル。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')
パラメータ
名前 | 型 | 説明 |
---|---|---|
title | String | X 軸のタイトル。 |
リターン
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);
パラメータ
名前 | 型 | 説明 |
---|---|---|
textStyle | TextStyle | 横軸のタイトルに使用するテキスト スタイル。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);
パラメータ
名前 | 型 | 説明 |
---|---|---|
textStyle | TextStyle | 横軸のタイトルに使用するテキスト スタイル。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')
パラメータ
名前 | 型 | 説明 |
---|---|---|
title | String | Y 軸のタイトル。 |
リターン
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);
パラメータ
名前 | 型 | 説明 |
---|---|---|
textStyle | TextStyle | 横軸のタイトルに使用するテキスト スタイル。TextStyleBuilder オブジェクトを作成するには、Charts.newTextStyle() を呼び出します。 |
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。
useLogScale()
範囲の軸を対数スケールにします(すべての値を正数にする必要があります)。範囲の軸は、垂直グラフ(折れ線、面、縦など)では縦軸、横棒グラフ(棒グラフなど)では横軸です。
リターン
ColumnChartBuilder
- このビルダー。チェーンに役立ちます。