Descripción general
Un gráfico de burbujas que se renderiza dentro del navegador mediante SVG o VML. Muestra sugerencias al desplazarse sobre las burbujas.
Se utiliza un gráfico de burbujas para visualizar un conjunto de datos de dos a cuatro dimensiones. Las primeras dos dimensiones se visualizan como coordenadas, la tercera como color y la cuarta como tamaño.
Ejemplo
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawSeriesChart); function drawSeriesChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: {textStyle: {fontSize: 11}} }; var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="series_chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Colorear por números
Puedes usar la opción colorAxis
para colorear las burbujas en proporción a un valor, como se muestra en el siguiente ejemplo.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'X', 'Y', 'Temperature'], ['', 80, 167, 120], ['', 79, 136, 130], ['', 78, 184, 50], ['', 72, 278, 230], ['', 81, 200, 210], ['', 72, 170, 100], ['', 68, 477, 80] ]); var options = { colorAxis: {colors: ['yellow', 'red']} }; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Cómo personalizar las etiquetas
Puedes controlar el tipo de letra, la fuente y el color de la burbuja con la opción bubble.textStyle
:
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } };
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } }; var chart = new google.visualization.BubbleChart(document.getElementById('textstyle')); chart.draw(data, options); } </script> </head> <body> <div id="textstyle" style="width: 900px; height: 500px;"></div> </body> </html>
Las etiquetas del gráfico anterior son difíciles de leer y uno de los motivos es el espacio en blanco que las rodea. Eso se denomina aura y, si prefieres tus gráficos sin ellos, puedes configurar bubble.textStyle.auraColor
como 'none'
.
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none' } } };
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none', } } }; var chart = new google.visualization.BubbleChart(document.getElementById('noAura')); chart.draw(data, options); } </script> </head> <body> <div id="noAura" style="width: 900px; height: 500px;"></div> </body> </html>
Cargando
El nombre del paquete google.charts.load
es "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
El nombre de clase de la visualización es google.visualization.BubbleChart
.
var visualization = new google.visualization.BubbleChart(container);
Formato de los datos
Filas: Cada fila de la tabla representa una sola burbuja.
Columnas:
Columna 0 | Columna 1 | Columna 2 | Columna 3 (opcional) | Columna 4 (opcional) | |
---|---|---|---|---|---|
Propósito: | ID (nombre) del cuadro | Coordenada de X | Coordenada Y | Puede ser un ID de serie o un valor que represente un color en una escala de gradiente, según el tipo de columna:
|
Tamaño; los valores de esta columna se asignan a valores de píxeles reales con la opción sizeAxis . |
Tipo de datos: | string | número | número | string o número | número |
Opciones de configuración
Nombre | |
---|---|
animación.duración |
Es la duración en milisegundos de la animación. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: número
Valor predeterminado: 0
|
Animación |
La función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:
Tipo: string
Predeterminado: "lineal"
|
animación.inicio |
Determina si el gráfico se animará en el sorteo inicial. Si es Tipo: booleano
Predeterminado: false
|
axisTítulodeleje |
Dónde colocar los títulos de los ejes, en comparación con el área del gráfico Valores admitidos:
Tipo: string
Predeterminado: “out”
|
Color de fondo |
El color de fondo para el área principal del gráfico Puede ser una string de color HTML simple, por ejemplo: Type: string o objeto
Predeterminado: "white"
|
backgroundColor |
El color del borde del gráfico, como una string de color HTML Tipo: string
Valor predeterminado: "#666"
|
backgroundColor.strokeWidth, |
El ancho del borde, en píxeles. Tipo: número
Valor predeterminado: 0
|
fondoColor.fill |
El color de relleno del gráfico, como una string de color HTML. Tipo: string
Predeterminado: "white"
|
bubble |
Un objeto con miembros para configurar las propiedades visuales de las burbujas. Type:
Valor predeterminado: null
|
globo.opacidad |
La opacidad de las burbujas, donde 0 es completamente transparente y 1 es completamente opaco. Tipo: Número entre 0.0 y 1.0
Valor predeterminado: 0.8
|
cuadro |
El color del trazo de las burbujas Tipo: string
Configuración predeterminada: "#ccc"
|
burbuja de texto |
Un objeto que especifica el estilo de texto de la burbuja. El objeto tiene este formato: {color: <string>, fontName: <string>, fontSize: <number>}
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Área_gráficos |
Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (sin incluir el eje y las leyendas), donde se dibuja el gráfico. 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: Type:
Valor predeterminado: null
|
chartArea.backgroundColor |
Color de fondo del área del gráfico. Cuando se usa una string, puede ser una string hexadecimal (p.ej., "#fdc")) o el nombre del color en inglés. Cuando se usa un objeto, se pueden proporcionar las siguientes propiedades:
Type: string o objeto
Predeterminado: "white"
|
chartArea.left |
Hasta dónde dibujar el gráfico desde el borde izquierdo. Tipo: número o string
Predeterminado: automático
|
área_gráfico |
Hasta dónde dibujar el gráfico desde el borde superior Tipo: número o string
Predeterminado: automático
|
ancho_gráfico |
Ancho del área del gráfico. Tipo: número o string
Predeterminado: automático
|
gráficoAreArea.height |
Altura del área del gráfico. Tipo: número o string
Predeterminado: automático
|
colores |
Los colores que se usarán para los elementos del gráfico. Un arreglo de strings, en la que cada elemento es una string de color HTML, por ejemplo: Tipo: Arreglo de strings
Predeterminado: colores predeterminados
|
eje color |
Un objeto que especifica una asignación entre los valores de columnas de color y los colores o una escala de gradiente. Para especificar las propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra aquí: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type:
Valor predeterminado: null
|
ColorAxis.minValue |
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 uno inferior se procesarán como el primer color en el rango Tipo: número
Predeterminado: Valor mínimo de la columna de color en los datos del gráfico
|
ColorAxis.maxValue |
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 uno superior se procesarán como el último color en el rango Tipo: número
Predeterminado: Valor máximo de la columna de color en los datos del gráfico
|
colorAxis.values |
Si está presente, controla cómo se asocian los valores con los colores. Cada valor se asocia con el color correspondiente en el arreglo Tipo: arreglo de números
Valor predeterminado: null
|
colorAxis.colors |
Colores para asignar a los valores en la visualización. Un arreglo de strings, en la que cada elemento es una string de color HTML, por ejemplo: Tipo: arreglo de strings de color
Valor predeterminado: null
|
colorAxis.legend |
Un objeto que especifica el estilo de la leyenda del color de gradiente. Type:
Valor predeterminado: null
|
colorAxis.legend.position |
Posición de la leyenda. Puede ser uno de los siguientes:
Type:
Predeterminado: “arriba”
|
colorAxis.legend.textStyle |
Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato: {color: <string>, fontName: <string>, fontSize: <number>}
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ColorAxis.legend.numberFormat |
Una string de formato para etiquetas numéricas. Este es un subconjunto del conjunto de patrones de ICU.
Por ejemplo, Tipo: string
Predeterminado: automático
|
enableInteractivity |
Si el gráfico muestra eventos basados en el usuario o reacciona a la interacción del usuario Si es falso, el gráfico no arrojará un evento de selección o de otro tipo basado en la interacción (pero sí arrojará eventos de error o listos) y no mostrará el texto emergente ni cambiará de alguna otra manera en función de la entrada del usuario. Tipo: booleano
Predeterminado: verdadero
|
explorer |
La opción Esta función es experimental y puede cambiar en versiones futuras. Nota: El explorador solo funciona con ejes continuos (como números o fechas). Type:
Valor predeterminado: null
|
explorer.actions |
El Explorador de gráficos de Google admite tres acciones:
Tipo: Arreglo de strings
Configuración predeterminada: ['dragToPan', 'rightClickToReset']
|
eje del explorador |
De forma predeterminada, los usuarios pueden desplazarse de forma horizontal y vertical cuando se usa la opción Tipo: string
Predeterminado: Desplazamiento lateral horizontal y vertical
|
explorer.keepInBounds |
De forma predeterminada, los usuarios pueden desplazarse lateralmente por todos lados, independientemente de dónde se encuentren. Para asegurarte de que los usuarios no se desplacen más allá del gráfico original, usa Tipo: booleano
Valor predeterminado: falso
|
explorer.maxZoomIn |
El valor máximo que puede ampliar el explorador. De forma predeterminada, los usuarios podrán acercar la imagen lo suficiente como para ver solo el 25% de la vista original. Si se establece Tipo: número
Valor predeterminado: 0.25
|
explorer.maxZoomOut |
El valor máximo que el explorador puede alejar. De forma predeterminada, los usuarios podrán alejarse lo suficiente como para que el gráfico ocupe solo 1/4 del espacio disponible. Si se establece Tipo: número
Predeterminado: 4
|
explorer.zoomDelta |
Cuando los usuarios acercan o alejan la imagen, Tipo: número
Predeterminado: 1.5
|
fontSize |
El tamaño predeterminado de la fuente, en píxeles, de todo el texto del gráfico. Puedes anular esto con propiedades de elementos específicos del gráfico. Tipo: número
Predeterminado: automático
|
Nombre de fuente |
El tipo de fuente predeterminado para todo el texto del gráfico. Puedes anular esto con propiedades de elementos específicos del gráfico. Tipo: string
Predeterminado: "Arial"
|
forceIFrame |
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 i-frames). Tipo: booleano
Valor predeterminado: falso
|
eje |
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 objetos, como se muestra aquí: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Type:
Valor predeterminado: null
|
haxis.baseline |
Es el modelo de referencia para el eje horizontal. Tipo: número
Predeterminado: automático
|
hAxis.baselineColor |
El color del modelo de referencia para el eje horizontal. Puede ser cualquier string de color HTML, por ejemplo: Tipo: número
Predeterminado: "negro"
|
hAxis.direction |
La dirección en la que crecen los valores del eje horizontal. Especifica Tipo: 1 o -1
Predeterminado: 1
|
hAxis.format |
Una string de formato para etiquetas de eje numérico. Este es un subconjunto del conjunto de patrones de ICU. Por ejemplo,
El formato real aplicado a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más información, consulta Cómo cargar gráficos con una configuración regional específica.
En el cálculo de valores y líneas de cuadrícula de marcas, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes y se rechazarán alternativas si las etiquetas con marcas de formato con formato se duplicarían o se superpusieran.
Por lo tanto, puedes especificar Tipo: string
Predeterminado: automático
|
hAxis.gridlines, |
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 las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {color: '#333', minSpacing: 20} Type:
Valor predeterminado: null
|
hAxis.gridlines.color; |
El color de las líneas de cuadrícula horizontales dentro del área del gráfico. Especifica una string de color HTML válida. Tipo: string
Configuración predeterminada: "#CCC"
|
hAxis.gridlines.count, |
La cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico.
Si especificas un número positivo para Tipo: número
Predeterminado: -1
|
hAxis.gridlines.units |
Anula el formato predeterminado para varios aspectos de tipos de datos de fecha, hora y hora cuando se usa con líneas de cuadrícula calculadas en los gráficos. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos. El formato general es el siguiente: 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 horas. Type:
Valor predeterminado: null
|
hAxis.minorGridlines |
Un objeto con miembros para configurar las líneas de cuadrícula secundarias en el eje horizontal, de manera similar a la opción hAxis.gridlines. Type:
Valor predeterminado: null
|
hAxis.minorGridlines.color; |
El color de las líneas de cuadrícula secundarias horizontales dentro del área del gráfico. Especifica una string de color HTML válida. Tipo: string
Predeterminado: una combinación de la línea de cuadrícula y los colores del fondo
|
hAxis.minorGridlines.count |
La opción Tipo: número
Predeterminado: 1
|
hAxis.minorGridlines.units |
Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, hora y hora del día cuando se usa con el método cuadrícula de líneas de cálculo calculadas. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos. El formato general es el siguiente: 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 horas. Type:
Valor predeterminado: null
|
hAxis.logScale |
La propiedad Tipo: booleano
Valor predeterminado: falso
|
hAxis.scaleType. |
La propiedad
Tipo: string
Valor predeterminado: null
|
hAxis.textPosition |
Posición del texto del eje horizontal, en relación con el área del gráfico. Valores admitidos: “out”, “in” y “none”. Tipo: string
Predeterminado: “out”
|
hAxis.textStyle |
Un objeto que especifica el estilo del texto del eje horizontal. El objeto tiene este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
Reemplaza las marcas del eje X generadas automáticamente con el arreglo especificado. Cada elemento del arreglo debe ser un valor de marca válido (como un número, una fecha, una hora de fecha o una hora del día) o un objeto. Si es un objeto, debe tener una propiedad
La ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques Ejemplos:
Tipo: Arreglo de elementos
Predeterminado: automático
|
hAxis.title |
La propiedad Tipo: string
Valor predeterminado: null
|
hAxis.titleTextStyle |
Un objeto que especifica el estilo del texto del título del eje horizontal. El objeto tiene este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
Mueve el valor máximo del eje horizontal al valor especificado; esto será hacia la derecha en la mayoría de los gráficos. Se ignora si se establece en un valor menor que el valor x máximo de los datos.
Tipo: número
Predeterminado: automático
|
hAxis.minValue |
Mueve el valor mínimo del eje horizontal al valor especificado; esto será 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.
Tipo: número
Predeterminado: automático
|
hAxis.viewWindowMode. |
Especifica cómo escalar el eje horizontal para procesar los valores dentro del área del gráfico. Se admiten los siguientes valores de string:
Tipo: string
Predeterminado: Equivale a "pretty", pero
haxis.viewWindow.min y haxis.viewWindow.max tienen prioridad si se usan.
|
hAxis.viewWindow |
Especifica el rango de recorte del eje horizontal. Type:
Valor predeterminado: null
|
hAxis.viewWindow.max; |
El valor máximo de datos horizontales que se renderizarán. Se ignora cuando Tipo: número
Predeterminado: automático
|
hAxis.viewWindow.min |
El valor mínimo de datos horizontales que se renderizarán. Se ignora cuando Tipo: número
Predeterminado: automático
|
alto |
Altura del gráfico, en píxeles. Tipo: número
Predeterminado: altura del elemento que lo contiene
|
leyenda |
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 objetos, como se muestra aquí: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type:
Valor predeterminado: null
|
leyenda.alineación |
Alineación de la leyenda Puede ser uno de los siguientes:
El inicio, el centro y el final están relacionados con el estilo de la leyenda (vertical u horizontal). Por ejemplo, en una leyenda de "derecha", "inicio" y "final" están en la parte superior e inferior, respectivamente. En el caso de una leyenda "superior", "inicio" y "final" están a la izquierda y a la derecha del área, respectivamente. El valor predeterminado depende de la posición de la leyenda. Para las leyendas con el valor “bottom”, el valor predeterminado es “center” y las demás, de forma predeterminada con “start”. Tipo: string
Predeterminado: automático
|
leyendas.maxLines |
Cantidad máxima de líneas en la leyenda. Establece un número mayor que uno para agregar líneas a la leyenda. Nota: La lógica exacta que se usa para determinar la cantidad real de líneas procesadas sigue en proceso de cambio. Por el momento, esta opción solo funciona cuando "Legend.position" está en la parte superior. Tipo: número
Predeterminado: 1
|
Index.page.page |
El índice de página basado en cero inicial de la leyenda seleccionado. Tipo: número
Valor predeterminado: 0
|
leyenda.posición |
Posición de la leyenda. Puede ser uno de los siguientes:
Tipo: string
Predeterminado: "right"
|
leyenda.texto |
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> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
modo de selección |
Cuando Tipo: string
Valor predeterminado: “single”
|
series |
Un objeto de objetos, en el que las claves son nombres de serie (los valores en la columna Color) y cada objeto 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:
series: {'Europe': {color: 'green'}} Tipo: Objeto con objetos anidados
Predeterminado: {}
|
Eje de tamaño |
Un objeto con miembros para configurar cómo se asocian los valores con el tamaño de burbuja. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {minValue: 0, maxSize: 20} Type:
Valor predeterminado: null
|
sizeAxis.maxSize. |
Radio máximo de la burbuja más grande posible, en píxeles. Tipo: número
Valor predeterminado: 30
|
sizeAxis.maxValue. |
El valor de tamaño (como aparece en los datos del gráfico) que se asignará a Tipo: número
Predeterminado: Valor máximo de la columna de tamaño en los datos del gráfico
|
sizeAxis.minSize |
Radio mínimo del cuadro más pequeño posible, en píxeles. Tipo: número
Predeterminado: 5
|
sizeAxis.minValue |
El valor de tamaño (como aparece en los datos del gráfico) que se asignará a Tipo: número
Predeterminado: Valor mínimo de la columna de tamaño en los datos del gráfico
|
ordenar burbujas |
Si es verdadero, 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 la tabla de datos. Tipo: booleano
Predeterminado: verdadero
|
tema |
Un tema es un conjunto de valores de opciones predefinidos que funcionan en conjunto para lograr un comportamiento de gráficos o un efecto visual específicos. Por el momento, solo hay un tema disponible:
Tipo: string
Valor predeterminado: null
|
title |
Texto para mostrar arriba del gráfico Tipo: string
Predeterminado: sin título
|
Posición del título |
Dónde colocar el título del gráfico en comparación con el área del gráfico Valores admitidos:
Tipo: string
Predeterminado: “out”
|
Estilo de texto del 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> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Información sobre la herramienta |
Un objeto con miembros para configurar varios elementos de información sobre la herramienta. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {textStyle: {color: '#FF0000'}, showColorCode: true} Type:
Valor predeterminado: null
|
tooltip.isHtml |
Si estableces la política como verdadera, usa información sobre la herramienta procesada con 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 de la información sobre la herramienta de HTML a través de la función de datos de la columna de información sobre la herramienta no es compatible con la visualización del cuadro de burbujas. Tipo: booleano
Valor predeterminado: falso
|
tooltip.textStyle |
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> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Información sobre la herramienta |
La interacción del usuario que hace que se muestre la información sobre la herramienta:
Tipo: string
Predeterminado: "enfoque"
|
Váxis |
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 objetos, como se muestra aquí: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type:
Valor predeterminado: null
|
vAxis.Baseline |
La propiedad Tipo: número
Predeterminado: automático
|
vAxis.BaseColor |
Especifica el color del modelo de referencia para el eje vertical. Puede ser cualquier string de color HTML, por ejemplo: Tipo: número
Predeterminado: "negro"
|
vAxis.direction |
La dirección en la que crecen los valores del eje vertical. De forma predeterminada, los valores bajos se encuentran en la parte inferior del gráfico. Especifica Tipo: 1 o -1
Predeterminado: 1
|
vAxis.format |
Una string de formato para etiquetas de eje numérico. Este es un subconjunto del conjunto de patrones de ICU.
Por ejemplo,
El formato real aplicado a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más información, consulta Cómo cargar gráficos con una configuración regional específica.
En el cálculo de valores y líneas de cuadrícula de marcas, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes y se rechazarán alternativas si las etiquetas con marcas de formato con formato se duplicarían o se superpusieran.
Por lo tanto, puedes especificar Tipo: string
Predeterminado: automático
|
vAxis.gridlines, |
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 horizontalmente. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {color: '#333', minSpacing: 20} Type:
Valor predeterminado: null
|
vAxis.gridlines.color; |
El color de las líneas de cuadrícula verticales dentro del área del gráfico. Especifica una cadena de color HTML válida. Tipo: string
Configuración predeterminada: "#CCC"
|
vAxis.gridlines.count |
La cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico.
Si especificas un número positivo para Tipo: número
Predeterminado: -1
|
vAxis.gridlines.units |
Anula el formato predeterminado para varios aspectos de tipos de datos de fecha, hora y hora cuando se usa con líneas de cuadrícula calculadas en los gráficos. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos. El formato general es el siguiente: 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 horas. Type:
Valor predeterminado: null
|
vAxis.minorGridlines |
Un objeto con miembros para configurar las líneas de cuadrícula menores en el eje vertical, similar a la opción vAxis.gridlines. Type:
Valor predeterminado: null
|
vAxis.minorGridlines.color; |
El color de las líneas de cuadrícula secundarias verticales dentro del área del gráfico. Especifica una string de color HTML válida. Tipo: string
Predeterminado: una combinación de la línea de cuadrícula y los colores del fondo
|
vAxis.minorGridlines.count |
La opción minorGridlines.count es obsoleta, excepto para inhabilitar líneas de cuadrícula secundarias. Para ello, establece el recuento en 0. La cantidad de líneas de cuadrícula secundarias 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). Tipo: número
Predeterminado: 1
|
vAxis.minorGridlines.units |
Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, hora y hora del día cuando se usa con el método cuadrícula de líneas de cálculo calculadas. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos. El formato general es el siguiente: 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 horas. Type:
Valor predeterminado: null
|
vAxis.logScale |
Si es verdadero, hace que el eje vertical sea una escala logarítmica. Nota: Todos los valores deben ser positivos. Tipo: booleano
Valor predeterminado: falso
|
vAxis.scaleType. |
La propiedad
Tipo: string
Valor predeterminado: null
|
vAxis.textPosition |
Posición del texto del eje vertical en relación con el área del gráfico. Valores admitidos: “out”, “in” y “none”. Tipo: string
Predeterminado: “out”
|
vAxis.textStyle |
Un objeto que especifica el estilo del texto del eje vertical. El objeto tiene este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Vaxis.ticks |
Reemplaza las marcas del eje Y generadas automáticamente por el arreglo especificado. Cada elemento del arreglo debe ser un valor de marca válido (como un número, una fecha, una hora de fecha o una hora del día) o un objeto. Si es un objeto, debe tener una propiedad
La ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques Ejemplos:
Tipo: Arreglo de elementos
Predeterminado: automático
|
título de vAxis |
La propiedad Tipo: string
Predeterminado: sin título
|
vAxis.titleTextStyle |
Un objeto que especifica el estilo del texto del título del eje vertical. El objeto tiene este formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Valor de vAxis.maxValue |
Mueve el valor máximo del eje vertical al valor especificado; esto será ascendente en la mayoría de los gráficos. Se ignora si se establece en un valor menor que el valor Y máximo de los datos.
Tipo: número
Predeterminado: automático
|
Valor de vAxis.minValue |
Mueve el valor mínimo del eje vertical al valor especificado, que será descendente 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.
Tipo: número
Valor predeterminado: null
|
vAxis.viewWindowMode. |
Especifica cómo escalar el eje vertical para procesar los valores dentro del área del gráfico. Se admiten los siguientes valores de string:
Tipo: string
Predeterminado: Equivale a "pretty", pero
vaxis.viewWindow.min y vaxis.viewWindow.max tienen prioridad si se usan.
|
vAxis.viewWindow |
Especifica el rango de recorte del eje vertical. Type:
Valor predeterminado: null
|
vAxis.viewWindow.max, |
El valor vertical máximo de los datos que se renderizarán. Se ignora cuando Tipo: número
Predeterminado: automático
|
vAxis.viewWindow.min. |
Valor mínimo de datos verticales que se renderizarán. Se ignora cuando Tipo: número
Predeterminado: automático
|
ancho |
Ancho del gráfico en píxeles. Tipo: número
Predeterminado: ancho del elemento que lo contiene
|
Métodos
Método | |
---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getAction(actionID) |
Muestra el objeto de acción de información sobre la herramienta con el Return Type: Objeto
|
getBoundingBox(id) |
Muestra un objeto que contiene la izquierda, la parte superior, el ancho y la altura del elemento de gráfico
Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getChartAreaBoundingBox() |
Muestra un objeto que contiene el contenido a la izquierda, en la parte superior, el ancho y la altura del contenido del gráfico (es decir, sin incluir las etiquetas y la leyenda):
Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getChartLayoutInterface() |
Muestra un objeto que contiene información sobre la posición en la pantalla del gráfico y sus elementos. Se puede llamar a los siguientes métodos en el objeto mostrado:
Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Muestra el valor de los datos horizontales en Ejemplo: Llámelo después de que se dibuje el gráfico. Tipo de devolución: número
|
getImageURI() |
Muestra el gráfico serializado como un URI de imagen. Llámelo después de que se dibuje el gráfico. Consulta Cómo imprimir gráficos PNG. Tipo de datos que se muestra: string
|
getSelection() |
Muestra un arreglo de las entidades del gráfico seleccionadas.
Las entidades seleccionables son burbujas.
Para este gráfico, solo se puede seleccionar una entidad por momento.
Tipo de datos que se muestra: arreglo de elementos de selección
|
getVAxisValue(yPosition, optional_axis_index) |
Muestra el valor de datos vertical en Ejemplo: Llámelo después de que se dibuje el gráfico. Tipo de devolución: número
|
getXLocation(dataValue, optional_axis_index) |
Muestra la coordenada X del píxel de Ejemplo: Llámelo después de que se dibuje el gráfico. Tipo de devolución: número
|
getYLocation(dataValue, optional_axis_index) |
Muestra la coordenada Y del píxel de Ejemplo: Llámelo después de que se dibuje el gráfico. Tipo de devolución: número
|
removeAction(actionID) |
Quita del gráfico la acción de información sobre la herramienta con la Tipo de datos que se muestra:
none |
setAction(action) |
Establece una acción de información sobre la herramienta que se ejecutará cuando el usuario haga clic en el texto de la acción.
El método
Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método Tipo de datos que se muestra:
none |
setSelection() |
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.
Tipo de datos que se muestra: ninguno
|
clearChart() |
Borra el gráfico y libera todos los recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
Si quieres obtener más información para usar estos eventos, consulta Interactividad básica, Control de eventos y Eventos de activación.
Nombre | |
---|---|
animationfinish |
Se activa cuando se completa la animación de transición. Propiedades: ninguna
|
click |
Se activa cuando el usuario hace clic dentro del gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de la leyenda, los ejes, las líneas de cuadrícula o las etiquetas. Propiedades: targetID
|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. Propiedades: ID, mensaje
|
legendpagination |
Se activa cuando el usuario hace clic en las flechas de paginación de la leyenda. Devuelve el índice de página actual basado en cero de la leyenda y la cantidad total de páginas. Propiedades: currentPageIndex, totalPages
|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y de 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). Properties: Row, Column
|
onmouseout |
Se activa cuando el usuario se aleja del mouse de una entidad visual. Vuelve a pasar 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). Properties: Row, Column
|
ready |
El gráfico está listo para las llamadas a métodos externos. 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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a Propiedades: ninguna
|
Política de Datos
El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.