Importante: La sección de gráficos de imágenes de las herramientas de Google Chart dejó de estar disponible oficialmente a partir del 20 de abril de 2012. Continuará funcionando de acuerdo con nuestra política de baja.
Descripción general
Un gráfico de áreas que se procesa como una imagen mediante la API de gráficos de Google.
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 los 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 los conecta con una línea recta y, luego, completa el área debajo de la línea.
Los datos se procesan por columna, a partir de la columna cero y aumentando. Te recomendamos que primero escribas las líneas más altas y, luego, las líneas más bajas, ya que, si pintas una línea inferior, las líneas más altas se pintan y ocultan las más bajas. Por lo tanto, intenta hacer que la columna 1 tenga puntos más altos que la columna 2, la columna 2 más alta que la columna 3, y así sucesivamente. Si tienes uno o dos puntos más arriba de una columna de la derecha que de una columna izquierda, es posible que oculten parcialmente la línea inferior, pero deben ser visibles.
Todos los datos deben ser de tipo numérico, excepto el primero, que puede ser numérico o de string. Si la primera columna es un tipo de 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 |
|---|---|---|---|
| Color de fondo | string | "#FFFFFF" (blanco) | El color de fondo para el gráfico en el formato de color de la API de gráficos |
| colores | Arreglo<string> | Automático | Úsalo para asignar colores específicos a cada serie de datos. Los colores se especifican en el formato de color de la API de gráficos.
El color i se usa para la columna de datos i y se une al principio si hay más columnas de datos que colores. Si se aceptan variaciones de un solo color para todas las series, usa la opción color en su lugar. |
| habilitarEventos | boolean | falso | Causa que los gráficos generen eventos activados por el usuario, como hacer clic o desplazar el mouse. Solo se admite para tipos de gráficos específicos. Consulta la sección Eventos a continuación. |
| alto | número | Altura del contenedor | Altura del gráfico en píxeles. |
| leyenda | string | 'derecha' | Posición y tipo de leyenda Puede ser una de las siguientes opciones:
|
| máx. | número | automático | El valor máximo que se muestra en el eje Y. |
| min | número | automático | Valor mínimo que se muestra en el eje Y. |
| showCategoryLabels. | boolean | true | Si se establece como falsa, quita las etiquetas de las categorías (las etiquetas del eje X). |
| showValueLabels | boolean | true | Si se establece como falsa, quita las etiquetas de los valores (las etiquetas del eje Y). |
| title | string | sin título | Texto para mostrar arriba del gráfico |
| Intervalo de etiquetas de valor | número | Automático | El intervalo en el que se muestran las etiquetas del eje de valor. Por ejemplo, si min es 0, max es 100, y valueLabelsInterval es 20, el gráfico mostrará las etiquetas de eje en (0, 20, 40, 60, 80 100). |
| ancho | número | Ancho del contenedor | 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
Puedes registrarte para escuchar los eventos que se describen en la página Gráfico genérico de imágenes.
Política de Datos
Consulta la política de registro de la API de Charts.