Class ColumnChartBuilder

ColumnChartBuilder

Compilador para gráficos de columnas. Para obtener más detalles, consulta la documentación de Google Charts.

En este ejemplo, se muestra cómo crear un gráfico de columnas con datos de una tabla de datos.

var sampleData = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Year")
    .addColumn(Charts.ColumnType.NUMBER, "Sales")
    .addColumn(Charts.ColumnType.NUMBER, "Expenses")
    .addRow(["2004", 1000, 400])
    .addRow(["2005", 1170, 460])
    .addRow(["2006", 660, 1120])
    .addRow(["2007", 1030, 540])
    .addRow(["2008", 800, 600])
    .addRow(["2009", 943, 678])
    .addRow(["2010", 1020, 550])
    .addRow(["2011", 910, 700])
    .addRow(["2012", 1230, 840])
    .build();

var chart = Charts.newColumnChart()
    .setTitle('Sales & Expenses')
    .setXAxisTitle('Year')
    .setYAxisTitle('Amount (USD)')
    .setDimensions(600, 500)
    .setDataTable(sampleData)
    .build();

Métodos

MétodoTipo de datos que se muestraDescripción breve
build()ChartCrea el gráfico.
reverseCategories()ColumnChartBuilderInvierte el dibujo de una serie en el eje del dominio.
setBackgroundColor(cssValue)ColumnChartBuilderEstablece el color de fondo del gráfico.
setColors(cssValues)ColumnChartBuilderEstablece los colores para las líneas del gráfico.
setDataSourceUrl(url)ColumnChartBuilderConfigura la URL de la fuente de datos que se usa para extraer datos de una fuente externa, como Hojas de cálculo de Google.
setDataTable(tableBuilder)ColumnChartBuilderEstablece la tabla de datos que se usará para el gráfico mediante un DataTableBuilder.
setDataTable(table)ColumnChartBuilderEstablece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X.
setDataViewDefinition(dataViewDefinition)ColumnChartBuilderEstablece la definición de vista de datos que se usará para el gráfico.
setDimensions(width, height)ColumnChartBuilderEstablece las dimensiones para el gráfico.
setLegendPosition(position)ColumnChartBuilderEstablece la posición de la leyenda con respecto al gráfico.
setLegendTextStyle(textStyle)ColumnChartBuilderEstablece el estilo de texto de la leyenda del gráfico.
setOption(option, value)ColumnChartBuilderEstablece las opciones avanzadas para este gráfico.
setRange(start, end)ColumnChartBuilderEstablece el rango del gráfico.
setStacked()ColumnChartBuilderUsa líneas apiladas, lo que significa que los valores de línea y barra se apilan (acumulan).
setTitle(chartTitle)ColumnChartBuilderEstablece el título del gráfico.
setTitleTextStyle(textStyle)ColumnChartBuilderEstablece el estilo de texto del título del gráfico.
setXAxisTextStyle(textStyle)ColumnChartBuilderEstablece el estilo de texto del eje horizontal.
setXAxisTitle(title)ColumnChartBuilderAgrega un título al eje horizontal.
setXAxisTitleTextStyle(textStyle)ColumnChartBuilderEstablece el estilo de texto del título del eje horizontal.
setYAxisTextStyle(textStyle)ColumnChartBuilderEstablece el estilo de texto del eje vertical.
setYAxisTitle(title)ColumnChartBuilderAgrega un título al eje vertical.
setYAxisTitleTextStyle(textStyle)ColumnChartBuilderEstablece el estilo de texto del título del eje vertical.
useLogScale()ColumnChartBuilderConvierte el eje de rango en una escala logarítmica (requiere que todos los valores sean positivos).

Documentación detallada

build()

Crea el gráfico.

Devolvedor

Chart: Es un objeto de gráfico que se puede incorporar en documentos y elementos de la IU, o que se puede usar como imagen estática.


reverseCategories()

Invierte el dibujo de una serie en el eje del dominio. Para los gráficos de rango vertical (como los gráficos de líneas, á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 de arriba abajo. Para 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();

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
cssValueStringEs el valor de CSS para el color (como "blue" o "#00f").

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.


setColors(cssValues)

Establece los colores para 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

NombreTipoDescripción
cssValuesString[]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.

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.


setDataSourceUrl(url)

Configura 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 una DataTable, se ignora la URL de la fuente de datos.

Si deseas obtener más información para consultar fuentes de datos, lee la documentación de Gráficos de Google.

Parámetros

NombreTipoDescripción
urlStringEs la URL de la fuente de datos, incluidos los parámetros de consulta.

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.


setDataTable(tableBuilder)

Establece la tabla de datos que se usará para el gráfico mediante un DataTableBuilder. Este es un método conveniente para configurar la tabla de datos sin necesidad de llamar a build().

Parámetros

NombreTipoDescripción
tableBuilderDataTableBuilderUn creador de tablas de datos Como parte de esta llamada, se crea de forma instantánea una nueva tabla de datos, por lo que las actualizaciones posteriores del compilador no se reflejarán en el gráfico.

Devolvedor

ColumnChartBuilder: 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. La primera columna debe ser una string y contener las etiquetas del eje horizontal. Cualquier cantidad de columnas puede estar seguida, todas deben ser numéricas. Cada columna se muestra como una línea separada.

Parámetros

NombreTipoDescripción
tableDataTableSourceLa tabla de datos que se usará para el gráfico.

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.


setDataViewDefinition(dataViewDefinition)

Establece la definición de vista de datos que se usará para el gráfico.

Parámetros

NombreTipoDescripción
dataViewDefinitionDataViewDefinitionEs 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.

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.


setDimensions(width, height)

Establece las dimensiones para el gráfico.

Parámetros

NombreTipoDescripción
widthIntegerIndica el ancho del gráfico en píxeles.
heightIntegerIndica la altura del gráfico en píxeles.

Devolvedor

ColumnChartBuilder: 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 leyenda.

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

Parámetros

NombreTipoDescripción
positionPositionLa posición de la leyenda.

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
textStyleTextStyleEl estilo de texto que se utilizará para la leyenda del gráfico.

Devolvedor

ColumnChartBuilder: 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 proporcionada no es válida.

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

Parámetros

NombreTipoDescripción
optionStringLa opción de configurar.
valueObjectEl valor que se establecerá.

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.


setRange(start, end)

Establece el rango del gráfico.

Si algún dato se encuentra fuera del rango, el rango se expande para incluir esos datos.

Parámetros

NombreTipoDescripción
startNumberEl valor de la línea de cuadrícula más baja del eje de rango.
endNumberEl valor de la línea de cuadrícula más alta del eje de rango.

Devolvedor

ColumnChartBuilder: 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 apilamiento.

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
chartTitleStringel título del gráfico.

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
textStyleTextStyleEl estilo de texto que se utilizará para el título del gráfico. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle().

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
textStyleTextStyleEl estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle().

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.


setXAxisTitle(title)

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.
var builder = Charts.newLineChart();
builder.setTitle('X-axis Title')

Parámetros

NombreTipoDescripción
titleStringEs el título del eje X.

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
textStyleTextStyleEl estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle().

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
textStyleTextStyleEl estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle().

Devolvedor

ColumnChartBuilder: 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 de las etiquetas de valor.

// Creates a line chart builder and sets the Y-axis title.
var builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title')

Parámetros

NombreTipoDescripción
titleStringEs el título del eje Y.

Devolvedor

ColumnChartBuilder: 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

NombreTipoDescripción
textStyleTextStyleEl estilo de texto que se usará para el título del eje horizontal. Puedes crear un objeto TextStyleBuilder llamando a Charts.newTextStyle().

Devolvedor

ColumnChartBuilder: 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 eje de rango es el vertical para los gráficos verticales (como de línea, área o columna) y el eje horizontal para los gráficos horizontales (como las barras).

Devolvedor

ColumnChartBuilder: Este compilador es útil para el encadenamiento.