Visualización: Gráfico de burbujas

Es la duración de la animación en milisegundos. Para obtener más detalles, consulta la documentación sobre animaciones.

Es la función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:

• "lineal": velocidad constante.
• "in" - Acercarse con suavidad: Comienza despacio y auméntalo.
• "out": aléjate con facilidad: comienza rápido y desacelera.
• "inAndOut": Entra y sale con cuidado. Comienza despacio, auméntalo y luego desacelera.

Determina si se animará el gráfico en el dibujo inicial. Si es true, el gráfico comenzará en el modelo de referencia y se animará a su estado final.

Es el lugar en el que se colocan los títulos de los ejes en comparación con el área del gráfico. Valores admitidos:

• in: Dibuja los títulos de los ejes dentro del área del gráfico.
• out: Dibuja los títulos de los ejes fuera del área del gráfico.
• ninguno: Omite los títulos de los ejes.

El color de fondo del área principal del gráfico. Puede ser una cadena simple de color HTML, por ejemplo: 'red' o '#00cc00', o un objeto con las siguientes propiedades.

El color del borde del gráfico, como una cadena de color HTML.

Es el ancho del borde en píxeles.

El color de relleno del gráfico, como una cadena HTML de color.

Un objeto con miembros para configurar las propiedades visuales de las burbujas.

La opacidad de las burbujas, donde 0 es completamente transparente y 1 es completamente opaco.

El color del trazo de las burbujas.

Un objeto que especifica el estilo de texto de la burbuja. El objeto tiene este formato:

{color: <string>, fontName: <string>, fontSize: <number>}

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (donde se dibuja el gráfico, sin incluir los ejes ni las leyendas). Se admiten dos formatos: un número o un número seguido de %. Un número simple es un valor en píxeles; un número seguido de % es un porcentaje. Ejemplo: chartArea:{left:20,top:0,width:'50%',height:'75%'}

• stroke: Es el color, proporcionado como una cadena hexadecimal o el nombre del color en inglés.
• strokeWidth: Si se proporciona, dibuja un borde alrededor del área del gráfico del ancho determinado (y con el color stroke).

Indica qué tan lejos se debe dibujar el gráfico desde el borde izquierdo.

Indica qué tan lejos se debe dibujar el gráfico desde el borde superior.

Ancho del área del gráfico.

Altura del área del gráfico.

Los colores que se usarán para los elementos del gráfico. Un array de cadenas, en el que cada elemento es una cadena de color HTML, por ejemplo: colors:['red','#004411'].

Es un objeto que especifica una asignación entre los valores y los colores de la columna de colores o una escala de gradiente. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

Si está presente, especifica un valor mínimo para los datos de color del gráfico. Los valores de datos de color de este valor y de valores inferiores se renderizarán como el primer color en el rango colorAxis.colors.

Si está presente, especifica un valor máximo para los datos de color del gráfico. Los valores de datos de color de este valor y de versiones superiores se renderizarán como el último color del rango colorAxis.colors.

Si está presente, controla cómo se asocian los valores con los colores. Cada valor se asocia con el color correspondiente en el array colorAxis.colors. Estos valores se aplican a los datos de color del gráfico. La coloración se realiza según un gradiente de los valores especificados aquí. No especificar un valor para esta opción equivale a especificar [minValue, maxValue].

Colores para asignar a valores en la visualización. Un array de cadenas, en el que cada elemento es una cadena de color HTML, por ejemplo: colorAxis: {colors:['red','#004411']}. Debes tener al menos dos valores; el gradiente incluirá todos tus valores, más los valores intermedios calculados, con el primer color como el valor más pequeño y el último color como el más alto.

Un objeto que especifica el estilo de la leyenda de color del gradiente.

Posición de la leyenda. Puede ser una de las siguientes:

• “top”: se encuentra encima del gráfico.
• "parte inferior": se encuentra debajo del gráfico.
• "in": dentro del gráfico, en la parte superior.
• "none": No se muestra ninguna leyenda.

Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato:

{color: <string>, fontName: <string>, fontSize: <number>}

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Es una cadena de formato para etiquetas numéricas. Este es un subconjunto del conjunto de patrones de ICU . Por ejemplo, {numberFormat:'.##'} mostrará los valores “10.66”, “10.6” y “10.0” para los valores 10.666, 10.6 y 10.

Si el gráfico arroja eventos basados en el usuario o reacciona a la interacción del usuario. Si es falso, el gráfico no arrojará "seleccionar" ni otros eventos basados en interacciones (pero sí arrojará eventos listos o de error), ni mostrará texto flotante ni cambiará según la entrada del usuario.

La opción explorer permite a los usuarios desplazarse lateralmente y acercar o alejar los gráficos de Google. explorer: {} proporciona el comportamiento predeterminado del explorador, lo que permite a los usuarios desplazarse horizontal y verticalmente con el arrastre, y acercar y alejar el mapa con el desplazamiento.

Esta función es experimental y puede cambiar en versiones futuras.

Nota: El explorador solo funciona con ejes continuos (como números o fechas).

El explorador de Gráficos de Google admite tres acciones:

• dragToPan: Arrastra para desplazarte por el gráfico de forma horizontal y vertical. Para desplazarte solo a lo largo del eje horizontal, usa explorer: { axis: 'horizontal' }. Del mismo modo para el eje vertical.
• dragToZoom: El comportamiento predeterminado del explorador es acercar y alejar el zoom cuando el usuario se desplaza. Si se usa explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, arrastrar un área rectangular se acerca a esa área. Te recomendamos usar rightClickToReset cada vez que se use dragToZoom. Consulta explorer.maxZoomIn, explorer.maxZoomOut y explorer.zoomDelta para personalizar el zoom.
• rightClickToReset: Si haces clic con el botón derecho en el gráfico, este volverá al nivel de zoom y desplazamiento lateral original.

De forma predeterminada, los usuarios pueden desplazarse horizontal y verticalmente cuando se usa la opción explorer. Si deseas que los usuarios solo puedan desplazarse horizontalmente, usa explorer: { axis: 'horizontal' }. Del mismo modo, explorer: { axis: 'vertical' } permite el desplazamiento lateral solo vertical.

De forma predeterminada, los usuarios pueden desplazarse por todos lados, independientemente de la ubicación de los datos. Para asegurarte de que los usuarios no se desplacen más allá del gráfico original, usa explorer: { keepInBounds: true }.

El máximo que puede acercar el explorador. De forma predeterminada, los usuarios podrán acercar la imagen lo suficiente como para ver solo el 25% de la vista original. Configurar explorer: { maxZoomIn: .5 } permitiría a los usuarios acercar la imagen solo lo suficiente como para ver la mitad de la vista original.

El máximo que puede alejar el explorador. De forma predeterminada, los usuarios podrán alejarse lo suficiente como para que el gráfico ocupe solo 1/4 del espacio disponible. Configurar explorer: { maxZoomOut: 8 } permitiría que los usuarios se alejen lo suficiente como para que el gráfico ocupe solo 1/8 del espacio disponible.

Cuando los usuarios acercan o alejan el mapa, explorer.zoomDelta determina cuánto acercan. Cuanto menor sea el número, más suave y lento será el zoom.

El tamaño de fuente predeterminado, en píxeles, de todo el texto en el gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico.

Es el tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto usando propiedades para elementos específicos del gráfico.

Dibuja el gráfico dentro de un marco intercalado. (Ten en cuenta que, en IE8, esta opción se ignora; todos los gráficos de IE8 se dibujan en iframes).

Un objeto con miembros para configurar varios elementos del eje horizontal. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

La línea de base para el eje horizontal.

El color de la línea de base para el eje horizontal. Puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'.

La dirección en la que crecen los valores a lo largo del eje horizontal. Especifica -1 para invertir el orden de los valores.

Una cadena de formato para etiquetas de ejes numéricos. Este es un subconjunto del conjunto de patrones de ICU . Por ejemplo, {format:'#,###%'} mostrará los valores “1,000%”, “750%” y “50%” para los valores 10, 7.5 y 0.5. También puedes proporcionar cualquiera de los siguientes valores:

• {format: 'none'}: Muestra los números sin formato (p.ej., 8,000,000)
• {format: 'decimal'}: Muestra números con separadores de miles (p.ej., 8 000 000)
• {format: 'scientific'}: muestra números en notación científica (p.ej., 8e6)
• {format: 'currency'}: Muestra los números en la moneda local (p.ej., USD 8,000,000.00)
• {format: 'percent'}: Muestra los números como porcentajes (p.ej., 800,000,000%)
• {format: 'short'}: Muestra números abreviados (p.ej., 8 millones)
• {format: 'long'}: Muestra los números como palabras completas (p.ej., 8 millones)

El formato real que se aplica a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más detalles, consulta cómo cargar gráficos con una configuración regional específica .

En el cálculo de los valores de marcas y las líneas de cuadrícula, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes, y las alternativas se rechazarán si se duplican o se superponen las etiquetas de marca con formato. Por lo tanto, puedes especificar format:"#" si solo quieres mostrar valores enteros de marca, pero ten en cuenta que si ninguna alternativa cumple con esta condición, no se mostrarán marcas de cuadrícula ni marcas.

Un objeto con propiedades para configurar las líneas de cuadrícula en el eje horizontal. Ten en cuenta que las líneas de cuadrícula del eje horizontal se dibujan de forma vertical. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

{color: '#333', minSpacing: 20}

El color de las líneas de cuadrícula horizontales dentro del área del gráfico. Especifica una cadena de color HTML válida.

Es la cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico. Si especificas un número positivo para gridlines.count, se usará a fin de calcular el minSpacing entre las líneas de cuadrícula. Puedes especificar un valor de 1 para dibujar solo una línea de cuadrícula o 0 para no dibujar ninguna. Especifica -1, que es la opción predeterminada, para calcular automáticamente la cantidad de líneas de cuadrícula según otras opciones.

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha/fecha y hora/hora del día cuando se usa con líneas de cuadrícula calculadas por el gráfico. Permite dar formato a años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Puedes encontrar información adicional en Fechas y horarios.

Un objeto con miembros para configurar las líneas de cuadrícula secundarias en el eje horizontal, similar a la opción hAxis.gridlines.

El color de las líneas de cuadrícula horizontales secundarias dentro del área del gráfico. Especifica una cadena de color HTML válida.

La opción minorGridlines.count está obsoleta en su mayoría, excepto por la configuración del recuento en 0 para inhabilitar las líneas de cuadrícula secundarias. La cantidad de líneas de cuadrícula secundarias ahora depende por completo del intervalo entre las líneas de cuadrícula principales (consulta hAxis.gridlines.interval) y el espacio mínimo requerido (consulta hAxis.minorGridlines.minSpacing).

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, fecha y hora y hora del día cuando se usa con el gráfico menorGridlines calculada. Permite formatear años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Puedes encontrar información adicional en Fechas y horarios.

La propiedad hAxis que hace que el eje horizontal sea una escala logarítmica (requiere que todos los valores sean positivos). Si la respuesta es verdadera, significa que sí.

La propiedad hAxis que hace que el eje horizontal sea una escala logarítmica. Puede ser una de las siguientes:

• null: No se realiza ningún escalamiento logarítmico.
• "log": Escalamiento logarítmico. No se trazan los valores negativos y de cero. Esta opción es igual a la configuración de hAxis: { logscale: true }.
• 'MirrorLog': Escala logarítmica en la que se trazan los valores negativos y de cero. El valor trazado de un número negativo es el negativo del logaritmo del valor absoluto. Los valores cercanos a 0 se trazan en una escala lineal.

Posición del texto del eje horizontal, en relación con el área del gráfico. Valores admitidos: “out”, “in”, “none”.

Un objeto que especifica el estilo de texto del eje horizontal. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Reemplaza las marcas del eje X generadas automáticamente por el array especificado. Cada elemento del array debe ser un valor de marca válido (como un número, fecha, fecha y hora o timeofday) o un objeto. Si es un objeto, debe tener una propiedad v para el valor de marca y una propiedad f opcional que contenga la cadena literal que se mostrará como etiqueta.

ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques viewWindow.min o viewWindow.max para anular.

Ejemplos:

• hAxis: { ticks: [5,10,15,20] }
• hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
• hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
• hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

La propiedad hAxis que especifica el título del eje horizontal.

Un objeto que especifica el estilo de texto del título del eje horizontal. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Mueve el valor máximo del eje horizontal al valor especificado; se posicionará hacia la derecha en la mayoría de los gráficos. Se ignora si se establece en un valor inferior al valor X máximo de los datos. hAxis.viewWindow.max anula esta propiedad.

Mueve el valor mínimo del eje horizontal al valor especificado; este se posicionará hacia la izquierda en la mayoría de los gráficos. Se ignora si se establece en un valor mayor que el valor X mínimo de los datos. hAxis.viewWindow.min anula esta propiedad.

Especifica cómo escalar el eje horizontal para renderizar los valores dentro del área del gráfico. Se admiten los siguientes valores de cadena:

• "pretty": Escala los valores horizontales para que los valores de datos máximo y mínimo se rendericen un poco dentro del área izquierda y derecha del área del gráfico. El objeto viewWindow se expande a la línea de cuadrícula principal más cercana para los números, o a la línea de cuadrícula secundaria más cercana para las fechas y horas.
• "maximized": escala los valores horizontales para que los valores de datos máximo y mínimo toquen la izquierda y la derecha del área del gráfico. Esto hará que haxis.viewWindow.min y haxis.viewWindow.max se ignoren.
• "explícito": Es una opción obsoleta para especificar los valores de escala izquierdo y derecho del área del gráfico. (obsoleto porque es redundante con haxis.viewWindow.min y haxis.viewWindow.max). Los valores de datos fuera de estos valores se recortarán. Debes especificar un objeto hAxis.viewWindow que describa los valores máximos y mínimos que se mostrarán.

Especifica el rango de recorte del eje horizontal.

El valor máximo de datos horizontales que se renderizará.

Se ignora cuando hAxis.viewWindowMode es "pretty" o "maximized".

El valor mínimo de datos horizontales que se renderizará.

Se ignora cuando hAxis.viewWindowMode es "pretty" o "maximized".

Altura del gráfico en píxeles.

Un objeto con miembros para configurar varios aspectos de la leyenda. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}

Alineación de la leyenda Puede ser una de las siguientes:

• "start": alineado con el inicio del área asignada a la leyenda.
• "center": Se centra en el área asignada a la leyenda.
• "end": Alineado con el final del área asignada a la leyenda.

El inicio, el centro y el final están relacionados con el estilo (horizontal o vertical) de la leyenda. Por ejemplo, en una leyenda "derecha", "inicio" y "final" están en la parte inferior y superior, respectivamente. En el caso de una leyenda "superior", "inicio" y "final" estarían a la izquierda y a la derecha del área, respectivamente.

El valor predeterminado depende de la posición de la leyenda. Para las leyendas “inferior”, el valor predeterminado es “center”; para las leyendas “inferior”, el valor predeterminado es “start”.

Cantidad máxima de líneas en la leyenda. Configúralo en un número mayor que uno para agregar líneas a tu leyenda. Nota: La lógica exacta que se usa para determinar el número real de líneas renderizadas sigue en proceso de cambio.

Por el momento, esta opción solo funciona cuando legend.position es “top”.

Índice inicial de página basado en cero seleccionado de la leyenda.

Posición de la leyenda. Puede ser una de las siguientes:

• "parte inferior": se encuentra debajo del gráfico.
• "left": se encuentra a la izquierda del gráfico, siempre que el eje izquierdo no tenga ninguna serie asociada. Por lo tanto, si quieres que la leyenda se encuentre a la izquierda, usa la opción targetAxisIndex: 1.
• “in”: dentro del gráfico, en la esquina superior izquierda.
• "none": No se muestra ninguna leyenda.
• "right": a la derecha del gráfico. No es compatible con la opción vAxes.
• “top”: se encuentra encima del gráfico.

Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Cuando selectionMode es 'multiple', los usuarios pueden seleccionar varios datos.

Un objeto de objetos, en el que las claves son nombres de series (los valores en la columna Color) y cada objeto que describe el formato de la serie correspondiente en el gráfico. Si no se especifica una serie o un valor, se usará el valor global. Cada objeto admite las siguientes propiedades:

• color: Es el color que se usará para esta serie. Especifica una cadena de color HTML válida.
• visibleInLegend: Es un valor booleano. Verdadero significa que la serie debe tener una entrada de leyenda y falso significa que no debería tenerla. La opción predeterminada es true.

series: {'Europe': {color: 'green'}}

Un objeto con miembros para configurar cómo se asocian los valores con el tamaño de burbuja. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

 {minValue: 0,  maxSize: 20}

Radio máximo de la burbuja más grande posible, en píxeles.

El valor de tamaño (como aparece en los datos del gráfico) que se asignará a sizeAxis.maxSize. Los valores más altos se recortarán a este valor.

Radio mínimo de la burbuja más pequeña posible, en píxeles.

El valor de tamaño (como aparece en los datos del gráfico) que se asignará a sizeAxis.minSize. Los valores más pequeños se recortarán a este valor.

Si esta preferencia se establece como "true", ordena las burbujas por tamaño para que las más pequeñas aparezcan encima de las más grandes. Si es falso, las burbujas se ordenan según su orden en DataTable.

Un tema es un conjunto de valores de opciones predefinidos que trabajan en conjunto para lograr un comportamiento o efecto visual de gráfico específico. Por el momento, solo hay un tema disponible:

• "maximized": Maximiza el área del gráfico y dibuja la leyenda y todas las etiquetas dentro del área del gráfico. Establece las siguientes opciones:

  chartArea: {width: '100%', height: '100%'},
  legend: {position: 'in'},
  titlePosition: 'in', axisTitlesPosition: 'in',
  hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
          

  .

Es el texto que se mostrará sobre el gráfico.

Dónde colocar el título del gráfico en comparación con el área del gráfico Valores admitidos:

• in: Dibuja el título dentro del área del gráfico.
• out: Dibuja el título fuera del área del gráfico.
• ninguno: Omite el título.

Un objeto que especifica el estilo de texto del título. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

{textStyle: {color: '#FF0000'}, showColorCode: true}

Si la estableces como verdadera, usa información sobre la herramienta renderizada por HTML (en lugar de SVG). Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles.

Nota: La personalización del contenido HTML de la información sobre la herramienta mediante el rol de datos de la columna de información no es compatible con la visualización del diagrama de burbujas.

Un objeto que especifica el estilo de texto de la información sobre la herramienta. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

La interacción del usuario que hace que se muestre el cuadro de información:

• "enfoque": La información sobre la herramienta se mostrará cuando el usuario coloque el cursor sobre el elemento.
• "none": No se mostrará la información sobre la herramienta.
• "selección": La información sobre la herramienta se mostrará cuando el usuario seleccione el elemento.

Un objeto con miembros para configurar varios elementos del eje vertical. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

La propiedad vAxis, que especifica el modelo de referencia del eje vertical. Si la línea de base es más grande que la línea de cuadrícula más alta o más pequeña que la línea de cuadrícula más baja, se redondeará a la línea de cuadrícula más cercana.

Especifica el color de la línea de base para el eje vertical. Puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'.

La dirección en la que crecen los valores a lo largo del eje vertical. De forma predeterminada, los valores bajos se muestran en la parte inferior del gráfico. Especifica -1 para invertir el orden de los valores.

Una cadena de formato para etiquetas de ejes numéricos. Este es un subconjunto del conjunto de patrones de ICU . Por ejemplo, {format:'#,###%'} mostrará los valores “1,000%”, “750%” y “50%” para los valores 10, 7.5 y 0.5. También puedes proporcionar cualquiera de los siguientes valores:

• {format: 'none'}: Muestra los números sin formato (p.ej., 8,000,000)
• {format: 'decimal'}: Muestra números con separadores de miles (p.ej., 8 000 000)
• {format: 'scientific'}: muestra números en notación científica (p.ej., 8e6)
• {format: 'currency'}: Muestra los números en la moneda local (p.ej., USD 8,000,000.00)
• {format: 'percent'}: Muestra los números como porcentajes (p.ej., 800,000,000%)
• {format: 'short'}: Muestra números abreviados (p.ej., 8 millones)
• {format: 'long'}: Muestra los números como palabras completas (p.ej., 8 millones)

El formato real que se aplica a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más detalles, consulta cómo cargar gráficos con una configuración regional específica .

En el cálculo de los valores de marcas y las líneas de cuadrícula, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes, y las alternativas se rechazarán si se duplican o se superponen las etiquetas de marca con formato. Por lo tanto, puedes especificar format:"#" si solo quieres mostrar valores enteros de marca, pero ten en cuenta que si ninguna alternativa cumple con esta condición, no se mostrarán marcas de cuadrícula ni marcas.

Un objeto con miembros para configurar las líneas de cuadrícula en el eje vertical. Ten en cuenta que las líneas de cuadrícula del eje vertical se dibujan de forma horizontal. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación:

{color: '#333', minSpacing: 20}

El color de las líneas de cuadrícula verticales dentro del área del gráfico Especifica una cadena de color HTML válida.

Es la cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico. Si especificas un número positivo para gridlines.count, se usará a fin de calcular el minSpacing entre las líneas de cuadrícula. Puedes especificar un valor de 1 para dibujar solo una línea de cuadrícula o 0 para no dibujar ninguna. Especifica -1, que es la opción predeterminada, para calcular automáticamente la cantidad de líneas de cuadrícula según otras opciones.

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha/fecha y hora/hora del día cuando se usa con líneas de cuadrícula calculadas por el gráfico. Permite dar formato a años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

Puedes encontrar información adicional en Fechas y horarios.

Un objeto con miembros para configurar las líneas de cuadrícula secundarias en el eje vertical, similar a la opción vAxis.gridlines.

El color de las líneas de cuadrícula verticales secundarias dentro del área del gráfico. Especifica una cadena de color HTML válida.

La opción minorGridlines.count está obsoleta en su mayoría, excepto para inhabilitar las líneas de cuadrícula secundarias si se establece el recuento en 0. La cantidad de líneas de cuadrícula menores depende del intervalo entre las líneas de cuadrícula principales (consulta vAxis.gridlines.interval) y el espacio mínimo requerido (consulta vAxis.minorGridlines.minSpacing).

Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, fecha y hora y hora del día cuando se usa con el gráfico menorGridlines calculada. Permite formatear años, meses, días, horas, minutos, segundos y milisegundos.

El formato general es:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Puedes encontrar información adicional en Fechas y horarios.

Si es verdadero, el eje vertical es una escala logarítmica. Nota: Todos los valores deben ser positivos.

La propiedad vAxis que hace que el eje vertical sea una escala logarítmica. Puede ser una de las siguientes:

• null: No se realiza ningún escalamiento logarítmico.
• "log": Escalamiento logarítmico. No se trazan los valores negativos y de cero. Esta opción es igual a la configuración de vAxis: { logscale: true }.
• 'MirrorLog': Escala logarítmica en la que se trazan los valores negativos y de cero. El valor trazado de un número negativo es el negativo del logaritmo del valor absoluto. Los valores cercanos a 0 se trazan en una escala lineal.

Posición del texto del eje vertical, en relación con el área del gráfico. Valores admitidos: “out”, “in”, “none”.

Un objeto que especifica el estilo de texto del eje vertical. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Reemplaza las marcas del eje Y generadas automáticamente por el array especificado. Cada elemento del array debe ser un valor de marca válido (como un número, fecha, fecha y hora o timeofday) o un objeto. Si es un objeto, debe tener una propiedad v para el valor de marca y una propiedad f opcional que contenga la cadena literal que se mostrará como etiqueta.

ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques viewWindow.min o viewWindow.max para anular.

Ejemplos:

• vAxis: { ticks: [5,10,15,20] }
• vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
• vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
• vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

La propiedad vAxis que especifica un título para el eje vertical

Un objeto que especifica el estilo de texto del título del eje vertical. El objeto tiene este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color puede ser cualquier cadena HTML de color, por ejemplo: 'red' o '#00cc00'. Consulta también fontName y fontSize.

Mueve el valor máximo del eje vertical al valor especificado; este aparecerá hacia arriba en la mayoría de los gráficos. Se ignora si se establece en un valor inferior al valor Y máximo de los datos. vAxis.viewWindow.max anula esta propiedad.

Mueve el valor mínimo del eje vertical al valor especificado; este aparecerá hacia abajo en la mayoría de los gráficos. Se ignora si se establece en un valor mayor que el valor Y mínimo de los datos. vAxis.viewWindow.min anula esta propiedad.

Especifica cómo escalar el eje vertical para renderizar los valores dentro del área del gráfico. Se admiten los siguientes valores de cadena:

• "pretty": Escala los valores verticales para que los valores de datos máximo y mínimo se rendericen un poco dentro de la parte inferior y superior del área del gráfico. El objeto viewWindow se expande a la línea de cuadrícula principal más cercana para los números, o a la línea de cuadrícula secundaria más cercana para las fechas y horas.
• "maximized": escala los valores verticales para que los valores de datos máximo y mínimo toquen la parte superior e inferior del área del gráfico. Esto hará que vaxis.viewWindow.min y vaxis.viewWindow.max se ignoren.
• "explícito": Es una opción obsoleta para especificar los valores de escala inferior y superior del área del gráfico. (Obsoleto porque es redundante con vaxis.viewWindow.min y vaxis.viewWindow.max. Se recortarán los valores de datos que estén fuera de estos valores. Debes especificar un objeto vAxis.viewWindow que describa los valores máximos y mínimos que se mostrarán.

Especifica el rango de recorte del eje vertical.

El valor máximo de datos verticales que se renderizará.

Se ignora cuando vAxis.viewWindowMode es "pretty" o "maximized".

El valor de datos vertical mínimo que se renderizará.

Se ignora cuando vAxis.viewWindowMode es "pretty" o "maximized".

Es el ancho del gráfico (en píxeles).

Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento ready. Extended description.

Muestra el objeto de acción de información sobre la herramienta con el actionID solicitado.

Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento id del gráfico. El formato de id aún no está documentado (son los valores de retorno de los controladores de eventos), pero estos son algunos ejemplos:

var cli = chart.getChartLayoutInterface();

Altura del área del gráfico

cli.getBoundingBox('chartarea').height

Ancho de la tercera barra en la primera serie de un gráfico de barras o columnas

cli.getBoundingBox('bar#0#2').width

Cuadro de límite de la quinta cuña de un gráfico circular

cli.getBoundingBox('slice#4')

Cuadro de límite de los datos del gráfico de un gráfico vertical (por ejemplo, las columnas):

cli.getBoundingBox('vAxis#0#gridline')

Cuadro de límite de los datos del gráfico de un gráfico horizontal (p.ej., de barras):

cli.getBoundingBox('hAxis#0#gridline')

Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico.

Muestra un objeto que contiene la parte izquierda, superior, ancho y altura del contenido del gráfico (es decir, sin incluir las etiquetas ni la leyenda):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left

cli.getChartAreaBoundingBox().top

cli.getChartAreaBoundingBox().height

cli.getChartAreaBoundingBox().width

Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico.

Muestra un objeto que contiene información sobre la ubicación del gráfico y sus elementos en la pantalla.

Se puede llamar a los siguientes métodos en el objeto que se muestra:

• getBoundingBox
• getChartAreaBoundingBox
• getHAxisValue
• getVAxisValue
• getXLocation
• getYLocation

Llámalo después de que se dibuje el gráfico.

Muestra el valor de datos horizontales en xPosition, que es un desplazamiento de píxeles desde el borde izquierdo del contenedor de gráfico. Puede ser negativo.

Ejemplo: chart.getChartLayoutInterface().getHAxisValue(400).

Llámalo después de que se dibuje el gráfico.

Muestra el gráfico serializado como un URI de imagen.

Llámalo después de que se dibuje el gráfico.

Consulta Cómo imprimir gráficos en PNG.

Muestra un array de las entidades del gráfico seleccionadas. Las entidades seleccionables son burbujas. Para este gráfico, solo se puede seleccionar una entidad en un momento determinado. Extended description .

Muestra el valor de datos verticales en yPosition, que es un desplazamiento de píxeles hacia abajo desde el borde superior del contenedor de gráfico. Puede ser negativo.

Ejemplo: chart.getChartLayoutInterface().getVAxisValue(300).

Llámalo después de que se dibuje el gráfico.

Muestra la coordenada X del píxel de dataValue en relación con el borde izquierdo del contenedor del gráfico.

Ejemplo: chart.getChartLayoutInterface().getXLocation(400).

Llámalo después de que se dibuje el gráfico.

Muestra la coordenada Y del píxel de dataValue en relación con el borde superior del contenedor del gráfico.

Ejemplo: chart.getChartLayoutInterface().getYLocation(300).

Llámalo después de que se dibuje el gráfico.

Quita del gráfico la acción de información sobre la herramienta con el actionID solicitado.

Establece una acción de información sobre la herramienta que se ejecutará cuando el usuario haga clic en el texto de acción.

El método setAction toma un objeto como su parámetro de acción. Este objeto debe especificar 3 propiedades: id (el ID de la acción que se establece, text, el texto que debe aparecer en la información sobre la acción) y action (la función que se debe ejecutar cuando un usuario hace clic en el texto de acción).

Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método draw() del gráfico. Descripción extendida.

Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior. Las entidades seleccionables son burbujas. Para este gráfico, solo se puede seleccionar una entidad a la vez. Extended description .

Borra el gráfico y libera todos sus recursos asignados.

Se activa cuando se completa la animación de transición.

Se activa cuando el usuario hace clic en el gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de leyenda, los ejes, las líneas de cuadrícula o las etiquetas.

Se activa cuando se produce un error cuando se intenta renderizar el gráfico.

Se activa cuando el usuario hace clic en las flechas de paginación de la leyenda. Devuelve el índice de páginas basado en cero de la leyenda actual y la cantidad total de páginas.

Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y columna del elemento de tabla de datos correspondiente. Una burbuja se correlaciona con una fila en la tabla de datos (el índice de la columna es nulo).

Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve los índices de filas y columnas del elemento de tabla de datos correspondiente. Una burbuja se correlaciona con una fila en la tabla de datos (el índice de la columna es nulo).

El gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw e llamarlos solo después de que se haya activado el evento.

Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a getSelection().