Descripción general
Los diagramas de dispersión representan puntos en un gráfico. Cuando el usuario coloca el cursor sobre los puntos, se muestran cuadros de información con más detalles.
Los diagramas de dispersión de Google se renderizan dentro del navegador con SVG o VML, según las funciones del navegador.
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([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(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 cambiar y animar formas
De forma predeterminada, los diagramas de dispersión representan los elementos de tu conjunto de datos con círculos. Puedes especificar otras formas con la opción pointShape
, que se detalla en la documentación sobre la personalización de puntos.
Al igual que con la mayoría de los gráficos de Google, puedes animarlos con eventos. Puedes agregar un objeto de escucha de eventos para el primer evento ready
y volver a dibujar el gráfico después de realizar las modificaciones deseadas. Después del primer evento ready
, puedes escuchar el evento animationfinish
para repetir el proceso, lo que genera una animación continua. La opción animation
controla cómo se vuelve a dibujar: inmediatamente (sin animación) o de forma fluida, y si es fluida, con qué rapidez y con qué comportamiento.
var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); ... function randomWalk() { ... }
<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 = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); var radius = 100; for (var i = 0; i < 6.28; i += 0.1) { data.addRow([radius * Math.cos(i), radius * Math.sin(i)]); } // Our central point, which will jiggle. data.addRow([0, 0]); var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() { var x = data.getValue(data.getNumberOfRows() - 1, 0); var y = data.getValue(data.getNumberOfRows() - 1, 1); x += 5 * (Math.random() - 0.5); y += 5 * (Math.random() - 0.5); if (x * x + y * y > radius * radius) { // Out of bounds. Bump toward center. x += Math.random() * ((x < 0) ? 5 : -5); y += Math.random() * ((y < 0) ? 5 : -5); } data.setValue(data.getNumberOfRows() - 1, 0, x); data.setValue(data.getNumberOfRows() - 1, 1, y); chart.draw(data, options); } } </script> </head> <body> <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div> </body> </html>
Crea diagramas de dispersión de Material
En 2014, Google anunció lineamientos destinados a admitir un aspecto común en todas sus propiedades y apps (como las apps para Android) que se ejecutan en las plataformas de Google. A esta iniciativa la llamamos Material Design. Ofreceremos versiones de "Material" de todos nuestros gráficos principales. Si quieres, puedes usarlas.
Crear un diagrama de dispersión de Material es similar a crear lo que ahora llamaremos un diagrama de dispersión “clásico”. Debes cargar la API de visualización de Google (aunque con el paquete 'scatter'
en lugar del paquete 'corechart'
), definir tu tabla de datos y, luego, crear un objeto (pero de la clase google.charts.Scatter
en lugar de google.visualization.ScatterChart
).
Nota: Los gráficos de Material no funcionarán en versiones anteriores de Internet Explorer. (IE8 y las versiones anteriores no admiten SVG, lo que requieren los gráficos de Material).
Los gráficos de dispersión de Material tienen muchas mejoras pequeñas en comparación con los gráficos de dispersión clásicos, incluida la opacidad variable para la legibilidad de los puntos superpuestos, una paleta de colores mejorada, un formato de etiquetas más claro, un espaciado predeterminado más ajustado, líneas de cuadrícula y títulos más suaves (y la adición de subtítulos).
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
Los gráficos de Material están en versión beta. La apariencia y la interactividad son, en gran medida, definitivas, pero muchas de las opciones disponibles en los gráficos clásicos aún no lo están. Puedes encontrar una lista de opciones que aún no se admiten en este problema.
Además, la forma en que se declaran las opciones no está finalizada, por lo que, si usas alguna de las opciones clásicas, debes convertirlas en opciones de material reemplazando esta línea: chart.draw(data, options);
...por lo siguiente: chart.draw(data, google.charts.Scatter.convertOptions(options));
Gráficos Y doble
En algunos casos, querrás mostrar dos series en un diagrama de dispersión con dos ejes Y independientes: un eje izquierdo para una serie y un eje derecho para otra:
Ten en cuenta que nuestros dos ejes Y no solo están etiquetados de manera diferente ("Calificación final del examen" en comparación con "Horas estudiadas"), sino que cada uno tiene sus propias escalas y líneas de cuadrícula independientes. Si deseas personalizar este comportamiento, usa las opciones vAxis.gridlines
.
En el siguiente código, las opciones axes
y series
juntas especifican la apariencia doble Y del gráfico. La opción series
especifica qué eje usar para cada uno ('final grade'
y 'hours studied'
; no necesitan tener ninguna relación con los nombres de las columnas en la tabla de datos). Luego, la opción axes
convierte este gráfico en un gráfico con doble Y, lo que coloca el eje 'Final Exam Grade'
a la izquierda y el eje 'Hours Studied'
a la derecha.
google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };
Rankings de las X principales
Nota: Los ejes Top-X solo están disponibles para los gráficos de Material (es decir, aquellos con el paquete scatter
).
Si deseas colocar las etiquetas del eje X y el título en la parte superior de tu gráfico en lugar de en la parte inferior, puedes hacerlo en los gráficos de Material con la opción axes.x
:
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
Cargando
El nombre del paquete google.charts.load
es "corechart"
y el nombre de la clase de la visualización es google.visualization.ScatterChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ScatterChart(container);
Para los diagramas de dispersión de Material, el nombre del paquete google.charts.load
es "scatter"
y el nombre de la clase de la visualización es google.charts.Scatter
.
google.charts.load("current", {packages: ["scatter"]});
var visualization = new google.charts.Scatter(container);
Formato de los datos
Filas: Cada fila de la tabla representa un conjunto de datos con el mismo valor del eje X.
Columnas:
Columna 0 | Columna 1 | ... | Columna N | |
---|---|---|---|---|
Objetivo: | Valores del punto de datos X | Valores Y de la serie 1 | ... | Valores Y de la serie N |
Tipo de datos: | cadena, número o fecha/fecha y hora/horadeldía | cadena, número o fecha/fecha y hora/horadeldía | ... | cadena, número o fecha/fecha y hora/horadeldía |
Role: | datos | datos | ... | datos |
Roles de columna opcionales: | Nada de control |
... |
Para especificar varias series, indica dos o más columnas en el eje Y, y los valores Y en solo una columna Y:
Valores X | Valores Y de serie 1 | Valores Y de serie 2 |
---|---|---|
10 | null | 75 |
20 | null | 18 |
33 | null | 22 |
55 | 16 | null |
14 | 61 | null |
48 | 3 | null |
Opciones de configuración
Nombre | |
---|---|
aggregationTarget |
Cómo se agrupan varias selecciones de datos en cuadros de información:
A menudo,
aggregationTarget se usa junto con selectionMode y tooltip.trigger , p.ej.:
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Tipo: string
Configuración predeterminada: "auto"
|
animation.duration |
Es la duración de la animación en milisegundos. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: Número
Valor predeterminado: 0
|
animation.easing |
Es la función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:
Tipo: string
Predeterminado: "lineal"
|
animation.startup |
Determina si se animará el gráfico en el dibujo inicial. Si es Tipo: booleano
Predeterminado falso
|
annotations.boxStyle |
En el caso de los gráficos que admiten anotaciones, el objeto var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Actualmente, esta opción es compatible con los gráficos de áreas, de barras, de columnas, combinados, de líneas y de dispersión. No es compatible con el gráfico de anotaciones. Tipo: objeto
Valor predeterminado: nulo
|
annotations.datum |
En el caso de los gráficos que admiten anotaciones, el objeto
annotations.datum te permite anular la opción de Gráficos de Google para las anotaciones proporcionadas para elementos de datos individuales (como los valores que se muestran con cada barra de un gráfico de barras). Puedes controlar el color con annotations.datum.stem.color , la longitud del tallo con annotations.datum.stem.length y el estilo con annotations.datum.style .
Tipo: objeto
Predeterminado: el color es “negro”; la longitud es 12; el estilo es “punto”.
|
annotations.domain |
En el caso de los gráficos que admiten anotaciones, el objeto
annotations.domain te permite anular la opción de Gráficos de Google para las anotaciones proporcionadas para un dominio (el eje principal del gráfico, como el eje X en un gráfico de líneas típico). Puedes controlar el color con annotations.domain.stem.color , la longitud del tallo con annotations.domain.stem.length y el estilo con annotations.domain.style .
Tipo: objeto
Predeterminado: el color es “negro”; la longitud es 5; el estilo es “punto”.
|
annotations.highContrast |
En el caso de los gráficos que admiten anotaciones, el booleano
annotations.highContrast te permite anular la elección del color de anotación en Gráficos de Google. De forma predeterminada, el valor annotations.highContrast es verdadero, lo que hace que Gráficos seleccione un color de anotación con buen contraste: colores claros sobre fondos oscuros y oscuro sobre fondos claros. Si configuras annotations.highContrast como falso y no especificas tu propio color de anotación, Gráficos de Google usará el color de serie predeterminado para la anotación:
Tipo: booleano
Predeterminado: verdadero
|
annotations.stem |
En el caso de los gráficos que admiten anotaciones, el objeto
annotations.stem te permite anular la elección de Google Charts para el estilo de la raíz. Puedes controlar el color con annotations.stem.color y la longitud del tallo con annotations.stem.length . Ten en cuenta que la opción de longitud de la raíz no tiene ningún efecto en las anotaciones con el estilo 'line' : para las anotaciones de datos 'line' , la longitud del tallo siempre es la misma que la del texto, y para las anotaciones del dominio 'line' , el tallo se extiende en todo el gráfico.
Tipo: objeto
Predeterminado: el color es “negro”; la longitud es 5 para las anotaciones del dominio y 12 para las anotaciones de datum.
|
annotations.style |
En el caso de los gráficos que admiten anotaciones, la opción
annotations.style te permite anular la elección del tipo de anotación de Google Charts. Puede ser 'line' o 'point' .
Tipo: string
Predeterminado: “punto”
|
annotations.textStyle |
En el caso de los gráficos que admiten anotaciones, el objeto
annotations.textStyle controla la apariencia del texto de la anotación:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Actualmente, esta opción es compatible con los gráficos de áreas, de barras, de columnas, combinados, de líneas y de dispersión. No es compatible con el gráfico de anotaciones . Tipo: objeto
Valor predeterminado: nulo
|
axisTitlesPosition |
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:
Tipo: string
Configuración predeterminada: "out"
|
backgroundColor |
El color de fondo del área principal del gráfico. Puede ser una cadena simple de color HTML, por ejemplo: Tipo: objeto o cadena
Predeterminado: “white”
|
backgroundColor.stroke |
El color del borde del gráfico, como una cadena de color HTML. Tipo: string
Predeterminado: “#666”
|
backgroundColor.strokeWidth |
Es el ancho del borde en píxeles. Tipo: Número
Valor predeterminado: 0
|
backgroundColor.fill |
El color de relleno del gráfico, como una cadena HTML de color. Tipo: string
Predeterminado: “white”
|
chart.title |
Para los gráficos de Material, esta opción especifica el título. Tipo: string
Valor predeterminado: nulo
|
chart.subtitle |
Para los gráficos de Material, esta opción especifica el subtítulo. Solo los gráficos de Material admiten subtítulos. Tipo: string
Valor predeterminado: nulo
|
chartArea |
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: Tipo: objeto
Valor predeterminado: nulo
|
chartArea.backgroundColor |
Color de fondo del área del gráfico Cuando se usa una cadena, puede ser una cadena hexadecimal (p.ej., “#fdc”) o un nombre de color en inglés. Cuando se usa un objeto, se pueden proporcionar las siguientes propiedades:
Tipo: objeto o cadena
Predeterminado: “white”
|
chartArea.left |
Indica qué tan lejos se debe dibujar el gráfico desde el borde izquierdo. Tipo: número o string
Predeterminada: automática
|
chartArea.top |
Indica qué tan lejos se debe dibujar el gráfico desde el borde superior. Tipo: número o string
Predeterminada: automática
|
chartArea.width |
Ancho del área del gráfico. Tipo: número o string
Predeterminada: automática
|
chartArea.height |
Altura del área del gráfico. Tipo: número o string
Predeterminada: automática
|
colores |
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: Tipo: Arreglo de cadenas
Predeterminado: Colores predeterminados
|
mira |
Un objeto que contiene las propiedades de la cruza del gráfico. Tipo: objeto
Valor predeterminado: nulo
|
crosshair.color |
Indica el color de cruz, expresado como un nombre de color (p.ej., "blue") o un valor RGB (p.ej., “#adf”). Tipo: string
Tipo: predeterminado
|
crosshair.focused |
Un objeto que contiene las propiedades de los puntos de mira cuando se enfoca. Tipo: objeto
Predeterminado: predeterminado
|
crosshair.opacity |
La opacidad del punto de mira, con Tipo: Número
Predeterminado: 1.0
|
crosshair.orientation |
La orientación de la mira, que puede ser "vertical" solo para los pelos verticales, "horizontal" solo para los pelos horizontales o "ambos" para los puntos de mira tradicionales Tipo: string
Predeterminado: “ambos”
|
crosshair.selected |
Un objeto que contiene las propiedades de cruz en la selección. Tipo: objeto
Predeterminado: predeterminado
|
crosshair.trigger |
Cuándo mostrar puntos de mira: en Tipo: string
Predeterminado: “ambos”
|
curveType |
Controla la curva de las líneas cuando el ancho de línea no es cero. Puede ser una de las siguientes:
Tipo: Cadena
Configuración predeterminada: “ninguna”
|
dataOpacity |
La transparencia de los datos, en la que 1.0 es completamente opaco y 0.0 completamente transparente. En los gráficos de dispersión, histogramas, de barras y columnas, se refiere a los datos visibles: puntos en el diagrama de dispersión y rectángulos en los demás. En los gráficos en los que al seleccionar datos se crea un punto, como los gráficos de líneas y de áreas, esto hace referencia a los círculos que aparecen cuando se coloca el cursor sobre un elemento o se lo selecciona. El gráfico combinado muestra ambos comportamientos, y esta opción no tiene efecto en otros gráficos. (Para cambiar la opacidad de una línea de tendencia, consulta Opacidad de la línea de tendencia ). Tipo: Número
Predeterminado: 1.0
|
enableInteractivity |
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. 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). Tipo: objeto
Valor predeterminado: nulo
|
explorer.actions |
El explorador de Gráficos de Google admite tres acciones:
Tipo: Arreglo de cadenas
Predeterminado: ['dragToPan', 'rightClickToReset']
|
explorer.axis |
De forma predeterminada, los usuarios pueden desplazarse horizontal y verticalmente cuando se usa la opción Tipo: string
Configuración predeterminada: desplazamiento horizontal y vertical
|
explorer.keepInBounds |
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 Tipo: booleano
Predeterminado: falso
|
explorer.maxZoomIn |
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 Tipo: Número
Valor predeterminado: 0.25
|
explorer.maxZoomOut |
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 Tipo: Número
Valor predeterminado: 4
|
explorer.zoomDelta |
Cuando los usuarios acercan o alejan el mapa, Tipo: Número
Predeterminado: 1.5
|
fontSize |
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. Tipo: Número
Predeterminada: automática
|
fontName |
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. 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 iframes). Tipo: booleano
Predeterminado: falso
|
hAxis |
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' } } Tipo: objeto
Valor predeterminado: nulo
|
hAxis.baseline |
La línea de base para el eje horizontal. Tipo: Número
Predeterminada: automática
|
hAxis.baselineColor |
El color de la línea de base para el eje horizontal. Puede ser cualquier cadena HTML de color, por ejemplo: Tipo: Número
Predeterminado: “negro”
|
hAxis.direction |
La dirección en la que crecen los valores a lo largo del eje horizontal. Especifica Tipo: 1 o -1
Configuración predeterminada: 1
|
hAxis.format |
Una cadena de formato para etiquetas de ejes numéricos. Este es un subconjunto del
conjunto de patrones de ICU
. Por ejemplo,
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 Tipo: string
Predeterminada: automática
|
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 propiedades de este objeto, puedes usar la notación literal de objeto, como se muestra a continuación: {color: '#333', minSpacing: 20} Tipo: objeto
Valor predeterminado: nulo
|
hAxis.gridlines.color |
El color de las líneas de cuadrícula horizontales dentro del área del gráfico. Especifica una cadena de color HTML válida. Tipo: string
Predeterminado: “#CCC”
|
hAxis.gridlines.count |
Es 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
Valor predeterminado: -1
|
hAxis.gridlines.units |
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. Tipo: objeto
Valor predeterminado: nulo
|
hAxis.minorGridlines |
Un objeto con miembros para configurar las líneas de cuadrícula secundarias en el eje horizontal, similar a la opción hAxis.gridlines. Tipo: objeto
Valor predeterminado: nulo
|
hAxis.minorGridlines.color |
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. Tipo: string
Predeterminado: Una combinación de los colores de la línea de cuadrícula y del fondo
|
hAxis.minorGridlines.count |
La opción Tipo: Número
Configuración predeterminada:1
|
hAxis.minorGridlines.units |
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. Tipo: objeto
Valor predeterminado: nulo
|
hAxis.logScale |
La propiedad Tipo: booleano
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”, “none”. Tipo: string
Configuración predeterminada: "out"
|
hAxis.textStyle |
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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
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
ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques Ejemplos:
Tipo: Arreglo de elementos
Predeterminada: automática
|
hAxis.title |
La propiedad Tipo: string
Valor predeterminado: nulo
|
hAxis.titleTextStyle |
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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
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.
Tipo: Número
Predeterminada: automática
|
hAxis.minValue |
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.
Tipo: Número
Predeterminada: automática
|
hAxis.viewWindowMode |
Especifica cómo escalar el eje horizontal para renderizar los valores dentro del área del gráfico. Se admiten los siguientes valores de cadena:
Tipo: string
Predeterminado: Equivalente 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. Tipo: objeto
Valor predeterminado: nulo
|
hAxis.viewWindow.max |
El valor máximo de datos horizontales que se renderizará. Se ignora cuando Tipo: Número
Predeterminada: automática
|
hAxis.viewWindow.min |
El valor mínimo de datos horizontales que se renderizará. Se ignora cuando Tipo: Número
Predeterminada: automática
|
height |
Altura del gráfico en píxeles. Tipo: Número
Predeterminado: la altura del elemento contenedor
|
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 objeto, como se muestra a continuación: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Tipo: objeto
Valor predeterminado: nulo
|
legend.alignment |
Alineación de la leyenda Puede ser una de las siguientes:
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”. Tipo: string
Predeterminada: automática
|
legend.maxLines |
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”. Tipo: Número
Configuración predeterminada: 1
|
legend.pageIndex |
Índice inicial de página basado en cero seleccionado de la leyenda. Tipo: Número
Valor predeterminado: 0
|
legend.position |
Posición de la leyenda. Puede ser una de las siguientes:
Tipo: string
Configuración predeterminada: "derecha"
|
legend.textStyle |
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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
lineWidth |
Es el ancho de línea en píxeles. Usa el cero para ocultar todas las líneas y mostrar solo los puntos. Tipo: Número
Valor predeterminado: 0
|
orientación |
La orientación del gráfico. Cuando se establece en Tipo: string
Configuración predeterminada: "horizontal"
|
pointShape |
La forma de los elementos de datos individuales: "círculo", "triángulo", "cuadrado", "diamante", "estrella" o "polígono". Consulta la documentación de puntos para ver ejemplos. Tipo: string
Predeterminada: "círculo"
|
pointSize |
Diámetro de los datos, en píxeles. Usa el cero para ocultar todos los puntos. Puedes anular los valores de las series individuales con la propiedad Tipo: Número
Configuración predeterminada: 7
|
pointsVisible |
Determina si se mostrarán los puntos. Establece la opción en
Esto también se puede anular con la función de diseño en forma de Tipo: booleano
Predeterminado: verdadero
|
selectionMode |
Cuando Tipo: string
Configuración predeterminada: “single”
|
series |
Un array de objetos, cada uno de los cuales describe el formato de la serie correspondiente en el gráfico. Si quieres usar valores predeterminados para una serie, especifica un objeto vacío {}. Si no se especifica una serie o un valor, se usará el valor global. Cada objeto admite las siguientes propiedades:
Puedes especificar un array de objetos, cada uno de los cuales se aplica a la serie en el orden dado, o puedes especificar un objeto en el que cada elemento secundario tenga una clave numérica que indique a qué serie se aplica. Por ejemplo, las dos declaraciones siguientes son idénticas y declaran la primera serie como negra y ausente en la leyenda, y la cuarta como roja y ausente de la leyenda: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Tipo: Arreglo de objetos o con objetos anidados
Predeterminado: {}
|
tema |
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:
Tipo: string
Valor predeterminado: nulo
|
título |
Es el texto que se mostrará sobre el gráfico. Tipo: string
Configuración predeterminada: Sin título
|
titlePosition |
Dónde colocar el título del gráfico en comparación con el área del gráfico Valores admitidos:
Tipo: string
Configuración predeterminada: "out"
|
titleTextStyle |
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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
cuadro de información |
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} Tipo: objeto
Valor predeterminado: nulo
|
tooltip.ignoreBounds |
Si se establece en Nota: Esto solo se aplica a la información sobre herramientas HTML. Si esta opción está habilitada con información sobre la herramienta de SVG, se recortará cualquier desbordamiento fuera de los límites del gráfico. Consulta Cómo personalizar el contenido de la información sobre la herramienta para obtener más detalles. Tipo: booleano
Predeterminado: falso
|
tooltip.isHtml |
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. Tipo: booleano
Predeterminado: falso
|
tooltip.showColorCode |
Si esta preferencia se establece como "true", muestra cuadrados de color junto a la información de la serie en el cuadro de información. Tipo: booleano
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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
La interacción del usuario que hace que se muestre el cuadro de información:
Tipo: string
Predeterminado: "foco"
|
líneas de tendencia |
Muestra las
líneas de tendencia
en los gráficos que las admiten. De forma predeterminada, se usan las líneas de tendencia lineales, pero esto se puede personalizar con la opción
Las líneas de tendencia se especifican por serie, por lo que, la mayoría de las veces, las opciones se verán de la siguiente manera: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Tipo: objeto
Valor predeterminado: nulo
|
trendlines.n.color |
Es el color de la línea de tendencia , expresado como un nombre de color en inglés o una cadena hexadecimal. Tipo: string
Predeterminado: color predeterminado de la serie
|
trendlines.n.degree |
Para las
líneas de tendencia
de Tipo: Número
Valor predeterminado: 3
|
trendlines.n.labelInLegend |
Si se establece, la línea de tendencia aparecerá en la leyenda como esta cadena. Tipo: string
Valor predeterminado: nulo
|
trendlines.n.lineWidth |
Es el ancho de línea de la línea de tendencia en píxeles. Tipo: Número
Valor predeterminado: 2
|
trendlines.n.opacity |
Es la transparencia de la línea de tendencia , de 0.0 (transparente) a 1.0 (opaco). Tipo: Número
Predeterminado: 1.0
|
trendlines.n.pointSize |
Las
líneas de tendencia
se crean a través de un conjunto de puntos en el gráfico. Esta opción, muy poco necesaria, te permite
personalizar el tamaño de los puntos. Por lo general, la opción Tipo: Número
Configuración predeterminada: 1
|
trendlines.n.pointsVisible |
Las
líneas de tendencia
se crean sellando varios puntos en el gráfico. La opción Tipo: booleano
Predeterminado: verdadero
|
trendlines.n.showR2 |
Indica si se muestra el coeficiente de determinación en la información sobre la leyenda o la línea de tendencia. Tipo: booleano
Predeterminado: falso
|
trendlines.n.type |
Indica si las
líneas de tendencia
son Tipo: string
Predeterminado: lineal
|
trendlines.n.visibleInLegend |
Indica si la ecuación de línea de tendencia aparece en la leyenda. (Aparecerá en la información sobre la línea de tendencia). Tipo: booleano
Predeterminado: falso
|
vAxis |
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'}} Tipo: objeto
Valor predeterminado: nulo
|
vAxis.baseline |
La propiedad Tipo: Número
Predeterminada: automática
|
vAxis.baselineColor |
Especifica el color de la línea de base para el eje vertical. Puede ser cualquier cadena HTML de color, por ejemplo: Tipo: Número
Predeterminado: “negro”
|
vAxis.direction |
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 Tipo: 1 o -1
Configuración predeterminada: 1
|
vAxis.format |
Una cadena de formato para etiquetas de ejes numéricos. Este es un subconjunto del
conjunto de patrones de ICU
.
Por ejemplo,
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 Tipo: string
Predeterminada: automática
|
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 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} Tipo: objeto
Valor predeterminado: nulo
|
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
Predeterminado: “#CCC”
|
vAxis.gridlines.count |
Es 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
Valor predeterminado: -1
|
vAxis.gridlines.units |
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. Tipo: objeto
Valor predeterminado: nulo
|
vAxis.minorGridlines |
Un objeto con miembros para configurar las líneas de cuadrícula secundarias en el eje vertical, similar a la opción vAxis.gridlines. Tipo: objeto
Valor predeterminado: nulo
|
vAxis.minorGridlines.color |
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. Tipo: string
Predeterminado: Una combinación de los colores de la línea de cuadrícula y del fondo
|
vAxis.minorGridlines.count |
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). Tipo: Número
Configuración predeterminada: 1
|
vAxis.minorGridlines.units |
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. Tipo: objeto
Valor predeterminado: nulo
|
vAxis.logScale |
Si es verdadero, el eje vertical es una escala logarítmica. Nota: Todos los valores deben ser positivos. Tipo: booleano
Predeterminado: falso
|
vAxis.scaleType |
La propiedad
Tipo: string
Valor predeterminado: nulo
|
vAxis.textPosition |
Posición del texto del eje vertical, en relación con el área del gráfico. Valores admitidos: “out”, “in”, “none”. Tipo: string
Configuración predeterminada: "out"
|
vAxis.textStyle |
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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
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
ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques Ejemplos:
Tipo: Arreglo de elementos
Predeterminada: automática
|
vAxis.title |
La propiedad Tipo: string
Configuración predeterminada: Sin título
|
vAxis.titleTextStyle |
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> }
Tipo: objeto
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
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.
Tipo: Número
Predeterminada: automática
|
vAxis.minValue |
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.
Tipo: Número
Valor predeterminado: nulo
|
vAxis.viewWindowMode |
Especifica cómo escalar el eje vertical para renderizar los valores dentro del área del gráfico. Se admiten los siguientes valores de cadena:
Tipo: string
Predeterminado: Equivalente 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. Tipo: objeto
Valor predeterminado: nulo
|
vAxis.viewWindow.max |
El valor máximo de datos verticales que se renderizará. Se ignora cuando Tipo: Número
Predeterminada: automática
|
vAxis.viewWindow.min |
El valor de datos vertical mínimo que se renderizará. Se ignora cuando Tipo: Número
Predeterminada: automática
|
width |
Es el ancho del gráfico (en píxeles). Tipo: Número
Predeterminado: Ancho del elemento contenedor
|
Métodos
Método | |
---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas de método solo 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 Tipo de datos que se muestra: objeto
|
getBoundingBox(id) |
Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getChartAreaBoundingBox() |
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):
Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getChartLayoutInterface() |
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:
Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Muestra el valor de datos horizontales en Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getImageURI() |
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. Tipo de datos que se muestra: string
|
getSelection() |
Muestra un array de las entidades del gráfico seleccionadas.
Las entidades seleccionables son puntos y entradas de leyenda.
Un punto corresponde a una celda en la tabla de datos y a una entrada de leyenda en una columna (el índice de fila es nulo).
Para este gráfico, solo se puede seleccionar una entidad en un momento determinado.
Tipo de datos que se muestra: Es el array de elementos de selección.
|
getVAxisValue(yPosition, optional_axis_index) |
Muestra el valor de datos verticales en Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getXLocation(dataValue, optional_axis_index) |
Muestra la coordenada X del píxel de Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
getYLocation(dataValue, optional_axis_index) |
Muestra la coordenada Y del píxel de Ejemplo: Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
|
removeAction(actionID) |
Quita del gráfico la acción de información sobre la herramienta con el 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 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 puntos y entradas de leyenda.
Un punto corresponde a una celda en la tabla de datos y a una entrada de leyenda en una columna (el índice de fila es nulo).
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 sus recursos asignados. Tipo de datos que se muestra: ninguno
|
Eventos
Para obtener más información sobre cómo usar estos eventos, consulta Interactividad básica, Cómo controlar eventos y Cómo activar eventos.
Nombre | |
---|---|
animationfinish |
Se activa cuando se completa la animación de transición. Propiedades: ninguna
|
click |
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. Propiedades: targetID
|
error |
Se activa cuando se produce un error cuando se intenta renderizar 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áginas basado en cero de la leyenda actual 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 columna del elemento de tabla de datos correspondiente. Propiedades:fila, columna
|
onmouseout |
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. Propiedades:fila, columna
|
ready |
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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a Propiedades: ninguna
|
Política de datos
Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.