Visualización: gráfico circular (imagen)

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.

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

  • "none": Sin etiquetas.
  • "value": usa el valor de la porción como una etiqueta.
  • "name": Usa el nombre del fragmento (el nombre de la columna).
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.