Importante: La sección de gráficos de imágenes de las herramientas de gráficos de Google se dio de baja oficialmente a partir del 20 de abril de 2012. Seguirá funcionando de acuerdo con nuestra política de baja.
Descripción general
Un gráfico de áreas que se renderiza como una imagen con la API de Google Charts.
Ejemplo
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["imageareachart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
Cargando
El nombre del paquete google.charts.load es "imageareachart"
google.charts.load('current', {packages: ['imageareachart']});
El nombre de clase de la visualización es google.visualization.ImageAreaChart
var visualization = new google.visualization.ImageAreaChart(container);
Formato de datos
Cada columna representa una línea en el gráfico; cada entrada es el valor del eje Y en el mismo punto del eje X, y la visualización las conecta con una línea recta y, luego, se llena el área debajo de la línea.
Los datos se procesan por columna, comenzando en la columna cero y aumentando. Debes escribir las líneas más altas primero y, luego, las inferiores, porque si pintas una línea inferior primero, la línea más alta pinta y oculta las líneas inferiores. Por lo tanto, trata de que la columna 1 tenga puntos más altos que la columna 2, que la columna 2 sea más alta que la columna 3, y así sucesivamente. Si tienes uno o dos puntos más arriba en una columna derecha que en una columna izquierda, es posible que se oculte parcialmente la línea inferior, pero debería estar visible.
Todos los datos deben ser de tipo numérico, excepto el primero, que puede ser numérico o de cadena. Si la primera columna es de tipo string, las primeras entradas de la columna se mostrarán como etiquetas en la X; si la primera columna es un número, no se mostrarán etiquetas del eje X. Todas las columnas (excepto la primera) deben ser números. No hay límite para la cantidad de columnas.
Opciones de configuración
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| backgroundColor | cadena | '#FFFFFF' (blanco) | El color de fondo del gráfico en el formato de color de la API de Chart. |
| colores | Arreglo<string> | Automático | Úsala para asignar colores específicos a cada serie de datos. Los colores se especifican en el formato de color de la API de Chart.
El color i se usa para la columna de datos i y se ajusta al principio si hay más columnas de datos que colores. Si las variaciones de un solo color son aceptables para todas las series, usa la opción color en su lugar. |
| enableEvents | boolean | false | Hace que los gráficos muestren eventos activados por el usuario, como un clic o el mouse. Solo es compatible con tipos de gráficos específicos. Consulta la sección Eventos a continuación. |
| height | número | Altura del contenedor | Es la altura del gráfico en píxeles. |
| leyenda | cadena | 'derecha' | Posición y tipo de leyenda. Puede ser una de las siguientes opciones:
|
| max | número | automático | Valor máximo que se mostrará en el eje Y. |
| min | número | automático | El valor mínimo que se muestra en el eje Y. |
| showCategoryLabels | boolean | verdadero | Si la estableces como falsa, se quitarán las etiquetas de las categorías (las etiquetas del eje X). |
| showValueLabels | boolean | verdadero | Si se establece como falsa, quita las etiquetas de los valores (las etiquetas del eje Y). |
| título | cadena | sin título | Es el texto que se mostrará sobre el gráfico. |
| valueLabelsInterval | número | Automático | El intervalo en el que se muestran las etiquetas del eje de valores. Por ejemplo, si min es 0, max es 100 y valueLabelsInterval es 20, el gráfico mostrará etiquetas de eje en (0, 20, 40, 60, 80 100). |
| width | número | Ancho del contenedor | Es el ancho del gráfico en píxeles. |
Métodos
| Método | Tipo de datos que se muestra | Descripción |
|---|---|---|
draw(data, options) |
ninguno | Dibuja el gráfico. |
Eventos
Regístrate para escuchar los eventos descritos en la página Gráfico de imágenes genéricas.
Política de Datos
Consulta la política de registro de la API de Chart.