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 circular 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:["imagepiechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
Cargando
El nombre del paquete google.charts.load es "imagepiechart":
google.charts.load('current', {packages: ['imagepiechart']});
El nombre de clase de la visualización es google.visualization.ImagePieChart.
var visualization = new google.visualization.ImagePieChart(container);
Formato de los datos
Dos columnas. La primera columna debe ser una string y debe contener la etiqueta del segmento. La segunda columna debe ser un número y debe contener el valor de la porción.
Opciones de configuración
Puedes especificar las siguientes opciones como parte del objeto options que se pasa al método draw() de la visualizació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 |
| color | string | Automático | Especifica un color base para usar en todas las series. Cada serie será una graduación del color especificado. Los colores se especifican en el formato de color de la API de gráficos.
Se ignora si se especifica colors. |
| 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. |
| is3D; | boolean | falso | Si se establece como verdadera, se muestra un gráfico tridimensional. |
| etiquetas | string | "none" | Qué etiqueta mostrar en cada sector (si la hay) Elige uno de los siguientes valores:
|
| leyenda | string | 'derecha' | La ubicación de la leyenda en el gráfico Elige uno de los siguientes valores: "top", "bottom", "left", "right", "none". |
| title | string | sin título | Texto para mostrar arriba del gráfico |
| 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.