Descripción general
Un histograma es un gráfico que agrupa datos numéricos en discretizaciones, que muestran las discretizaciones como columnas segmentadas. Se usan para representar la distribución de un conjunto de datos: la frecuencia con la que los valores entran en rangos.
Google Charts elige automáticamente la cantidad de discretizaciones que usa. Todas las discretizaciones tienen el mismo ancho y su altura es proporcional al número de datos en la discretización. En otros aspectos, los histogramas son similares a los gráficos de columnas.
Ejemplo
A continuación, se muestra un histograma de las longitudes de dinosaurios:
En el histograma se indica que el contenedor más común es menos de 10 metros y que solo hay un dinosaurio de más de 40 metros. Podemos desplazarte sobre la barra para descubrir que es el sismosaurio (que puede ser un diplodocus muy grande; los paleontólogos no están seguros).
A continuación, se muestra el código para generar este histograma. Después de definir los datos (aquí, con google.visualization.arrayToDataTable), el gráfico se define con una llamada a google.visualization.Histogram y se dibuja con el método draw.
<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([
['Dinosaur', 'Length'],
['Acrocanthosaurus (top-spined lizard)', 12.2],
['Albertosaurus (Alberta lizard)', 9.1],
['Allosaurus (other lizard)', 12.2],
['Apatosaurus (deceptive lizard)', 22.9],
['Archaeopteryx (ancient wing)', 0.9],
['Argentinosaurus (Argentina lizard)', 36.6],
['Baryonyx (heavy claws)', 9.1],
['Brachiosaurus (arm lizard)', 30.5],
['Ceratosaurus (horned lizard)', 6.1],
['Coelophysis (hollow form)', 2.7],
['Compsognathus (elegant jaw)', 0.9],
['Deinonychus (terrible claw)', 2.7],
['Diplodocus (double beam)', 27.1],
['Dromicelomimus (emu mimic)', 3.4],
['Gallimimus (fowl mimic)', 5.5],
['Mamenchisaurus (Mamenchi lizard)', 21.0],
['Megalosaurus (big lizard)', 7.9],
['Microvenator (small hunter)', 1.2],
['Ornithomimus (bird mimic)', 4.6],
['Oviraptor (egg robber)', 1.5],
['Plateosaurus (flat lizard)', 7.9],
['Sauronithoides (narrow-clawed lizard)', 2.0],
['Seismosaurus (tremor lizard)', 45.7],
['Spinosaurus (spiny lizard)', 12.2],
['Supersaurus (super lizard)', 30.5],
['Tyrannosaurus (tyrant lizard)', 15.2],
['Ultrasaurus (ultra lizard)', 30.5],
['Velociraptor (swift robber)', 1.8]]);
var options = {
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Se pueden omitir las etiquetas (aquí, los nombres de los dinosaurios), en cuyo caso, la información sobre la herramienta solo mostrará el valor numérico.
Control de colores
A continuación, se muestra un histograma de las poblaciones nacionales:
Hay más de doscientos países con menos de cien millones de poblaciones, y una corte grave después de eso.
En este histograma se usa la opción colors para dibujar los datos en verde:
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['green'],
};
Al igual que con todos los gráficos de Google, los colores se pueden especificar como nombres en inglés o como valores hexadecimales.
Cómo controlar depósitos
De forma predeterminada, Google Charts elegirá automáticamente el tamaño del bucket mediante un algoritmo conocido para los histogramas. Sin embargo, a veces querrás anularlo, y el gráfico anterior es un ejemplo. Con tantos países en el primer bucket, es difícil examinarlos en otros.
Para situaciones como esta, el gráfico de histograma proporciona dos opciones: histogram.bucketSize, que anula el algoritmo y codifica el tamaño del depósito; y histogram.lastBucketPercentile. La segunda opción necesita más explicaciones: cambia el cálculo de los tamaños de los depósitos para ignorar los valores que son más altos o más bajos que los valores restantes según el porcentaje que especifiques. Los valores aún se incluyen en el histograma, pero no afectan cómo se agrupan. Esto es útil cuando no quieres que los valores atípicos lleguen a sus propios depósitos, sino que se agrupan con el primer o el último depósito.
En el gráfico anterior, ignoramos el cinco por ciento superior y el cinco por ciento de los valores cuando calculamos el tamaño del bucket. Los valores aún se representan en gráficos. Lo único que se cambia es el tamaño del bucket, pero permite que el histograma sea más legible.
En este ejemplo, también se muestra cómo podemos cambiar la escala del eje vertical para usar la escala del “registro de duplicación”, que también ayuda cuando se grafican datos que tienen una cola larga de valores pequeños.
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['#e7711c'],
histogram: { lastBucketPercentile: 5 },
vAxis: { scaleType: 'mirrorLog' }
};
Como puedes ver, quitar el cinco por ciento superior y el inferior del cálculo llevó a un tamaño de bucket de 10,000,000 en lugar de a los 100,000,000 de lo contrario. Si supieras que todo lo que deseabas era un tamaño de depósito de 10,000,000, podrías haber usado histogram.bucketSize para hacerlo:
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['#e7711c'],
histogram: { bucketSize: 10000000 }
};
En el siguiente ejemplo, se muestra cómo expandir el rango de los depósitos y se muestran muchos más sin espacios entre ellos. La opción maxNumBuckets se puede usar para aumentar la cantidad predeterminada de depósitos. Las opciones histogram.minValue y histogram.maxValue expandirán el rango de los depósitos, pero ten en cuenta que si hay datos fuera de este rango, estas opciones no reducirán el rango.
En este ejemplo, también se muestra que puedes especificar las marcas que se mostrarán en cada uno de los depósitos con la opción explícita ticks de hAxis. Esto no afecta a los buckets en sí, sino solo a cómo se muestran las marcas.
Ten en cuenta también que especificamos chartArea.width para que la cantidad de depósitos se ajuste de manera más precisa sin artefactos visuales. Estas son las opciones para este ejemplo.
var options = {
title: 'Approximating Normal Distribution',
legend: { position: 'none' },
colors: ['#4285F4'],
chartArea: { width: 405 },
hAxis: {
ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
},
bar: { gap: 0 },
histogram: {
bucketSize: 0.01,
maxNumBuckets: 400,
minValue: -1,
maxValue: 1
}
};
Series múltiples
A continuación, se muestra un histograma de los cargos de las partículas subatómicas, según el modelo estándar:
El gráfico anterior contiene una serie que contiene todas las partículas. Las partículas subatómicas se pueden dividir en cuatro grupos: cuarteles, leones y leones. Tratamos a cada uno como una serie:
En este gráfico, usamos una serie diferente (y, por lo tanto, color) para cada uno de los cuatro tipos de partículas subatómicas. Configuramos de manera explícita interpolateNulls en false para garantizar que no se trazarán los valores nulos (necesarios porque la serie tiene una longitud desigual). También configuramos legend.maxLines para agregar otra línea a la leyenda:
var data = google.visualization.arrayToDataTable([
['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
[2/3, -1, 0, 0],
[2/3, -1, 0, null],
[2/3, -1, 0, null],
[-1/3, 0, 1, null],
[-1/3, 0, -1, null],
[-1/3, 0, null, null],
[-1/3, 0, null, null]
]);
var options = {
title: 'Charges of subatomic particles',
legend: { position: 'top', maxLines: 2 },
colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
interpolateNulls: false,
};
Cargando
El nombre del paquete google.charts.load es "corechart".
google.charts.load("current", {packages: ["corechart"]});
El nombre de clase de la visualización es google.visualization.Histogram:
var visualization = new google.visualization.Histogram(container);
Formato de los datos
Existen dos maneras de propagar una tabla de datos de histograma. Cuando hay una sola serie:
var data = google.visualization.arrayToDataTable([
['Name', 'Number'],
['Name 1', number1],
['Name 2', number2],
['Name 3', number3],
...
]);
...y cuando hay varias series:
var data = google.visualization.arrayToDataTable([
['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
[series1_number1, series2_number1, series3_number1, ...],
[series1_number2, series2_number2, series3_number2, ...],
[series1_number3, series2_number3, series3_number3, ...],
...
]);
En este momento, no se admiten funciones de columna opcionales para los histogramas.
Opciones de configuración
| Nombre | |
|---|---|
| animación.duración |
Es la duración en milisegundos de la animación. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: número
Valor predeterminado: 0
|
| Animación |
La función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:
Tipo: string
Predeterminado: "lineal"
|
| animación.inicio |
Determina si el gráfico se animará en el sorteo inicial. Si es Tipo: booleano
Predeterminado: false
|
| axisTítulodeleje |
Dónde colocar los títulos de los ejes, en comparación con el área del gráfico Valores admitidos:
Tipo: string
Predeterminado: “out”
|
| Color de fondo |
El color de fondo para el área principal del gráfico Puede ser una string de color HTML simple, por ejemplo: Type: string o objeto
Predeterminado: "white"
|
| backgroundColor |
El color del borde del gráfico, como una string de color HTML Tipo: string
Valor predeterminado: "#666"
|
| backgroundColor.strokeWidth, |
El ancho del borde, en píxeles. Tipo: número
Valor predeterminado: 0
|
| fondoColor.fill |
El color de relleno del gráfico, como una string de color HTML. Tipo: string
Predeterminado: "white"
|
| 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%”.
|
| Área_gráficos |
Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (sin incluir el eje y las leyendas), donde se dibuja el gráfico. Se admiten dos formatos: un número o un número seguido de %. Un número simple es un valor en píxeles; un número seguido de % es un porcentaje. Ejemplo: Type:
Valor predeterminado: null
|
| chartArea.backgroundColor |
Color de fondo del área del gráfico. Cuando se usa una string, puede ser una string hexadecimal (p.ej., "#fdc")) o el nombre del color en inglés. Cuando se usa un objeto, se pueden proporcionar las siguientes propiedades:
Type: string o objeto
Predeterminado: "white"
|
| chartArea.left |
Hasta dónde dibujar el gráfico desde el borde izquierdo. Tipo: número o string
Predeterminado: automático
|
| área_gráfico |
Hasta dónde dibujar el gráfico desde el borde superior Tipo: número o string
Predeterminado: automático
|
| ancho_gráfico |
Ancho del área del gráfico. Tipo: número o string
Predeterminado: automático
|
| gráficoAreArea.height |
Altura del área del gráfico. Tipo: número o string
Predeterminado: automático
|
| colores |
Los colores que se usarán para los elementos del gráfico. Un arreglo de strings, en la que cada elemento es una string de color HTML, por ejemplo: Tipo: Arreglo de strings
Predeterminado: colores predeterminados
|
| 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
|
| 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
|
| 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.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.interval |
Un arreglo de tamaños (como valores de datos, no píxeles) entre líneas de cuadrícula adyacentes. Esta opción solo es para ejes numéricos en este momento, pero es análoga a las opciones de Tipo: Número entre 1 y 10, sin incluir 10.
Predeterminado: calculado
|
| hAxis.gridlines.minSpacing. |
El espacio mínimo de la pantalla, en píxeles, entre las líneas de cuadrícula principales del eje.
El valor predeterminado para las líneas de cuadrícula principales es Tipo: número
Predeterminado: calculado
|
| hAxis.gridlines.multiple |
Todos los valores de línea de cuadrícula y de marca deben ser un múltiplo del valor de esta opción. Ten en cuenta que, a diferencia de los intervalos, no se consideran los poderes de 10 veces el múltiplo de ellos.
Por lo tanto, puedes forzar las marcas para que sean números enteros si especificas 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.interval |
La opción minorGridlines.interval es como la opción de intervalo de líneas de cuadrícula principales, pero el intervalo elegido siempre será un divisor uniforme del intervalo principal de líneas de cuadrícula.
El intervalo predeterminado para las escalas lineales es Tipo: número
Predeterminado: 1
|
| hAxis.minorGridlines.minSpacing |
El espacio mínimo requerido, en píxeles, entre las líneas de cuadrícula secundarias adyacentes y entre las líneas de cuadrícula secundarias y principales. El valor predeterminado es la mitad del minSpacing de las líneas de cuadrícula principales para escalas lineales y la mitad del minSpacing para las escalas de registro. Tipo: número
Predeterminado: computado
|
| hAxis.minorGridlines.multiple |
Igual que para el elemento 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.textPosition |
Posición del texto del eje horizontal, en relación con el área del gráfico. Valores admitidos: “out”, “in” y “none”. Tipo: string
Predeterminado: “out”
|
| hAxis.textStyle |
Un objeto que especifica el estilo del texto del eje horizontal. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.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.allowContainerBoundaryTextCutoff |
Si es falso, ocultará las etiquetas más externas y no permitirá que el contenedor del gráfico las recorte. Si esta preferencia se establece como "true", permitirá que se recorten las etiquetas. Tipo: booleano
Valor predeterminado: falso
|
| hAxis.slantedText |
Si esta preferencia se establece como "true", se dibuja el texto del eje horizontal en ángulo de modo que se ajuste más texto al eje. Si es "false", se dibuja el texto del eje horizontal en posición vertical. El comportamiento predeterminado es inclinar el texto si no caben todos cuando se dibuja en posición vertical. Ten en cuenta que esta opción solo está disponible cuando Tipo: booleano
Predeterminado: automático
|
| hAxis.slantedTextAngle |
El ángulo del texto del eje horizontal, si está dibujado. Se ignora si Tipo: número, -90 a 90
Valor predeterminado: 30
|
| hAxis.maxAlternation |
Cantidad máxima de niveles de texto en el eje horizontal. Si las etiquetas de texto del eje están demasiado saturadas, el servidor puede desplazar las etiquetas adyacentes hacia arriba o hacia abajo para ajustar las etiquetas entre sí. Este valor especifica la mayor cantidad de niveles que se usarán; el servidor puede usar menos niveles, si las etiquetas pueden caber sin superponerse. Para las fechas y horas, el valor predeterminado es 1. Tipo: número
Predeterminado: 2
|
| hAxis.maxTextLines |
Cantidad máxima de líneas permitidas para las etiquetas de texto. Las etiquetas pueden abarcar varias líneas si son demasiado largas y, de forma predeterminada, la cantidad de líneas está limitada por la altura del espacio disponible. Tipo: número
Predeterminado: automático
|
| hAxis.minTextSpacing |
Espaciado horizontal mínimo, en píxeles, permitido entre dos etiquetas de texto adyacentes. Si las etiquetas tienen un espacio demasiado denso o son demasiado largos, el espaciado puede caer por debajo de este umbral y, en este caso, se aplicará una de las medidas de orden de etiquetas (p. ej., truncar las etiquetas o descartar algunas). Tipo: número
Predeterminado: El valor de
hAxis.textStyle.fontSize |
| hAxis.showTextEvery |
Cantidad de etiquetas del eje horizontal que se muestran, donde 1 significa que se muestran todas las etiquetas, 2 significa que se muestra cada otra etiqueta y así sucesivamente. De forma predeterminada, se trata de mostrar la mayor cantidad posible de etiquetas sin superponerse. 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 índice de filas basado en cero donde finaliza la ventana de recorte. Los datos en este índice y en los superiores se recortarán. Junto con Se ignora cuando Tipo: número
Predeterminado: automático
|
| hAxis.viewWindow.min |
Es el índice de filas basado en cero donde comienza la ventana de recorte. Se recortarán los datos con índices más bajos que estos. Junto con Se ignora cuando Tipo: número
Predeterminado: automático
|
| histograma.bucketSize |
Codificar el tamaño de cada barra de histograma, en lugar de dejar que se determine mediante algoritmos Tipo: número
Predeterminado: automático
|
| histograma,hideBucketItems |
Omite las divisiones finas entre los bloques del histograma y forma una serie de barras sólidas. Tipo: booleano
Valor predeterminado: falso
|
| histograma,lastBucketPercentile |
Cuando se calcula el tamaño del bucket del histograma, ignora el Tipo: número
Valor predeterminado: 0
|
| histograma.minValue |
Expande el rango de depósitos para incluir este valor. Tipo: número
Predeterminado: automático, usar datos mín.
|
| histograma,maxValue |
Expande el rango de depósitos para incluir este valor. Tipo: número
Predeterminada: automática; usar máx.
|
| histogram.numBucketsRule |
Cómo calcular la cantidad predeterminada de depósitos Los valores posibles son:
Tipo: string
Predeterminado:
'sqrt' |
| alto |
Altura del gráfico, en píxeles. Tipo: número
Predeterminado: altura del elemento que lo contiene
|
| interpolateNulls |
Indica si es necesario adivinar el valor de los puntos faltantes. Si es verdadero, adivinará el valor de los datos faltantes según los puntos vecinos. Si es falso, dejará un salto en la línea en el punto desconocido.
No es compatible con los gráficos del área con la opción Tipo: booleano
Valor predeterminado: falso
|
| 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
|
| leyenda.alineación |
Alineación de la leyenda Puede ser uno de los siguientes:
El inicio, el centro y el final están relacionados con el estilo de la leyenda (vertical u horizontal). Por ejemplo, en una leyenda de "derecha", "inicio" y "final" están en la parte superior e inferior, respectivamente. En el caso de una leyenda "superior", "inicio" y "final" están a la izquierda y a la derecha del área, respectivamente. El valor predeterminado depende de la posición de la leyenda. Para las leyendas con el valor “bottom”, el valor predeterminado es “center” y las demás, de forma predeterminada con “start”. Tipo: string
Predeterminado: automático
|
| leyendas.maxLines |
Cantidad máxima de líneas en la leyenda. Establece un número mayor que uno para agregar líneas a la leyenda. Nota: La lógica exacta que se usa para determinar la cantidad real de líneas procesadas sigue en proceso de cambio. Por el momento, esta opción solo funciona cuando "Legend.position" está en la parte superior. Tipo: número
Predeterminado: 1
|
| Index.page.page |
El índice de página basado en cero inicial de la leyenda seleccionado. Tipo: número
Valor predeterminado: 0
|
| leyenda.posición |
Posición de la leyenda. Puede ser uno de los siguientes:
Tipo: string
Predeterminado: "right"
|
| leyenda.texto |
Un objeto que especifica el estilo de texto de la leyenda. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| orientación |
Es la orientación del gráfico. Cuando se establece en Tipo: string
Predeterminado: "horizontal"
|
| Categorías inversas |
Si se establece como verdadera, se dibujará la serie de derecha a izquierda. La configuración predeterminada es dibujar de izquierda a derecha. Tipo: booleano
Valor predeterminado: falso
|
| 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.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"
|
| Vasos |
Especifica las propiedades de los ejes verticales individuales si el gráfico tiene varios ejes verticales.
Cada objeto secundario es un objeto
Para especificar un gráfico con varios ejes verticales, primero define un nuevo eje mediante
{
series: {
2: {
targetAxisIndex:1
}
},
vAxes: {
1: {
title:'Losses',
textStyle: {color: 'red'}
}
}
}
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
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
Tipo:Arreglo de objeto con objetos secundarios
Valor predeterminado: null
|
| Váxis |
Un objeto con miembros para configurar varios elementos del eje vertical. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type:
Valor predeterminado: null
|
| vAxis.Baseline |
La propiedad Tipo: número
Predeterminado: automático
|
| vAxis.BaseColor |
Especifica el color del modelo de referencia para el eje vertical. Puede ser cualquier string de color HTML, por ejemplo: Tipo: número
Predeterminado: "negro"
|
| vAxis.direction |
La dirección en la que crecen los valores del eje vertical. De forma predeterminada, los valores bajos se encuentran en la parte inferior del gráfico. Especifica Tipo: 1 o -1
Predeterminado: 1
|
| vAxis.format |
Una string de formato para etiquetas de eje numérico. Este es un subconjunto del conjunto de patrones de ICU.
Por ejemplo,
El formato real aplicado a la etiqueta se deriva de la configuración regional con la que se cargó la API. Para obtener más información, consulta Cómo cargar gráficos con una configuración regional específica.
En el cálculo de valores y líneas de cuadrícula de marcas, se considerarán varias combinaciones alternativas de todas las opciones de líneas de cuadrícula relevantes y se rechazarán alternativas si las etiquetas con marcas de formato con formato se duplicarían o se superpusieran.
Por lo tanto, puedes especificar Tipo: string
Predeterminado: automático
|
| vAxis.gridlines, |
Un objeto con miembros para configurar las líneas de cuadrícula en el eje vertical. Ten en cuenta que las líneas de cuadrícula del eje vertical se dibujan horizontalmente. Para especificar las propiedades de este objeto, puedes usar la notación literal de objetos, como se muestra aquí: {color: '#333', minSpacing: 20}
Type:
Valor predeterminado: null
|
| vAxis.gridlines.color; |
El color de las líneas de cuadrícula verticales dentro del área del gráfico. Especifica una cadena de color HTML válida. Tipo: string
Configuración predeterminada: "#CCC"
|
| vAxis.gridlines.count |
La cantidad aproximada de líneas de cuadrícula horizontales dentro del área del gráfico.
Si especificas un número positivo para Tipo: número
Predeterminado: -1
|
| vAxis.gridlines.interval |
Un arreglo de tamaños (como valores de datos, no píxeles) entre líneas de cuadrícula adyacentes. Esta opción solo es para ejes numéricos en este momento, pero es análoga a las opciones de Tipo: Número entre 1 y 10, sin incluir 10.
Predeterminado: calculado
|
| vAxis.gridlines.minSpacing |
El espacio mínimo de la pantalla, en píxeles, entre las líneas de cuadrícula principales del eje.
El valor predeterminado para las líneas de cuadrícula principales es Tipo: número
Predeterminado: calculado
|
| vAxis.gridlines.multiple |
Todos los valores de línea de cuadrícula y de marca deben ser un múltiplo del valor de esta opción. Ten en cuenta que, a diferencia de los intervalos, no se consideran los poderes de 10 veces el múltiplo de ellos.
Por lo tanto, puedes forzar las marcas para que sean números enteros si especificas Tipo: número
Predeterminado: 1
|
| vAxis.gridlines.units |
Anula el formato predeterminado para varios aspectos de tipos de datos de fecha, hora y hora cuando se usa con líneas de cuadrícula calculadas en los gráficos. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos. El formato general es el siguiente:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]},
hours: {format: [/*format strings here*/]},
minutes: {format: [/*format strings here*/]},
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]}
}
}
Puedes encontrar información adicional en Fechas y horas. Type:
Valor predeterminado: null
|
| vAxis.minorGridlines |
Un objeto con miembros para configurar las líneas de cuadrícula menores en el eje vertical, similar a la opción vAxis.gridlines. Type:
Valor predeterminado: null
|
| vAxis.minorGridlines.color; |
El color de las líneas de cuadrícula secundarias verticales dentro del área del gráfico. Especifica una string de color HTML válida. Tipo: string
Predeterminado: una combinación de la línea de cuadrícula y los colores del fondo
|
| vAxis.minorGridlines.count |
La opción minorGridlines.count es obsoleta, excepto para inhabilitar líneas de cuadrícula secundarias. Para ello, establece el recuento en 0. La cantidad de líneas de cuadrícula secundarias depende del intervalo entre las líneas de cuadrícula principales (consulta vAxis.gridlines.interval) y el espacio mínimo requerido (consulta vAxis.minorGridlines.minSpacing). Tipo: número
Predeterminado: 1
|
| vAxis.minorGridlines.interval |
La opción minorGridlines.interval es como la opción de intervalo de líneas de cuadrícula principales, pero el intervalo elegido siempre será un divisor uniforme del intervalo principal de líneas de cuadrícula.
El intervalo predeterminado para las escalas lineales es Tipo: número
Predeterminado: 1
|
| vAxis.minorGridlines.minSpacing |
El espacio mínimo requerido, en píxeles, entre las líneas de cuadrícula secundarias adyacentes y entre las líneas de cuadrícula secundarias y principales. El valor predeterminado es la mitad del minSpacing de las líneas de cuadrícula principales para escalas lineales y la mitad del minSpacing para las escalas de registro. Tipo: número
Predeterminado: computado
|
| vAxis.minorGridlines.multiple |
Igual que para el elemento Tipo: número
Predeterminado: 1
|
| vAxis.minorGridlines.units |
Anula el formato predeterminado para varios aspectos de los tipos de datos de fecha, hora y hora del día cuando se usa con el método cuadrícula de líneas de cálculo calculadas. Permite el formato por años, meses, días, horas, minutos, segundos y milisegundos. El formato general es el siguiente:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Puedes encontrar información adicional en Fechas y horas. Type:
Valor predeterminado: null
|
| vAxis.logScale |
Si es verdadero, hace que el eje vertical sea una escala logarítmica. Nota: Todos los valores deben ser positivos. Tipo: booleano
Valor predeterminado: falso
|
| vAxis.scaleType. |
La propiedad
Tipo: string
Valor predeterminado: null
|
| vAxis.textPosition |
Posición del texto del eje vertical en relación con el área del gráfico. Valores admitidos: “out”, “in” y “none”. Tipo: string
Predeterminado: “out”
|
| vAxis.textStyle |
Un objeto que especifica el estilo del texto del eje vertical. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Vaxis.ticks |
Reemplaza las marcas del eje Y generadas automáticamente por el arreglo especificado. Cada elemento del arreglo debe ser un valor de marca válido (como un número, una fecha, una hora de fecha o una hora del día) o un objeto. Si es un objeto, debe tener una propiedad
La ViewWindow se expandirá automáticamente para incluir las marcas mínimas y máximas, a menos que especifiques Ejemplos:
Tipo: Arreglo de elementos
Predeterminado: automático
|
| título de vAxis |
La propiedad Tipo: string
Predeterminado: sin título
|
| vAxis.titleTextStyle |
Un objeto que especifica el estilo del texto del título del eje vertical. El objeto tiene este formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type:
Predeterminado:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Valor de vAxis.maxValue |
Mueve el valor máximo del eje vertical al valor especificado; esto será ascendente en la mayoría de los gráficos. Se ignora si se establece en un valor menor que el valor Y máximo de los datos.
Tipo: número
Predeterminado: automático
|
| Valor de vAxis.minValue |
Mueve el valor mínimo del eje vertical al valor especificado, que será descendente en la mayoría de los gráficos. Se ignora si se establece en un valor mayor que el valor Y mínimo de los datos.
Tipo: número
Valor predeterminado: null
|
| vAxis.viewWindowMode. |
Especifica cómo escalar el eje vertical para procesar los valores dentro del área del gráfico. Se admiten los siguientes valores de string:
Tipo: string
Predeterminado: Equivale a "pretty", pero
vaxis.viewWindow.min y vaxis.viewWindow.max tienen prioridad si se usan.
|
| vAxis.viewWindow |
Especifica el rango de recorte del eje vertical. Type:
Valor predeterminado: null
|
| vAxis.viewWindow.max, |
El valor vertical máximo de los datos que se renderizarán. Se ignora cuando Tipo: número
Predeterminado: automático
|
| vAxis.viewWindow.min. |
Valor mínimo de datos verticales que se renderizarán. Se ignora cuando Tipo: número
Predeterminado: automático
|
| ancho |
Ancho del gráfico en píxeles. Tipo: número
Predeterminado: ancho del elemento que lo contiene
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el gráfico. El gráfico acepta más llamadas a métodos después de que se activa el evento Tipo de datos que se muestra: ninguno
|
getAction(actionID) |
Muestra el objeto de acción de información sobre la herramienta con el Return Type: Objeto
|
getBoundingBox(id) |
Muestra un objeto que contiene la izquierda, la parte superior, el ancho y la altura del elemento de gráfico
Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getChartAreaBoundingBox() |
Muestra un objeto que contiene el contenido a la izquierda, en la parte superior, el ancho y la altura del contenido del gráfico (es decir, sin incluir las etiquetas y la leyenda):
Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getChartLayoutInterface() |
Muestra un objeto que contiene información sobre la posición en la pantalla del gráfico y sus elementos. Se puede llamar a los siguientes métodos en el objeto mostrado:
Llámelo después de que se dibuje el gráfico. Return Type: Objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Muestra el valor de los datos horizontales en Ejemplo: Llámelo después de que se dibuje el gráfico. Tipo de devolución: número
|
getImageURI() |
Muestra el gráfico serializado como un URI de imagen. Llámelo después de que se dibuje el gráfico. Consulta Cómo imprimir gráficos PNG. Tipo de datos que se muestra: string
|
getSelection() |
Muestra un arreglo de las entidades del gráfico seleccionadas.
Las entidades 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.