面积图构建器。有关详情,请参阅 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()
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
- 此构建器,用于链接。
另请参阅
setRange(start, end)
设置图表的范围。
如有任何数据点超出此范围,系统会扩展范围以包含这些数据 积分。
参数
名称 | 类型 | 说明 |
---|---|---|
start | Number | 范围轴的最低网格线的值。 |
end | Number | 范围轴最高网格线的值。 |
返回
AreaChartBuilder
- 此构建器,用于链接。
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 | 图表标题。 |
返回
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
- 此构建器,用于链接。