Es un compilador para gráficos de barras. Para obtener más detalles, consulta la documentación de Google Charts.
Este es un ejemplo que muestra cómo crear un gráfico de barras. Los datos se importan desde una Hoja de cálculo de Google:
// Get sample data from a spreadsheet. var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=B1%3AC11' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=0&headers=-1'; var chartBuilder = Charts.newBarChart() .setTitle('Top Grossing Films in US and Canada') .setXAxisTitle('USD') .setYAxisTitle('Film') .setDimensions(600, 500) .setLegendPosition(Charts.Position.BOTTOM) .setDataSourceUrl(dataSourceUrl); var chart = chartBuilder.build();
Métodos
Método | Tipo de datos que se muestra | Descripción breve |
---|---|---|
build() | Chart | Compila el gráfico. |
reverseCategories() | BarChartBuilder | Invierte el dibujo de series en el eje de dominio. |
reverseDirection() | BarChartBuilder | Invierte la dirección en la que crecen las barras a lo largo del eje horizontal. |
setBackgroundColor(cssValue) | BarChartBuilder | Establece el color de fondo del gráfico. |
setColors(cssValues) | BarChartBuilder | Establece los colores de las líneas del gráfico. |
setDataSourceUrl(url) | BarChartBuilder | Establece la URL de la fuente de datos que se utiliza para extraer datos de una fuente externa, como Google Hojas de cálculo. |
setDataTable(tableBuilder) | BarChartBuilder | Configura la tabla de datos que se usará para el gráfico con un DataTableBuilder. |
setDataTable(table) | BarChartBuilder | Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. |
setDataViewDefinition(dataViewDefinition) | BarChartBuilder | Establece la definición de la vista de datos que se usará para el gráfico. |
setDimensions(width, height) | BarChartBuilder | Establece las dimensiones del gráfico. |
setLegendPosition(position) | BarChartBuilder | Establece la posición de la leyenda con respecto al gráfico. |
setLegendTextStyle(textStyle) | BarChartBuilder | Establece el estilo de texto de la leyenda del gráfico. |
setOption(option, value) | BarChartBuilder | Establece las opciones avanzadas para este gráfico. |
setRange(start, end) | BarChartBuilder | Establece el rango del gráfico. |
setStacked() | BarChartBuilder | Usa líneas apiladas, lo que significa que los valores de línea y barra se apilan (acumulan). |
setTitle(chartTitle) | BarChartBuilder | Establece el título del gráfico. |
setTitleTextStyle(textStyle) | BarChartBuilder | Establece el estilo de texto del título del gráfico. |
setXAxisTextStyle(textStyle) | BarChartBuilder | Establece el estilo de texto del eje horizontal. |
setXAxisTitle(title) | BarChartBuilder | Agrega un título al eje horizontal. |
setXAxisTitleTextStyle(textStyle) | BarChartBuilder | Establece el estilo de texto del título del eje horizontal. |
setYAxisTextStyle(textStyle) | BarChartBuilder | Establece el estilo de texto del eje vertical. |
setYAxisTitle(title) | BarChartBuilder | Agrega un título al eje vertical. |
setYAxisTitleTextStyle(textStyle) | BarChartBuilder | Establece el estilo de texto del título del eje vertical. |
useLogScale() | BarChartBuilder | 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 de gráfico, que puede incorporarse en documentos o elementos de la IU, o usarse como estático.
imagen.
reverseCategories()
Invierte el dibujo de series en el eje de dominio. Para los gráficos de rango vertical (como líneas, gráficos de áreas o columnas), esto significa que el eje horizontal se dibuja de derecha a izquierda. Para los gráficos de rango horizontal (como los gráficos de barras); esto significa que el eje vertical se dibuja desde arriba hacia abajo. En el caso de los gráficos circulares, esto significa que las porciones se dibujan en sentido antihorario.
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner. var builder = Charts.newPieChart(); builder.reverseCategories();
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
reverseDirection()
Invierte la dirección en la que crecen las barras a lo largo del eje horizontal. De forma predeterminada, los valores crecer de izquierda a derecha. Llamar a este método hace que crezcan de derecha a izquierda.
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setBackgroundColor(cssValue)
Establece el color de fondo del gráfico.
// Creates a line chart builder and sets the background color to gray var builder = Charts.newLineChart(); builder.setBackgroundColor("gray");
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
cssValue | String | Es el valor de CSS para el color (como "blue" o "#00f" ). |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setColors(cssValues)
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. var builder = Charts.newLineChart(); builder.setColors(["green", "red"]);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
cssValues | String[] | Es 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
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setDataSourceUrl(url)
Establece la URL de la fuente de datos que se utiliza para extraer datos de una fuente externa, como Google Hojas de cálculo. Si se proporcionan una URL de fuente de datos y una DataTable, se ignora la URL de la fuente de datos.
Para obtener más información sobre cómo consultar las fuentes de datos, revisa la documentación de Google Charts.
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
url | String | Es la URL de la fuente de datos, incluidos los parámetros de consulta. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setDataTable(tableBuilder)
Configura la tabla de datos que se usará para el gráfico con un DataTableBuilder. Este es un método de conveniencia
para configurar la tabla de datos sin necesidad de llamar a build()
.
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
tableBuilder | DataTableBuilder | Un compilador de tablas de datos. Como parte de esto, se crea instantáneamente una nueva tabla de datos. llamada, por lo que las actualizaciones que se realicen en el compilador no se reflejarán en el gráfico. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setDataTable(table)
Establece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X. El la primera columna debe ser una cadena y contener las etiquetas del eje horizontal. Cualquier cantidad de columnas puede seguir, todas deben ser numéricas. Cada columna se muestra como una línea separada.
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
table | DataTableSource | La tabla de datos que se usará para el gráfico. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setDataViewDefinition(dataViewDefinition)
Establece la definición de la vista de datos que se usará para el gráfico.
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
dataViewDefinition | DataViewDefinition | Un objeto de definición de vista de datos que define la vista que se debe derivada de la fuente de datos dada para el dibujo del gráfico. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setDimensions(width, height)
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 | La altura del gráfico en píxeles. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setLegendPosition(position)
Establece la posición de la leyenda con respecto al gráfico. De forma predeterminada, no hay una leyenda.
// Creates a line chart builder and sets the legend position to right. var builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
position | Position | La posición de la leyenda. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setLegendTextStyle(textStyle)
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. var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); var style = textStyleBuilder.build(); var builder = Charts.newLineChart(); builder.setLegendTextStyle(style);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
textStyle | TextStyle | El estilo de texto que se usará para la leyenda del gráfico. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setOption(option, value)
Establece las opciones avanzadas para este gráfico. Consulta las opciones disponibles para este gráfico. Este método no tiene efecto si la opción dada no es válida.
// Build a bar chart with a 1-second animation duration. var builder = Charts.newBarChart(); builder.setOption('animation.duration', 1000); var chart = builder.build();
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
option | String | La opción para establecer. |
value | Object | Valor que se va a establecer. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setRange(start, end)
Establece el rango del gráfico.
Si algún dato queda fuera del rango, el rango se expande para incluir esos datos. puntos.
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
start | Number | Valor de la línea de cuadrícula más baja del eje de rango. |
end | Number | Valor de la línea de cuadrícula más alta del eje de rango. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setStacked()
Usa líneas apiladas, lo que significa que los valores de línea y barra se apilan (acumulan). De forma predeterminada, no hay apilado.
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setTitle(chartTitle)
Establece el título del gráfico. El título se muestra centrado encima del gráfico.
// Creates a line chart builder and title to 'My Line Chart'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
chartTitle | String | el título del gráfico. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setTitleTextStyle(textStyle)
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. var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); var style = textStyleBuilder.build(); var builder = Charts.newLineChart(); builder.setTitleTextStyle(style);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
textStyle | TextStyle | El estilo de texto que se utilizará para el título del gráfico. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle() . |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setXAxisTextStyle(textStyle)
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. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setXAxisTextStyle(textStyle);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
textStyle | TextStyle | Es el estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle() . |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setXAxisTitle(title)
Agrega un título al eje horizontal. El título está centrado y aparece debajo del valor del eje con etiquetas de recursos.
// Creates a line chart builder and sets the X-axis title. var builder = Charts.newLineChart(); builder.setTitle('X-axis Title')
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
title | String | Es el título del eje X. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setXAxisTitleTextStyle(textStyle)
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. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setXAxisTitleTextStyle(textStyle);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
textStyle | TextStyle | Es el estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle() . |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setYAxisTextStyle(textStyle)
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. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setYAxisTextStyle(textStyle);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
textStyle | TextStyle | Es el estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle() . |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setYAxisTitle(title)
Agrega un título al eje vertical. El título está centrado y aparece a la izquierda del valor. con etiquetas de recursos.
// Creates a line chart builder and sets the Y-axis title. var builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title')
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
title | String | Es el título del eje Y. |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
setYAxisTitleTextStyle(textStyle)
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. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setYAxisTitleTextStyle(textStyle);
Parámetros
Nombre | Tipo | Descripción |
---|---|---|
textStyle | TextStyle | Es el estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle() . |
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.
useLogScale()
Convierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos). El rango son el eje vertical de los gráficos verticales (como líneas, áreas o columnas) y el eje horizontal para gráficos horizontales (como barras).
Volver
BarChartBuilder
: Este compilador es útil para el encadenamiento.