Class ScatterChartBuilder

ScatterChartBuilder

Es un compilador de diagramas de dispersión. 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 dispersión. Los datos se importan de una hoja de cálculo de Google.

// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=C1%3AD' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';

const chartBuilder = Charts.newScatterChart()
                         .setTitle('Adjusted GDP & U.S. Population')
                         .setXAxisTitle('U.S. Population (millions)')
                         .setYAxisTitle('Adjusted GDP ($ billions)')
                         .setDimensions(600, 500)
                         .setLegendPosition(Charts.Position.NONE)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

Métodos

MétodoTipo de datos que se devuelveDescripción breve
build()ChartCompila el gráfico.
setBackgroundColor(cssValue)ScatterChartBuilderEstablece el color de fondo del gráfico.
setColors(cssValues)ScatterChartBuilderEstablece los colores de las líneas del gráfico.
setDataSourceUrl(url)ScatterChartBuilderEstablece 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)ScatterChartBuilderEstablece la tabla de datos que se usará para el gráfico con un DataTableBuilder.
setDataTable(table)ScatterChartBuilderEstablece la tabla de datos que contiene las líneas del gráfico, así como las etiquetas del eje X.
setDataViewDefinition(dataViewDefinition)ScatterChartBuilderEstablece la definición de la vista de datos que se usará para el gráfico.
setDimensions(width, height)ScatterChartBuilderEstablece las dimensiones del gráfico.
setLegendPosition(position)ScatterChartBuilderEstablece la posición de la leyenda con respecto al gráfico.
setLegendTextStyle(textStyle)ScatterChartBuilderEstablece el estilo de texto de la leyenda del gráfico.
setOption(option, value)ScatterChartBuilderEstablece opciones avanzadas para este gráfico.
setPointStyle(style)ScatterChartBuilderEstablece el estilo de los puntos de la línea.
setTitle(chartTitle)ScatterChartBuilderEstablece el título del gráfico.
setTitleTextStyle(textStyle)ScatterChartBuilderEstablece el estilo de texto del título del gráfico.
setXAxisLogScale()ScatterChartBuilderConvierte el eje horizontal en una escala logarítmica (requiere que todos los valores sean positivos).
setXAxisRange(start, end)ScatterChartBuilderEstablece el rango del eje horizontal del gráfico.
setXAxisTextStyle(textStyle)ScatterChartBuilderEstablece el estilo del texto del eje horizontal.
setXAxisTitle(title)ScatterChartBuilderAgrega un título al eje horizontal.
setXAxisTitleTextStyle(textStyle)ScatterChartBuilderEstablece el estilo de texto del título del eje horizontal.
setYAxisLogScale()ScatterChartBuilderConvierte el eje vertical en una escala logarítmica (requiere que todos los valores sean positivos).
setYAxisRange(start, end)ScatterChartBuilderEstablece el rango del eje vertical del gráfico.
setYAxisTextStyle(textStyle)ScatterChartBuilderEstablece el estilo del texto del eje vertical.
setYAxisTitle(title)ScatterChartBuilderAgrega un título al eje vertical.
setYAxisTitleTextStyle(textStyle)ScatterChartBuilderEstablece el estilo de texto del título del eje vertical.

Documentación detallada

build()

Compila el gráfico.

Volver

Chart: Es un objeto Chart que se puede incorporar en documentos o elementos de la IU, o bien usarse como una imagen estática.


setBackgroundColor(cssValue)

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

NombreTipoDescripción
cssValueStringEs el valor CSS del color (por ejemplo, "blue" o "#00f").

Volver

ScatterChartBuilder: Este compilador, ú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.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

Parámetros

NombreTipoDescripción
cssValuesString[]Es un array de valores CSS de color, como ["red", "#acf"]. El n-ésimo elemento del array representa el color de la n-ésima línea del gráfico.

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setDataSourceUrl(url)

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 objeto 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 Google Charts.

Parámetros

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

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setDataTable(tableBuilder)

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

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

Volver

ScatterChartBuilder: Este compilador, ú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 cadena y contener las etiquetas del eje horizontal. Pueden seguir cualquier cantidad de columnas, todas deben ser numéricas. Cada columna se muestra como una línea separada.

Parámetros

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

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setDataViewDefinition(dataViewDefinition)

Establece la definición de la 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 proporcionada para el dibujo del gráfico.

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setDimensions(width, height)

Establece las dimensiones del gráfico.

Parámetros

NombreTipoDescripción
widthIntegerAncho del gráfico en píxeles.
heightIntegerAltura del gráfico en píxeles.

Volver

ScatterChartBuilder: Este compilador, ú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.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

Parámetros

NombreTipoDescripción
positionPositionPosición de la leyenda.

Volver

ScatterChartBuilder: Este compilador, ú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.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

Parámetros

NombreTipoDescripción
textStyleTextStyleEs el estilo de texto que se usará para la leyenda del gráfico.

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setOption(option, value)

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 a scatter chart with a 1-second animation duration.
const builder = Charts.newScatterChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();

Parámetros

NombreTipoDescripción
optionStringOpción que se configurará.
valueObjectEs el valor que se establecerá.

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setPointStyle(style)

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

NombreTipoDescripción
stylePointStyleEs el estilo que se usará para los puntos de la línea.

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.

Consulta también


setTitle(chartTitle)

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

NombreTipoDescripción
chartTitleStringEl título del gráfico

Volver

ScatterChartBuilder: Este compilador, ú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.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setTitleTextStyle(style);

Parámetros

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

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setXAxisLogScale()

Convierte el eje horizontal en una escala logarítmica (requiere que todos los valores sean positivos).

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setXAxisRange(start, end)

Establece el rango del eje horizontal del gráfico.

Si algún punto de datos queda fuera del rango, este se expande para incluir esos puntos.

// Creates a scatter chart builder and sets the X-axis range to be 0 to 100.
const builder = Charts.newTableChart();
builder.setXAxisRange(0, 100);

Parámetros

NombreTipoDescripción
startNumberEs el valor de la línea de cuadrícula más baja del eje horizontal.
endNumberEs el valor de la línea de cuadrícula más alta del eje horizontal.

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setXAxisTextStyle(textStyle)

Establece el estilo del 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

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

Volver

ScatterChartBuilder: Este compilador, ú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 los valores del eje.

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

Parámetros

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

Volver

ScatterChartBuilder: Este compilador, ú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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);

Parámetros

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

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setYAxisLogScale()

Convierte el eje vertical en una escala logarítmica (requiere que todos los valores sean positivos).

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setYAxisRange(start, end)

Establece el rango para el eje vertical del gráfico. Si algún punto de datos queda fuera del rango, este se expande para incluir esos puntos.

// Creates a scatter chart builder and sets the Y-axis range to be 0 to 100.
const builder = Charts.newTableChart();
builder.setYAxisRange(0, 100);

Parámetros

NombreTipoDescripción
startNumberEs el valor de la línea de cuadrícula más baja del eje vertical.
endNumberEs el valor de la línea de cuadrícula más alta del eje vertical.

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.


setYAxisTextStyle(textStyle)

Establece el estilo del 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

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

Volver

ScatterChartBuilder: Este compilador, ú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 valores.

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

Parámetros

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

Volver

ScatterChartBuilder: Este compilador, ú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.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

Parámetros

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

Volver

ScatterChartBuilder: Este compilador, útil para el encadenamiento.