Visualização: gráfico de pizza (imagem)

Importante: a parte de gráficos de imagem das Ferramentas de gráficos do Google foi oficialmente suspensa em 20 de abril de 2012. Ele continuará funcionando de acordo com nossa política de descontinuação.

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados

Visão geral

Um gráfico de pizza processado como uma imagem usando a Google Charts API.

Exemplo

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

Carregando

O nome do pacote google.charts.load é "imagepiechart":

  google.charts.load('current', {packages: ['imagepiechart']});

O nome da classe da visualização é google.visualization.ImagePieChart

  var visualization = new google.visualization.ImagePieChart(container);

Formato de dados

Duas colunas. A primeira coluna deve ser uma string e conter o rótulo da fração. A segunda coluna deve ser um número e conter o valor da fatia.

Opções de configuração

É possível especificar as opções a seguir como parte do objeto options transmitido para o método draw() da visualização.

Nome Tipo Padrão Descrição
backgroundColor string '#FFFFFF' (branco) A cor do plano de fundo do gráfico no formato de cores da API de gráficos.
color string Automático Especifica uma cor de base a ser usada para todas as séries. Cada série será uma gradação da cor especificada. As cores são especificadas no formato de cores da API de gráficos. Será ignorado se colors for especificado.
cores Matriz<string> Automático Use para atribuir cores específicas a cada série de dados. As cores são especificadas no formato de cores da API de gráficos. A cor i é usada para a coluna de dados i, envolvendo o início se houver mais colunas de dados do que cores. Se variações de uma única cor forem aceitáveis para todas as séries, use a opção color.
enableEvents boolean false Faz com que os gráficos lancem eventos acionados pelo usuário, como clicar ou passar o mouse. Compatível apenas com tipos de gráficos específicos. Consulte Eventos abaixo.
height number Altura do contêiner Altura do gráfico em pixels.
is3D boolean false Se definido como verdadeiro, exibe um gráfico tridimensional.
rótulos string "none"

Qual rótulo, se houver, mostrar para cada fatia. Escolha um dos seguintes valores:

  • "none": sem rótulos.
  • "value" - usa o valor da fração como um rótulo.
  • "name" - usa o nome da fatia (o nome da coluna).
lenda string "direita" A localização da legenda no gráfico. Escolha um dos seguintes valores: "top", "bottom", "left", "right" ou "none".
título string sem título Texto a ser exibido acima do gráfico.
width number Largura do contêiner Largura do gráfico em pixels.

Métodos

Método Tipo de retorno Descrição
draw(data, options) nenhum Desenha o gráfico.

Eventos

Você pode se registrar para ouvir os eventos descritos na página Gráfico de imagem genérico.

Política de dados

Consulte a política de geração de registros da API de gráficos.