Funciones obsoletas
Esta visualización se reemplazó por una versión nueva. Úsala en su lugar. Para una migración fácil, consulta la página de notas de la versión.
Descripción general
Un gráfico circular que se procesa en el navegador mediante SVG o VML Muestra sugerencias cuando haces clic en secciones. Anima fragmentos cuando se hace clic en entradas de leyenda.
Por: Google
Ejemplo
Codifícalo tú mismo en la Visualización de Playground.
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["piechart"]}); google.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.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Cargando
El nombre del paquete google.load
es "piechart"
google.load("visualization", "1", {packages: ["piechart"]});
El nombre de clase de la visualización es google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(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
Nombre | Tipo | Predeterminado | Descripción |
---|---|---|---|
FondoColor | string o un objeto | color predeterminado | El color de fondo para el área principal del gráfico
Una de las siguientes opciones:
|
Color de borde | string o un objeto | color predeterminado | El borde que rodea los elementos del gráfico Los valores posibles son los de la opción de configuración backgroundColor. |
colores | Arreglo de objetos o strings | Colores predeterminados | Un arreglo de colores, en el que cada elemento especifica el color de una serie. Debes especificar un elemento de arreglo para cada serie.
|
Habilítala | boolean | true | Si se establece como verdadera, se muestra información sobre la herramienta cuando el usuario hace clic en una porción. |
FocusBorderColor | string o un objeto | color predeterminado | El borde de los elementos del gráfico que están en foco (con el mouse). Los valores posibles son los de la opción de configuración backgroundColor. |
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. |
leyenda | string | 'derecha' | Posición y tipo de leyenda Puede ser una de las siguientes opciones:
|
Color de fondo de la leyenda | string o un objeto | color predeterminado | El color de fondo para el área de leyenda del gráfico Los valores posibles son los de la opción de configuración backgroundColor. |
Tamaño de fuente | número | automático | El tamaño en píxeles de la fuente de la leyenda |
Color de leyenda | string o un objeto | color predeterminado | El color del texto de la leyenda Los valores posibles son los de la opción de configuración backgroundColor. |
pieJoinAngle | número | 0 | Cualquier porción menor que este ángulo se combinará en una porción genérica etiquetada como “Otro”. |
pastel Mínimo Ángulo | número | 0 | Las porciones más pequeñas que este ángulo no se dibujarán en el gráfico circular (aunque aún obtendrán una entrada de leyenda). Los fragmentos restantes se expandirán para llenar el gráfico en proporción fija. Nota: Esto puede distorsionar los valores aparentes, en especial cuando este número es grande, porque se está quitando una cantidad del pastel. Para calcular los tamaños de los cortes, en primer lugar se unen los ángulos más pequeños que el de pastelJoinAngle en el sector “Otro”, y luego se dibujan todos los cortes más grandes que el pastel. |
title | string | sin título | Texto para mostrar arriba del gráfico |
Color de título | string o un objeto | color predeterminado | El color del título del gráfico. Los valores posibles son los de la opción de configuración backgroundColor. |
Tamaño de fuente de título | número | automático | El tamaño de fuente para el título del gráfico, en píxeles. |
tooltipFontSize |
número | 11 | El tamaño de fuente del texto de la información sobre la herramienta Esto puede reducirse si la información sobre la herramienta es demasiado pequeña para incluir el texto en la fuente especificada. |
Información sobre la altura |
número | 60 | Corresponde a la altura, en píxeles, de la información sobre la herramienta. La altura de la información sobre la herramienta es fija; nunca aumentará ni se reducirá para ajustarse al tamaño de la fuente o del texto. Sin embargo, se recortará cualquier altura superior a 1/3 de la altura del gráfico. |
Información sobre la herramienta | número | 120 | Ancho en píxeles de la información sobre la herramienta. El ancho de la información sobre la herramienta es fijo; nunca aumentará ni reducirá para adaptarse a la longitud o el tamaño de la fuente del texto. Sin embargo, se recortará cualquier ancho superior al ancho 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. |
getSelection() |
Arreglo de elementos de selección | Implementación estándar getSelection() Los elementos seleccionados son elementos de fila y celda. El usuario puede seleccionar varias filas o una sola celda a la vez. |
setSelection() |
ninguno | Implementación setSelection() estándar, pero admite la selección de varias filas o una celda. Trata cada entrada de selección como una selección de fila o celda. |
Eventos
Nombre | Descripción | Propiedades |
---|---|---|
onmouseover |
Se activa cuando el usuario desplaza el mouse sobre una porción y pasa los índices de fila y columna de la celda correspondiente. | fila, columna |
onmouseout |
Se activa cuando el usuario se aleja del segmento y pasa los índices de fila y columna de la celda correspondiente. | fila, columna |
ready |
El gráfico está listo para las llamadas a métodos externos. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw y llamarlo solo después de que se active el evento. |
Ninguno |
select |
Se activa cuando el usuario hace clic en una porción o leyenda. Cuando se selecciona una porción, se selecciona la celda correspondiente en la tabla de datos. Cuando se selecciona una leyenda, se selecciona la columna correspondiente en la tabla de datos. Para saber qué se seleccionó, llama a Nota: Hacer clic en una porción no alterna entre seleccionar y anular la selección de una celda; hacer clic en una porción siempre la selecciona. Si, en cambio, haces clic en una entrada de leyenda, puedes activar o desactivar la fila y seleccionarla. |
Ninguno |
Política de Datos
El código y los datos se procesan y procesan en el navegador. No se envían datos a ningún servidor.