Class LineChartBuilder

折れ線グラフビルダー

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

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

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

const chartBuilder = Charts.newLineChart()
                         .setTitle('Yearly Rainfall')
                         .setXAxisTitle('Month')
                         .setYAxisTitle('Rainfall (in)')
                         .setDimensions(600, 500)
                         .setCurveStyle(Charts.CurveStyle.SMOOTH)
                         .setPointStyle(Charts.PointStyle.MEDIUM)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

メソッド

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

詳細なドキュメント

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

戻る

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

setBackgroundColor(cssValue)

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

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

パラメータ

名前型説明
cssValueString色の CSS 値（"blue" や "#00f" など）。

戻る

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

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

パラメータ

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

戻る

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

setCurveStyle(style)

グラフの曲線に使用するスタイルを設定します。使用できるカーブ スタイルについては、CurveStyle をご覧ください。

// Creates a line chart builder and curves the lines in the chart.
const builder = Charts.newLineChart();
builder.setCurveStyle(Charts.CurveStyle.SMOOTH);

パラメータ

名前型説明
styleCurveStyleグラフ内の曲線のスタイル。

戻る

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

関連情報

setDataSourceUrl(url)

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

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

パラメータ

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

戻る

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

setDataTable(tableBuilder)

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

パラメータ

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

戻る

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

setDataTable(table)

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

パラメータ

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

戻る

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

setDataViewDefinition(dataViewDefinition)

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

パラメータ

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

戻る

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

setDimensions(width, height)

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

パラメータ

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

戻る

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

setLegendPosition(position)

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

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

パラメータ

名前型説明
positionPosition凡例の位置。

戻る

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

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

パラメータ

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

戻る

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

setOption(option, value)

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

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

パラメータ

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

戻る

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

setPointStyle(style)

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

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

パラメータ

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

戻る

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

関連情報

setRange(start, end)

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

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

パラメータ

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

戻る

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

setTitle(chartTitle)

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

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

パラメータ

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

戻る

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

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

パラメータ

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

戻る

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

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

パラメータ

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

戻る

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

setXAxisTitle(title)

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

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

パラメータ

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

戻る

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

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

パラメータ

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

戻る

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

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

パラメータ

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

戻る

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

setYAxisTitle(title)

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

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

パラメータ

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

戻る

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

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

パラメータ

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

戻る

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

useLogScale()

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

戻る

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