Visualización: gráfico circular (versión anterior)

Obsoleto

Esta visualización se reemplazó por una versión nueva. Úsala en su lugar. Para facilitar la migración, consulta la página de notas de la versión.

  1. Overview
  2. Ejemplo
  3. Cargando
  4. Formato de los datos
  5. Opciones de configuración
  6. Métodos
  7. Eventos
  8. Política de Datos

Descripción general

Un gráfico circular que se renderiza dentro del navegador con SVG o VML Muestra sugerencias cuando se hace clic en las porciones. Anima porciones cuando se hace clic en las entradas de la leyenda.

Por: Google

Ejemplo

Codificala tú mismo en el Playground de visualización.

<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 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

Nombre Tipo Predeterminado Descripción
backgroundColor Objeto o string color predeterminado El color de fondo del área principal del gráfico. Una de las siguientes opciones:
  • Una cadena de color compatible con HTML, por ejemplo “rojo” o “#00cc00”, o
  • Es una descripción de un objeto n con las siguientes propiedades:
    • stroke: Es una cadena de color HTML que describe el color del borde del gráfico.
    • fill: Es una cadena de color HTML que describe el color de fondo del gráfico.
    • strokeSize: Es un número que describe el grosor, en píxeles, del borde del gráfico. Si no hay borde, se puede establecer en 0.
      Ejemplo: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
borderColor Objeto o string color predeterminado El borde alrededor de los elementos del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
colores Array de objetos o cadenas Colores predeterminados

Una matriz de colores, en la que cada elemento especifica el color de una serie. Debes especificar un elemento de array para cada serie.

  • Si es is3D=false, se trata de un array de colores HTML. Ejemplo: colores:['#00FF00','naranja']
  • Si es is3D=true, es un array de colores HTML o de objetos de este tipo: {color:face_color, darker:shade_color}, en el que color es el color de la cara del elemento y darker es el color de la sombra. Sin embargo, si especificas un color HTML para un objeto 3D, el rostro y el tono serán del mismo color, y se reducirá el efecto 3D. Ejemplo: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean verdadero Si se establece como verdadera, se muestra información sobre la herramienta cuando el usuario hace clic en una porción.
focusBorderColor Objeto o string color predeterminado El borde alrededor de los elementos del gráfico que están enfocados (señalado por el mouse). Los valores posibles son los de la opción de configuración backgroundColor.
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.
leyenda cadena 'derecha' Posición y tipo de leyenda. Puede ser una de las siguientes opciones:
  • "right": a la derecha del gráfico.
  • "left": se encuentra a la izquierda del gráfico.
  • “top”: se encuentra encima del gráfico.
  • "parte inferior": se encuentra debajo del gráfico.
  • "label": etiquetas cerca de porciones.
  • "none": No se muestra ninguna leyenda.
legendBackgroundColor Objeto o string color predeterminado El color de fondo del área de la leyenda del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
legendFontSize número automático El tamaño de la fuente de la leyenda en píxeles.
legendTextColor Objeto o string 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 “Other”.
pieMinimalAngle número 0

Cualquier porción más pequeña que este ángulo no se dibujará en el gráfico circular (aunque seguirá teniendo una entrada de leyenda). Las porciones restantes se expandirán para llenar el pastel en proporción fija. Nota: Esto puede distorsionar los valores aparentes, en especial cuando el número es alto, ya que se quitará una cantidad del gráfico.

Para calcular los tamaños de las porciones, los primeros ángulos más pequeños que pieJoinAngle se unen a la porción "Other" y, luego, se dibujan todas las porciones más grandes que pieMinimalAngle.
título cadena sin título Es el texto que se mostrará sobre el gráfico.
titleColor Objeto o string color predeterminado El color del título del gráfico. Los valores posibles son los de la opción de configuración backgroundColor.
titleFontSize 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 información sobre la herramienta. Esto se puede reducir si la información sobre la herramienta es demasiado pequeña para contener el texto en la fuente especificada.
tooltipHeight
 número 60 La altura del cuadro de información en píxeles. La altura de la información es fija; nunca aumentará ni se reducirá para adaptarse a la longitud o al tamaño de la fuente del texto. Sin embargo, se recortará cualquier valor que sea superior a 1/3 de la altura del gráfico.
tooltipWidth número 120 Es el ancho de la información sobre la herramienta en píxeles. El ancho de la información es fijo; nunca aumentará ni se reducirá para adaptarse a la longitud o al tamaño de la fuente del texto. Sin embargo, se recortarán los elementos que superen el ancho del 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.
getSelection() Array de elementos de selección Implementación estándar de 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 Es la implementación estándar de setSelection(), 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 filas y columnas de la celda correspondiente. fila, columna
onmouseout Se activa cuando el usuario aleja el mouse de una porción y pasa los índices de filas y columnas de la celda correspondiente. fila, columna
ready El gráfico está listo para llamadas de método externas. 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 e llamarlos solo después de que se haya activado el evento. Ninguno
select

Se activa cuando el usuario hace clic en una porción o una 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 getSelection().

Nota: Cuando haces clic en una porción, no se alterna entre la selección y la anulación de selección de una celda; cuando haces clic en una porción, siempre se selecciona. Por otro lado, si haces clic en una entrada de la leyenda, se alternará entre la selección y la anulación de la selección de la fila.

Ninguno

Política de Datos

Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.