此页面由 Cloud Translation API 翻译。

Class AreaChartBuilder

面积图构建器。有关详情，请参阅 Google 图表文档。

以下示例展示了如何构建面积图。

  // Create a data table with some sample data.
  var 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();

  var 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 - 一个 Chart 对象，可嵌入到文档、界面元素中，或用作静态图片。

`reverseCategories()`

反转沿域轴的系列绘制。对于垂直范围图表（例如折线图、面积图或柱形图），表示横轴是从右向左绘制的。对于水平范围图表（例如条形图），这表示纵轴是从上到下底部。对于饼图，这意味着切片是逆时针绘制的。

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

AreaChartBuilder - 此构建器，用于链接。

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

AreaChartBuilder - 此构建器，用于链接。

`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 条线的颜色。

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.
var 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.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

参数

名称	类型	说明
`textStyle`	`TextStyle`	要用于图表图例的文本样式。

AreaChartBuilder - 此构建器，用于链接。

`setOption(option, value)`

设置此图表的高级选项。请参阅此图表。如果指定选项无效，则此方法不会产生任何影响。

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

参数

名称	类型	说明
`option`	`String`	要设置的选项。
`value`	`Object`	要设置的值。

AreaChartBuilder - 此构建器，用于链接。

`setPointStyle(style)`

设置线条中点的样式。默认情况下，点没有特定的样式，该线条可见。

// Creates a line chart builder and sets large point style.
var 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'.
var 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.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var 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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var 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.
var 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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var 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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var 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.
var 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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var 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()`