Class AreaChartBuilder

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

参数

名称类型说明
cssValueString颜色的 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"]);

参数

名称类型说明
cssValuesString[]颜色 CSS 值的数组,例如 ["red", "#acf"]。第 n 个元素 表示图表中第 n 条线的颜色。

返回

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


setDataSourceUrl(url)

设置用于从外部来源(如 Google)提取数据的数据源网址 表格。如果提供了数据源网址和 DataTable,系统会忽略数据源网址。

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

参数

名称类型说明
urlString数据源网址,包括所有查询参数。

返回

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


setDataTable(tableBuilder)

使用 DataTableBuilder 设置要在图表中使用的数据表。这是一种便捷的方法 用于设置数据表,而无需调用 build()

参数

名称类型说明
tableBuilderDataTableBuilder数据表构建工具。在此过程中,系统会立即创建一个新的数据表 调用,因此对构建器进行的进一步更新不会反映在图表中。

返回

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


setDataTable(table)

设置包含图表线条和 X 轴标签的数据表格。通过 第一列应为字符串,并包含横轴标签。任意列数 所有值都必须为数字。每列都显示为单独的一行。

参数

名称类型说明
tableDataTableSource要用于图表的数据表格。

返回

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


setDataViewDefinition(dataViewDefinition)

设置图表使用的数据视图定义。

参数

名称类型说明
dataViewDefinitionDataViewDefinition数据视图定义对象,用于定义应 。

返回

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


setDimensions(width, height)

设置图表的维度。

参数

名称类型说明
widthInteger图表的宽度(以像素为单位)。
heightInteger图表的高度(以像素为单位)。

返回

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


setLegendPosition(position)

设置图例相对于图表的位置。默认情况下,没有图例。

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

参数

名称类型说明
positionPosition图例的位置。

返回

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

参数

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

返回

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

参数

名称类型说明
optionString要设置的选项。
valueObject要设置的值。

返回

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


setPointStyle(style)

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

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

参数

名称类型说明
stylePointStyle用于线条中点的样式。

返回

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

另请参阅


setRange(start, end)

设置图表的范围。

如有任何数据点超出此范围,系统会扩展范围以包含这些数据 积分。

参数

名称类型说明
startNumber范围轴的最低网格线的值。
endNumber范围轴最高网格线的值。

返回

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

参数

名称类型说明
chartTitleString图表标题。

返回

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

参数

名称类型说明
textStyleTextStyle用于图表标题的文本样式。您可以通过调用 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);

参数

名称类型说明
textStyleTextStyle用于横轴标题的文本样式。您可以通过调用 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')

参数

名称类型说明
titleStringX 轴的标题。

返回

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

参数

名称类型说明
textStyleTextStyle用于横轴标题的文本样式。您可以通过调用 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);

参数

名称类型说明
textStyleTextStyle用于横轴标题的文本样式。您可以通过调用 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')

参数

名称类型说明
titleStringY 轴的标题。

返回

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

参数

名称类型说明
textStyleTextStyle用于横轴标题的文本样式。您可以通过调用 Charts.newTextStyle() 来创建 TextStyleBuilder 对象。

返回

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


useLogScale()

将范围轴设为对数刻度(要求所有值均为正数)。范围 轴是垂直图表(如折线图、面积图或柱形图)的纵轴,而 水平轴(例如条形图)。

返回

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