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 circular 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:["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 datos
Dos columnas. La primera columna debe ser una cadena y contener la etiqueta de la porción. La segunda columna debe ser un número y 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 |
|---|---|---|---|
| backgroundColor | cadena | '#FFFFFF' (blanco) | El color de fondo del gráfico en el formato de color de la API de Chart. |
| color | cadena | Automático | Especifica un color base para usar en todas las series; cada serie será una gradación del color especificado. Los colores se especifican en el formato de color de la API de Chart.
Se ignora si se especifica colors. |
| 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. |
| is3D | boolean | false | Si se configura como verdadera, muestra un gráfico tridimensional. |
| etiquetas | cadena | "none" | Qué etiqueta, si la hay, se debe mostrar para cada porción. Elige uno de los siguientes valores:
|
| leyenda | cadena | 'derecha' | La ubicación de la leyenda en el gráfico. Elige uno de los siguientes valores: 'top', 'bottom', 'left', 'right', 'none'. |
| título | cadena | sin título | Es el texto que se mostrará sobre el gráfico. |
| 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.