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 barras 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:["imagebarchart"]});
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.ImageBarChart(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 "imagebarchart"
google.charts.load("current", {packages: [[]"imagebarchart"]});
El nombre de clase de la visualización es google.visualization.ImageBarChart
var visualization = new google.visualization.ImageBarChart(container);
Formato de datos
La primera columna debe ser una cadena y contener la etiqueta de la categoría. Puede ir seguida de cualquier cantidad de columnas. Todas deben ser numéricas. Cada columna se muestra como un conjunto de barras. Cuando la tabla de datos contiene más de una columna numérica, los valores de una fila se muestran como barras apiladas.
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. |
| isStacked | boolean | verdadero | Controla si varias columnas de datos se mostrarán como barras apiladas (en lugar de agrupadas). |
| isVertical | boolean | false | Controla si las barras serán verticales. |
| 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 se establece como falsa, se quitarán las etiquetas de las categorías. |
| showValueLabels | boolean | verdadero | Si se establece como falsa, se quitan las etiquetas de los valores. |
| 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.