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

Descontinuado

Esta visualização foi substituída por uma nova versão. Use essa versão. Para facilitar a migração, consulte a página de notas da versã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 renderizado no navegador usando SVG ou VML. Mostra dicas ao clicar nas fatias. As fatias são animadas ao clicar nas entradas de legenda.

Autor: Google

Exemplo

Programe por conta própria no Playground de visualização

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

Carregando

O nome do pacote google.load é "piechart"

  google.load("visualization", "1", {packages: ["piechart"]});

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

  var visualization = new google.visualization.PieChart(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

Nome Tipo Padrão Descrição
backgroundColor string ou objeto cor padrão A cor de plano de fundo da área principal do gráfico. Uma das seguintes opções:
  • Uma string com cor compatível com HTML, por exemplo, "red" ou "#00cc00", ou
  • Uma descrição de um objeto n com as seguintes propriedades:
    • stroke: string de cor HTML que descreve a cor da borda do gráfico.
    • fill: uma string de cor HTML que descreve a cor de plano de fundo do gráfico.
    • strokeSize: um número que descreve a espessura, em pixels, da borda do gráfico. Se não houver borda, esse valor pode ser definido como 0.
      Exemplo: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
borderColor string ou objeto cor padrão A borda ao redor dos elementos do gráfico. Os valores possíveis são os da opção de configuração backgroundColor.
cores Matriz de strings ou objetos Cores padrão

Uma matriz de cores, na qual cada elemento especifica a cor de uma série. Você deve especificar um elemento de matriz para cada série.

  • Se is3D=false, será uma matriz de cores HTML. Exemplo: color:['#00FF00','orange']
  • Se for is3D=true, será uma matriz de cores HTML ou objetos desse tipo: {color:face_color, darker:shade_color}, em que color é a cor do rosto do elemento e darker é a cor da tonalidade. No entanto, se você especificar uma cor HTML para um objeto 3D, o rosto e a tonalidade terão a mesma cor, e o efeito 3D será reduzido. Exemplo: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean verdadeiro Se definida como verdadeira, as dicas serão mostradas quando o usuário clicar em uma fração.
focusBorderColor string ou objeto cor padrão A borda ao redor dos elementos do gráfico que estão em foco (apontados pelo mouse). Os valores possíveis são os da opção de configuração backgroundColor.
height number Altura do contêiner Altura do gráfico em pixels.
is3D boolean false Se definido como verdadeiro, exibe um gráfico tridimensional.
lenda string "direita" Posição e tipo de legenda. Será um dos seguintes valores:
  • “right” - à direita do gráfico.
  • "left" - à esquerda do gráfico.
  • "top" - acima do gráfico.
  • "bottom" - abaixo do gráfico.
  • "label": rótulos próximos a fatias.
  • "none": nenhuma legenda é exibida.
legendBackgroundColor string ou objeto cor padrão A cor de fundo da área da legenda do gráfico. Os valores possíveis são os da opção de configuração backgroundColor.
legendFontSize number automático O tamanho da fonte da legenda, em pixels.
legendTextColor string ou objeto cor padrão A cor do texto da legenda. Os valores possíveis são os da opção de configuração backgroundColor.
pieJoinAngle number 0 Qualquer fração menor que esse ângulo será combinada em uma fração genérica denominada "Outro".
pieMinimalAngle number 0

Qualquer fatia menor que esse ângulo não será desenhada no gráfico de pizza (embora ainda receba uma entrada de legenda). As fatias restantes se expandirão para preencher a pizza em uma proporção fixa. Observação: isso pode distorcer os valores aparentes, especialmente quando esse número é grande, porque uma quantidade está sendo removida da pizza.

Para calcular os tamanhos das fatias, os primeiros ângulos menores que pieJoinAngle são unidos à fração "Other" e, em seguida, todas as fatias maiores que pieMinimalAngle são desenhadas
título string sem título Texto a ser exibido acima do gráfico.
titleColor string ou objeto cor padrão A cor do título do gráfico. Os valores possíveis são os da opção de configuração backgroundColor.
titleFontSize number automático O tamanho da fonte do título do gráfico, em pixels.

tooltipFontSize		 number 11 O tamanho da fonte do texto da dica. Isso poderá ser reduzido se a dica for muito pequena para conter o texto na fonte especificada.
tooltipHeight
 number 60 A altura da dica, em pixels. A altura da dica é fixa. Ela nunca vai aumentar ou diminuir para se ajustar ao comprimento ou ao tamanho da fonte do texto. No entanto, qualquer coisa maior que 1/3 da altura do gráfico será cortada.
tooltipWidth number 120 A largura da dica, em pixels. A largura da dica é fixa. Ela nunca vai aumentar ou diminuir para se ajustar ao comprimento ou ao tamanho da fonte do texto. No entanto, tudo o que for maior que a largura do gráfico será cortado.
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.
getSelection() Matriz de elementos de seleção Implementação padrão do getSelection(). Os elementos selecionados são os elementos de linha e célula. Várias linhas e/ou uma única célula podem ser selecionadas ao mesmo tempo pelo usuário.
setSelection() nenhum Implementação padrão de setSelection(), mas aceita a seleção de várias linhas e/ou uma célula. Trata cada entrada de seleção como uma seleção de linha ou célula.

Eventos

Nome Descrição Propriedades
onmouseover Disparado quando o usuário passa o mouse sobre uma fatia e transmite os índices de linha e coluna da célula correspondente. linha, coluna
onmouseout Disparado quando o usuário afasta o mouse de uma fatia e transmite os índices de linha e coluna da célula correspondente. linha, coluna
ready O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método draw e chame-o somente depois que o evento for acionado. Nenhum
select

Disparado quando o usuário clica em uma fatia ou legenda. Quando uma fração é selecionada, a célula correspondente na tabela de dados é selecionada. Quando uma legenda é selecionada, a coluna correspondente na tabela de dados é selecionada. Para saber o que foi selecionado, chame getSelection().

Observação: clicar em uma fatia não alterna entre marcar e desmarcar uma célula. Clicar em uma fatia sempre a seleciona. Clicar em uma entrada de legenda, por outro lado, alterna entre selecionar e desmarcar a linha.

Nenhum

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.