Descripción general
Los gráficos de barras de Google se renderizan en el navegador mediante SVG o VML, lo que sea adecuado para el navegador del usuario. Al igual que todos los gráficos de Google, los gráficos de barras muestran información sobre la herramienta cuando el usuario se desplaza sobre los datos. Para obtener una versión vertical de este gráfico, consulta el gráfico de columnas.
Ejemplos
Barras para colorear
Vamos a graficar las densidades de cuatro metales preciosos:
Arriba, todos los colores son los azules predeterminados. Esto se debe a que son parte de la misma serie; si hubiera una segunda serie, se habría mostrado de color rojo. Podemos personalizar estos colores con el rol de estilo:
Hay tres formas diferentes de elegir los colores y nuestra tabla de datos los muestra todos: valores RGB, nombres de colores en inglés y una declaración similar a la de CSS.
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Estilos de barra
La función de estilo te permite controlar varios aspectos de la apariencia de la barra con declaraciones similares a las de CSS.
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Te recomendamos que no mezcles estilos con libertad dentro de un gráfico (que elijas un estilo y que permanezcas en él), pero, para demostrar todos los atributos de estilo, aquí te mostramos un ejemplo:
Las primeras dos barras usan un color
específico (el primero con un nombre en inglés y el segundo con un valor RGB). No se eligió opacity
, por lo que se usa el valor predeterminado 1.0 (completamente opaco); por esta razón, la segunda barra oculta la cuadrícula detrás de él. En la tercera barra, se usa un opacity
de 0.2, que revela la línea de cuadrícula. En la cuarta barra, se usan tres atributos de diseño: stroke-color
y stroke-width
para dibujar el borde, y fill-color
para especificar el color del rectángulo en el interior. La barra de la derecha también usa stroke-opacity
y fill-opacity
a fin de elegir opacidades para el borde y el relleno:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Cómo etiquetar barras
Los gráficos tienen varios tipos de etiquetas, como las marcas, las etiquetas de leyenda y las etiquetas en la información sobre la herramienta. En esta sección, veremos cómo colocar etiquetas dentro (o cerca) de las barras en un gráfico de barras.
Supongamos que queremos anotar cada barra con el símbolo químico apropiado. Podemos hacerlo con la función annotation:
En nuestra tabla de datos, definimos una columna nueva con { role:
'annotation' }
para contener nuestras etiquetas de barra:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Si bien los usuarios pueden desplazarse sobre las barras para ver los valores de los datos, es posible que quieras incluirlos en las barras:
Esto es un poco más complicado de lo que debería ser, ya que creamos un DataView
para especificar la anotación para cada barra.
<script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } </script> <div id="barchart_values" style="width: 900px; height: 300px;"></div>
Si quisiéramos formatear el valor de manera diferente, podríamos definir un formateador y unirlo en una función como esta:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Entonces, podríamos llamarla con calc: getValueAt.bind(undefined, 1)
.
Si la etiqueta es demasiado grande para caber por completo dentro de la barra, se muestra afuera:
Gráficos de barras apiladas
Un gráfico de barras apiladas es un gráfico de barras que coloca valores relacionados uno encima del otro. Si hay algún valor negativo, se apilan en orden inverso debajo del modelo de referencia del eje del gráfico. Los gráficos de barras apiladas suelen usarse cuando una categoría se divide naturalmente en componentes. Por ejemplo, considera algunas ventas hipotéticas de libros, divididas por género y compáralas en el tiempo:
Para crear un gráfico de barras apiladas, establece la opción isStacked
en true
:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true };
Los gráficos de barras apiladas también admiten apilado del 100%, en el que las pilas de elementos de cada valor de dominio se escalan de manera tal que se suman 100%. Las opciones para esto son
isStacked: 'percent'
, que da formato a cada valor como un porcentaje del 100%, y
isStacked: 'relative'
, que da formato a cada valor como una fracción de 1. También hay una opción isStacked: 'absolute'
, que es funcionalmente equivalente a isStacked: true
.
Ten en cuenta que en el gráfico apilado del 100% a la derecha, los valores de las marcas se basan en la escala relativa de 0 a 1 como fracciones de 1, pero los valores de los ejes se muestran como porcentajes. Esto se debe a que las marcas del eje porcentual son el resultado de aplicar un formato “#.##%” a los valores de escala relativos del 0 al 1. Cuando uses isStacked: 'percent'
, asegúrate de especificar todas las marcas con la escala relativa de 0 a 1.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Crear gráficos de barras 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. Esta tarea se denomina Material Design. Proporcionaremos versiones “Material” de todos nuestros gráficos principales. Puedes usarlas si te gusta cómo se ven.
Crear un gráfico de barras de Material es similar a crear lo que ahora llamaremos un gráfico de barras "clásico". Debes cargar la API de visualización de Google (aunque con el paquete 'bar'
en lugar del paquete 'corechart'
), definir la tabla de datos y, luego, crear un objeto (pero de clase google.charts.Bar
en lugar de google.visualization.BarChart
).
Nota: Material Charts no funcionará en versiones anteriores de Internet Explorer. (IE8 y las versiones anteriores no admiten SVG, que requieren los gráficos de Material).
Los gráficos de barras de Material tienen pequeñas mejoras respecto de los gráficos de barras clásicos, como la mejora de la paleta de colores, las esquinas redondeadas, el formato de etiquetas más claro, el espaciado predeterminado más reducido entre series, líneas de cuadrícula y títulos más suaves (y la adición de subtítulos).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="barchart_material" style="width: 900px; height: 500px;"></div> </body> </html>
Los gráficos de Material se encuentran en versión Beta. La apariencia y la interactividad son mayormente finales, pero muchas de las opciones disponibles en la versión clásica de gráficos aún no están disponibles en ellos. Puedes encontrar una lista de las 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 materiales con esta línea: chart.draw(data, options);
...por lo siguiente:chart.draw(data, google.charts.Bar.convertOptions(options));
El uso de google.charts.Bar.convertOptions()
te permite aprovechar ciertas funciones, como las opciones predeterminadas de hAxis/vAxis.format
.
Gráficos X dobles
Nota: Los ejes dobles X solo están disponibles para los gráficos de Material (es decir, los que tienen el paquete bar
).
En algunos casos, se recomienda que se muestren dos series en un gráfico de barras, con dos ejes independientes independientes: un eje superior para una serie y un eje inferior para otro:
Ten en cuenta que no solo nuestros dos ejes x están etiquetados de manera diferente (""analizas" frente a "magnitud aparente"), sino que cada uno tiene sus propias escalas y líneas de cuadrícula independientes. Si deseas personalizar este comportamiento, usa las opciones de hAxis.gridlines
.
En el siguiente código, las opciones axes
y series
especifican en conjunto la apariencia de doble X del gráfico. La opción series
especifica qué eje se usará para cada uno ('distance'
y 'brightness'
; no es necesario que tengan ninguna relación con los nombres de las columnas en la tabla de datos). Luego, la opción axes
convierte a este gráfico en un gráfico de doble X, que coloca el eje 'apparent magnitude'
en la parte superior y el eje 'parsecs'
en la parte inferior.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Rankings X principales
Nota: Los ejes X principales solo están disponibles para los gráficos de Material (es decir, los con el paquete bar
).
Si deseas colocar las etiquetas y el título del eje X en la parte superior del gráfico en lugar de hacerlo en la parte inferior, puedes hacerlo en los gráficos de Material con la opción axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="top_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Cargando
El nombre del paquete google.charts.load
es "corechart"
.
El nombre de clase de la visualización es google.visualization.BarChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
Para los gráficos de barras de Material, el nombre del paquete google.charts.load
es "bar"
.
El nombre de clase de la visualización es google.charts.Bar
.
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Formato de los datos
Filas: Cada fila de la tabla representa un grupo de barras.
Columnas:
Columna 0 | Columna 1 | … | Columna N | |
---|---|---|---|---|
Propósito: | Barra 1 en este grupo | … | Barra N valores en este grupo | |
Tipo de datos: | número | … | número | |
Rol: | dominio | datos | … | datos |
Funciones de columna opcionales: | … |
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
|
anotaciones.alwaysExternal |
En los gráficos de Bar y Columna, si se configura en Tipo: booleano
Valor predeterminado: falso
|
anotaciones.datum |
En el caso de los gráficos que admiten anotaciones, el objeto
annotations.datum te permite anular la elección de gráficos de Google para las anotaciones proporcionadas para elementos de datos individuales (como valores que se muestran con cada barra en un gráfico de barras). Puedes controlar el color con annotations.datum.stem.color , la longitud de tallos con annotations.datum.stem.length y el estilo con annotations.datum.style .
Type:
Predeterminado: el color es "negro", la longitud es 12 y el estilo es "punto".
|
anotaciones.dominio |
En el caso de los gráficos que admiten anotaciones, el objeto
annotations.domain te permite anular la opción de los 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 de tallos con annotations.domain.stem.length y el estilo con annotations.domain.style .
Type:
Predeterminado: el color es "negro", la longitud es 5 y el estilo es "punto".
|
anotaciones.boxStyle |
Para 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, barras, columnas, combinaciones, líneas y dispersión. No es compatible con el gráfico de anotaciones. Type:
Valor predeterminado: null
|
anotaciones.highContrast |
Para los gráficos que admiten anotaciones, el valor booleano
annotations.highContrast te permite anular la elección del color de la anotación de Google Charts. De forma predeterminada, annotations.highContrast es verdadero, lo que hace que los gráficos seleccionen un color de anotación con buen contraste: colores claros sobre fondos oscuros y oscuro sobre claro. Si configuras annotations.highContrast como falso y no especificas tu propio color de anotación, Google Charts usará el color de serie predeterminado para la anotación:
Tipo: booleano
Predeterminado: verdadero
|
anotaciones.stem |
Para los gráficos que admiten anotaciones, el objeto
annotations.stem te permite anular la selección de los gráficos de Google para el estilo de tallos. Puedes controlar el color
con annotations.stem.color y la longitud de los tallos
con annotations.stem.length . Ten en cuenta que la opción de longitud de stem no tiene efecto en las anotaciones con estilo 'line' : para las anotaciones de datum 'line' , la longitud de stem siempre es la misma que el texto, y para las anotaciones de dominio 'line' , la raíz se extiende en todo el gráfico.
Type:
Predeterminado: El color es "negro". La longitud es 5 para las anotaciones de dominio y 12 para las anotaciones de datos.
|
anotaciones.style |
Para los gráficos que admiten anotaciones, la opción
annotations.style te permite anular el gráfico de Google que elija el tipo de anotación. Puede ser 'line' o 'point' .
Tipo: string
Predeterminado: "point"
|
anotaciones.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, barras, columnas, combinaciones, líneas y dispersión. No es compatible con el gráfico de anotaciones. Type:
Valor predeterminado: null
|
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"
|
Ancho del grupo |
El ancho de un grupo de barras, especificado en cualquiera de estos formatos:
Tipo: número o string
Predeterminado: La proporción dorada, aproximadamente un “61.8%”.
|
bares |
Indica si las barras de un gráfico de barras de material son verticales u horizontales. Esta opción no tiene efecto en los gráficos de barras clásicas ni en los gráficos de columnas clásicos. Tipo: "horizontal" o "vertical"
Predeterminado: "vertical"
|
Á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
|
chart.subtitle |
En el caso de los gráficos Material, esta opción especifica el subtítulo. Solo los gráficos de Material admiten subtítulos. Tipo: string
Valor predeterminado: null
|
chart.title [título_gráficos] |
En el caso de los gráficos Material, esta opción especifica el título. Tipo: string
Valor predeterminado: null
|
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
|
opacidad de los datos |
La transparencia de los puntos de datos, donde 1.0 es completamente opaco y 0.0 completamente transparente. En diagramas de dispersión, histogramas, de barras y de columnas, esto se refiere a los datos visibles: puntos en el gráfico de dispersión y rectángulos en los demás. En los gráficos en los que la selección de datos crea un punto, como los gráficos de líneas y de área, se refiere a los círculos que aparecen cuando se desplaza el cursor o sobre la selección. 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 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
|
focoObjetivo |
Tipo de entidad que recibe el foco cuando se coloca el cursor del mouse sobre un elemento. También afecta a qué entidad selecciona un clic del mouse y qué elemento de la tabla de datos se asocia con los eventos. Puede ser una de las siguientes opciones:
En el elemento “target” de “category”, se muestra todos los valores de la categoría. Esto puede ser útil para comparar valores de diferentes series. Tipo: string
Predeterminado: “datum”
|
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
|
Hachas |
Especifica las propiedades de los ejes horizontales individuales si el gráfico tiene varios ejes horizontales. Cada objeto secundario es un objeto
Para especificar un gráfico con varios ejes horizontales, primero define un nuevo eje mediante
Esta propiedad puede ser un objeto o un arreglo: el objeto es una colección de objetos, cada uno con una etiqueta numérica que especifica el eje que define. Este es el formato que se muestra arriba; el arreglo es un arreglo de objetos, uno por eje. Por ejemplo, la siguiente notación de estilo arreglo es idéntica al objeto hAxes: { {}, // Nothing specified for axis 0 { title:'Losses', textStyle: { color: 'red' } } // Axis 1 Tipo: Arreglo de objeto con objetos secundarios
Valor predeterminado: null
|
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.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.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.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
|
está apilado |
Si se configura como verdadera, se apilan los elementos para todas las series en cada valor de dominio. Nota: En los gráficos Column, Area y SteppedArea, Google Charts invierte el orden de los elementos de las leyendas para que se correspondan mejor con el apilamiento de los elementos de la serie (p.ej., la serie 0 será el elemento de leyenda inferior). Este no se aplica a los gráficos de barras.
La opción Las opciones para
Para un 100% de apilamiento, el valor calculado para cada elemento aparecerá en la información sobre la herramienta después de su valor real.
El eje objetivo se establecerá de forma predeterminada en los valores del intervalo en función de la escala relativa de 0 a 1 como fracciones de 1 para
La pila 100% solo admite valores de datos de tipo Tipo: booleano/string
Valor predeterminado: falso
|
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
|
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.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
|
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>}
|
Categorías inversas |
Si se establece como verdadera, la serie se dibujará de abajo hacia arriba. La configuración predeterminada es dibujar de arriba hacia abajo. Tipo: booleano
Valor predeterminado: falso
|
orientación |
Es la orientación del gráfico. Cuando se establece en Tipo: string
Predeterminado: "horizontal"
|
series |
Un arreglo de objetos, cada uno de los cuales describe el formato de la serie correspondiente en el gráfico. Para usar los valores predeterminados de 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 arreglo 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 siguientes dos declaraciones son idénticas y declaran que la primera serie es negra y ausente, y la cuarta, como roja y ausente: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Tipo: Arreglo de objetos con objetos anidados
Predeterminado: {}
|
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.ignoreBounds |
Si se configura como Nota: Esto solo se aplica a la información sobre la herramienta de HTML. Si está habilitado con la 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
Valor predeterminado: falso
|
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.showColorCode |
Si es verdadero, muestra cuadrados de colores junto a la información de la serie en la información sobre la herramienta. El valor predeterminado es verdadero cuando Tipo: booleano
Predeterminado: automático
|
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"
|
líneas de tendencia |
Muestra las líneas de tendencia en los gráficos que las admiten. De forma predeterminada, se usan 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 tus 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 } } } Type:
Valor predeterminado: null
|
líneasdelínea.n.color |
El color de la línea de tendencia , expresado como el nombre del color en inglés o una string hexadecimal. Tipo: string
Predeterminado: color predeterminado de la serie
|
líneasdelínea.n.grado |
Para las líneas de tendencia de Tipo: número
Predeterminado: 3
|
líneasdelíneas.n.labelInLegend |
Si se configura, la línea de tendencia aparecerá en la leyenda como esta string. Tipo: string
Valor predeterminado: null
|
lineasdelínea.n.anchoAncho |
Ancho de línea de la línea de tendencia en píxeles. Tipo: número
Predeterminado: 2
|
líneasdelínea.n.opacity |
La transparencia de la línea de tendencia, de 0.0 (transparente) a 1.0 (opaco). Tipo: número
Predeterminado: 1.0
|
líneasdelínea.n.pointSize |
En las líneas de tendencia, hay un sello de varios puntos en el gráfico. Esta opción, que rara vez es necesaria, te permite personalizar el tamaño de los puntos. Por lo general, se prefiere la opción Tipo: número
Predeterminado: 1
|
líneasdelíneas.n.pointsVisibles |
En las líneas de tendencia, se marcan varios puntos en el gráfico. La opción Tipo: booleano
Predeterminado: verdadero
|
líneasdelínea.n.showR2 |
Indica si se debe mostrar el coeficiente de determinación en la información sobre la leyenda o la línea de tendencia. Tipo: booleano
Valor predeterminado: falso
|
líneasdelínea.n.type |
Indica si las líneas de tendencia son Tipo: string
Predeterminada: lineal
|
líneasdelínea.n.visibleInLegend |
Si la ecuación de línea de tendencia aparece en la leyenda. (Aparecerá en la información sobre la herramienta de la línea de tendencia). Tipo: booleano
Valor predeterminado: falso
|
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
Esta opción solo es compatible con un eje de 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:
Esta opción solo es compatible con un eje de 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 numéricas o de eje de fecha.
En las etiquetas de eje numérico, es un subconjunto del conjunto de patrones de ICU de formato decimal.
Por ejemplo,
Para las etiquetas del eje de fecha, este es un subconjunto del conjunto de patrones de ICU de formato de fecha.
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
Esta opción solo es compatible con un eje de 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}
Esta opción solo es compatible con un eje de 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.
Esta opción solo es compatible con un eje de 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.
Esta opción solo es compatible con un eje de 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:
Esta opción solo es compatible con un eje de 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.
Esta opción solo es compatible con un eje de 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.
Esta opción solo es compatible con un eje de 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:
Esta opción solo es compatible con un eje de 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, |
Se ignora cuando Tipo: número
Predeterminado: automático
|
vAxis.viewWindow.min. |
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 que se pueden seleccionar son barras, entradas de leyendas y categorías.
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 que se pueden seleccionar son barras, entradas de leyendas y categorías.
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 barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda en una columna (el índice de fila es nulo) y una categoría en una fila (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 barra se correlaciona con una celda en la tabla de datos, una entrada de leyenda en una columna (el índice de fila es nulo) y una categoría en una fila (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.