此页面由 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 表格）提取数据的数据源网址。
`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 - 图表对象，可嵌入到文档、界面元素中，或用作静态图片。

`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 表格）提取数据的数据源网址。如果同时提供了数据源网址和 DataTable，系统会忽略数据源网址。

如需详细了解如何查询数据源，请参阅 Google 图表文档。

参数

名称	类型	说明
`url`	`String`	数据源网址，包括所有查询参数。

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 - 此构建器适用于链接。

另请参阅

PointStyle

`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`	要为图表标题使用的文本样式。您可以通过调用 `Charts.newTextStyle()` 来创建 `TextStyleBuilder` 对象。

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`	要为横轴标题使用的文本样式。您可以通过调用 `Charts.newTextStyle()` 来创建 `TextStyleBuilder` 对象。

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`	要为横轴标题使用的文本样式。您可以通过调用 `Charts.newTextStyle()` 来创建 `TextStyleBuilder` 对象。

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`	要为横轴标题使用的文本样式。您可以通过调用 `Charts.newTextStyle()` 来创建 `TextStyleBuilder` 对象。

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`	要为横轴标题使用的文本样式。您可以通过调用 `Charts.newTextStyle()` 来创建 `TextStyleBuilder` 对象。

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