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 líneas 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:["imagelinechart"]});
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.ImageLineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, min: 0});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
Cargando
El nombre del paquete google.charts.load es "imagelinechart".
google.charts.load('current', {packages: ['imagelinechart']});
El nombre de clase de la visualización es google.visualization.ImageLineChart.
var visualization = new google.visualization.ImageLineChart(container);
Formato de los datos
La primera columna debe ser una string y contener la etiqueta de la categoría. Puede seguir cualquier cantidad de columnas, todas deben ser numéricas. Cada columna se muestra como una línea separada.
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. |
| mostrarAxisLines | boolean | true | Si se establece como falsa, quita las líneas del eje y las etiquetas. |
| showCategoryLabels. | boolean | igual que showAxisLines | Si se establece como falsa, quita las etiquetas de las categorías (las etiquetas del eje X). |
| showValueLabels | boolean | igual que showAxisLines | 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.