Es un compilador para gráficos de áreas. Para obtener más detalles, consulta la documentación de Gráficos de Google.
Este es un ejemplo que muestra cómo crear un gráfico de áreas.
// 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();
Métodos
| Método | Tipo de datos que se muestra | Descripción breve |
|---|---|---|
build() | Chart | Compila el gráfico. |
reverse | Area | Revierte el dibujo de las series en el eje de dominio. |
set | Area | Establece el color de fondo del gráfico. |
set | Area | Establece los colores de las líneas del gráfico. |
set | Area | Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. |
set | Area | Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
set | Area | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
set | Area | Establece la definición de vista de datos que se usará para el gráfico. |
set | Area | Establece las dimensiones del gráfico. |
set | Area | Establece la posición de la leyenda con respecto al gráfico. |
set | Area | Establece el estilo de texto de la leyenda del gráfico. |
set | Area | Establece opciones avanzadas para este gráfico. |
set | Area | Establece el estilo de los puntos de la línea. |
set | Area | Establece el rango del gráfico. |
set | Area | Usa líneas apiladas, lo que significa que los valores de las líneas y las barras se apilan (se acumulan). |
set | Area | Establece el título del gráfico. |
set | Area | Establece el estilo de texto del título del gráfico. |
set | Area | Establece el estilo de texto del eje horizontal. |
set | Area | Agrega un título al eje horizontal. |
set | Area | Establece el estilo de texto del título del eje horizontal. |
set | Area | Establece el estilo de texto del eje vertical. |
set | Area | Agrega un título al eje vertical. |
set | Area | Establece el estilo de texto del título del eje vertical. |
use | Area | Convierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos). |
Documentación detallada
build()
Compila el gráfico.
Volver
Chart: Es un objeto Chart que se puede incorporar en documentos, elementos de la IU o usar como imagen estática.
reverse
Revierte el dibujo de las series en el eje de dominio. En el caso de los gráficos de rango vertical (como los gráficos de líneas, de áreas o de columnas), esto significa que el eje horizontal se dibuja de derecha a izquierda. En el caso de los gráficos de rango horizontal (como los gráficos de barras), esto significa que el eje vertical se dibuja de arriba abajo. En el caso de los gráficos circulares, esto significa que las porciones se dibujan en el sentido contrario a las manecillas del reloj.
// Creates a pie chart builder and sets drawing of the slices in a // counter-clockwise manner. const builder = Charts.newPieChart(); builder.reverseCategories();
Volver
Area: Este compilador es útil para encadenar.
set
Establece el color de fondo del gráfico.
// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
css | String | Es el valor CSS del color (como "blue" o "#00f"). |
Volver
Area: Este compilador es útil para encadenar.
set
Establece los colores de las líneas del gráfico.
// 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']);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
css | String[] | Un array de valores de CSS de color, como ["red", "#acf"]. El enésimo elemento del array representa el color de la enésima línea del gráfico. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google. Si se proporcionan una URL de fuente de datos y un DataTable, se ignora la URL de fuente de datos.
Para obtener más información sobre cómo consultar fuentes de datos, consulta la documentación de Gráficos de Google.
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
url | String | La URL de la fuente de datos, incluidos los parámetros de consulta |
Volver
Area: Este compilador es útil para encadenar.
set
Establece la tabla de datos que se usará para el gráfico con un DataTableBuilder. Este es un método conveniente para configurar la tabla de datos sin necesidad de llamar a build().
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
table | Data | Un creador de tablas de datos. Se crea una tabla de datos nueva de inmediato como parte de esta llamada, por lo que las actualizaciones adicionales del compilador no se reflejarán en el gráfico. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. La primera columna debe ser una cadena y contener las etiquetas del eje horizontal. Se puede agregar cualquier cantidad de columnas, todas deben ser numéricas. Cada columna se muestra como una línea independiente.
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
table | Data | Es la tabla de datos que se usará para el gráfico. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece la definición de vista de datos que se usará para el gráfico.
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
data | Data | Es un objeto de definición de vista de datos que define la vista que se debe derivar de la fuente de datos determinada para el dibujo del gráfico. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece las dimensiones del gráfico.
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
width | Integer | Es el ancho del gráfico, en píxeles. |
height | Integer | Es la altura del gráfico, en píxeles. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece la posición de la leyenda con respecto al gráfico. De forma predeterminada, no hay leyenda.
// Creates a line chart builder and sets the legend position to right. const builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
position | Position | Es la posición de la leyenda. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece el estilo de texto de la leyenda del gráfico.
// 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);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
text | Text | Es el estilo de texto que se usará para la leyenda del gráfico. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece opciones avanzadas para este gráfico. Consulta las opciones disponibles para este gráfico. Este método no tiene efecto si la opción proporcionada no es válida.
// Build an area chart with a 1-second animation duration.
const builder = Charts.newAreaChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
option | String | La opción que se debe configurar. |
value | Object | El valor que se establecerá. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece el estilo de los puntos de la línea. De forma predeterminada, los puntos no tienen estilos particulares y solo se ve la línea.
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
style | Point | Es el estilo que se usará para los puntos de la línea. |
Volver
Area: Este compilador es útil para encadenar.
Consulta también
set
Establece el rango del gráfico.
Si algún dato está fuera del rango, este se expande para incluirlo.
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
start | Number | Es el valor de la línea de cuadrícula más baja del eje de rango. |
end | Number | Es el valor de la línea de cuadrícula más alta del eje de rango. |
Volver
Area: Este compilador es útil para encadenar.
set
Usa líneas apiladas, lo que significa que los valores de las líneas y las barras se apilan (se acumulan). De forma predeterminada, no hay apilamiento.
Volver
Area: Este compilador es útil para encadenar.
set
Establece el título del gráfico. El título se muestra centrado sobre el gráfico.
// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
chart | String | el título del gráfico. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece el estilo de texto del título del gráfico.
// 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);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
text | Text | Es el estilo de texto que se usará para el título del gráfico. Para crear un objeto Text, llama a Charts.newTextStyle(). |
Volver
Area: Este compilador es útil para encadenar.
set
Establece el estilo de texto del eje horizontal.
// 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);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
text | Text | Es el estilo de texto que se usará para el título del eje horizontal. Para crear un objeto Text, llama a Charts.newTextStyle(). |
Volver
Area: Este compilador es útil para encadenar.
set
Agrega un título al eje horizontal. El título está centrado y aparece debajo de las etiquetas de valor del eje.
// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
title | String | Es el título del eje X. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece el estilo de texto del título del eje horizontal.
// 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);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
text | Text | Es el estilo de texto que se usará para el título del eje horizontal. Para crear un objeto Text, llama a Charts.newTextStyle(). |
Volver
Area: Este compilador es útil para encadenar.
set
Establece el estilo de texto del eje vertical.
// 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);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
text | Text | Es el estilo de texto que se usará para el título del eje horizontal. Para crear un objeto Text, llama a Charts.newTextStyle(). |
Volver
Area: Este compilador es útil para encadenar.
set
Agrega un título al eje vertical. El título está centrado y aparece a la izquierda de las etiquetas de valor.
// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
title | String | Es el título del eje Y. |
Volver
Area: Este compilador es útil para encadenar.
set
Establece el estilo de texto del título del eje vertical.
// 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);
Parámetros
| Nombre | Tipo | Descripción |
|---|---|---|
text | Text | Es el estilo de texto que se usará para el título del eje horizontal. Para crear un objeto Text, llama a Charts.newTextStyle(). |
Volver
Area: Este compilador es útil para encadenar.
use
Convierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos). El eje de rango es el eje vertical para los gráficos verticales (como los de líneas, áreas o columnas) y el eje horizontal para los gráficos horizontales (como los de barras).
Volver
Area: Este compilador es útil para encadenar.