Visualização: gráfico de pizza

Visão geral

Um gráfico de pizza renderizado no navegador usando SVG ou VML. Mostra dicas ao passar o cursor sobre as fatias.

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':['corechart']});
      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 options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Como criar um gráfico de pizza em 3D

Se você definir a opção is3D como true, seu gráfico de pizza será desenhado como se tivesse três dimensões:

is3D é false por padrão, então aqui, nós o definimos explicitamente como true: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Como fazer um gráfico de rosca

Um gráfico de rosca é um gráfico de pizza com um buraco no centro. É possível criar gráficos de rosca com a opção pieHole:

A opção pieHole precisa ser definida como um número entre 0 e 1, correspondente à proporção de raios entre o buraco e o gráfico. Números entre 0,4 e 0,6 terão uma aparência melhor na maioria dos gráficos. Valores iguais ou maiores que 1 são ignorados, e um valor de 0 fecha completamente o buraco de pizza.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      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 options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Não é possível combinar as opções pieHole e is3D. Se você fizer isso, pieHole será ignorado.

Os gráficos do Google tentam colocar o rótulo o mais próximo possível do centro da fração. Se você tiver um gráfico de rosca com apenas uma fatia, o centro da fatia pode cair no orifício da rosca. Nesse caso, mude a cor do rótulo:
Opções
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
HTML completo
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Como girar um gráfico de pizza

Por padrão, os gráficos de pizza começam com a borda esquerda da primeira fatia apontando para cima. É possível alterar isso com a opção pieStartAngle:

Aqui, giramos o gráfico em 100 graus no sentido horário com a opção pieStartAngle: 100. Essa escolha foi feita porque esse ângulo específico faz com que o rótulo "Italiano" caiba dentro da fatia.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Como explodir um Slice

É possível separar fatias de pizza do restante do gráfico com a propriedade offset da opção slices:

Para separar uma fração, crie um objeto slices e atribua o número de fração apropriado a um offset entre 0 e 1. Abaixo, atribuímos deslocamentos progressivamente maiores às fatias 4 (guzerate), 12 (marati), 14 (Oriya) e 15 (Punjabi): 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Como remover frações

Para omitir uma fatia, altere a cor para 'transparent':

Também usamos pieStartAngle para girar o gráfico em 135 graus, pieSliceText para remover o texto das fatias e tooltip.trigger para desativar as dicas:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Limite de visibilidade da fração

Defina um valor como o limite para que uma fatia de pizza seja renderizada individualmente. Esse valor corresponde a uma fração do gráfico (com todo o gráfico sendo do valor 1). Para definir esse limite como uma porcentagem do todo, divida a porcentagem desejada por 100 (para um limite de 20%, o valor seria 0,2). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Qualquer fração menor que esse limite será combinada em uma única fração "Outra" e terá o valor combinado de todas as fatias abaixo do limite. 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Carregando

O nome do pacote google.charts.load é "corechart".

  google.charts.load("current", {packages: ["corechart"]});

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

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

Formato de dados

Linhas:cada linha na tabela representa uma fração.

Columns:

  Coluna 0 Coluna 1 ... Coluna N (opcional)
Finalidade: Rótulos da fração Valores da fração ... Papéis opcionais
Tipo de dados: string number ...
Role: domínio dados ...
Papéis de coluna opcionais: Nenhum controle Nenhum controle ...

Opções de configuração

Nome
backgroundColor

A cor de plano de fundo da área principal do gráfico. Pode ser uma string de cor HTML simples, por exemplo: 'red' ou '#00cc00', ou um objeto com as propriedades a seguir.

Tipo:string ou objeto
Padrão: "branco"
backgroundColor.stroke

A cor da borda do gráfico, como uma string de cor HTML.

Tipo: string
Padrão: "#666"
backgroundColor.strokeWidth

A largura da borda, em pixels.

Tipo: número
Padrão:0
backgroundColor.fill

A cor de preenchimento do gráfico, como uma string de cor HTML.

Tipo: string
Padrão: "branco"
chartArea

Um objeto com membros para configurar o posicionamento e o tamanho da área do gráfico (onde o próprio gráfico é desenhado, excluindo eixo e legendas). Dois formatos são compatíveis: um número ou um número seguido por %. Um número simples é um valor em pixels, enquanto um número seguido por % é uma porcentagem. Exemplo: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tipo: objeto
Padrão:nulo
chartArea.backgroundColor
Cor de fundo da área do gráfico. Quando uma string é usada, ela pode ser hexadecimal (por exemplo, '#fdc') ou o nome de uma cor em inglês. Quando um objeto é usado, as seguintes propriedades podem ser fornecidas:
  • stroke: a cor, fornecida como uma string hexadecimal ou nome da cor em inglês.
  • strokeWidth: se fornecido, desenha uma borda ao redor da área do gráfico com a largura especificada (e com a cor stroke).
Tipo:string ou objeto
Padrão: "branco"
chartArea.left

A distância da borda esquerda a desenhar o gráfico.

Tipo:número ou string
Padrão:automático
chartArea.top

Indica a distância entre a borda superior e o gráfico a partir da borda superior.

Tipo:número ou string
Padrão:automático
chartArea.width

Largura da área do gráfico.

Tipo:número ou string
Padrão:automático
chartArea.height

Altura da área do gráfico.

Tipo:número ou string
Padrão:automático
cores

As cores a serem usadas para os elementos do gráfico. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: colors:['red','#004411'].

Tipo:matriz de strings
Padrão:cores padrão
enableInteractivity

Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não vai gerar "select" ou outros eventos baseados em interação (mas vai gerar eventos prontos ou de erro) e não vai mostrar texto de passar o cursor nem mudar de acordo com a entrada do usuário.

Tipo: booleano
Padrão:true
fontSize

O tamanho da fonte padrão, em pixels, de todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico.

Tipo: número
Padrão:automático
fontName

O tipo de fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades de elementos específicos do gráfico.

Tipo: string
Padrão: "Arial"
forceIFrame

Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames.

Tipo: booleano
Padrão:false
height

Altura do gráfico, em pixels.

Tipo: número
Padrão:altura do elemento contêiner
is3D

Se verdadeiro, exibe um gráfico tridimensional.

Tipo: booleano
Padrão:false
lenda

Um objeto com membros para configurar vários aspectos da legenda. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: objeto
Padrão:nulo
legend.alignment

Alinhamento da legenda. Será um dos seguintes valores:

  • "start": alinhado ao início da área alocada para a legenda.
  • "center": centralizado na área alocada para a legenda.
  • "end" - alinhado ao fim da área alocada para a legenda.

Início, centro e fim são relativos ao estilo (vertical ou horizontal) da legenda. Por exemplo, em uma legenda de "direita", "início" e "fim" estão na parte de cima e de baixo, respectivamente. Para uma legenda de "topo", "início" e "fim" estariam à esquerda e à direita da área, respectivamente.

O valor padrão depende da posição da legenda. Para legendas "bottom", o padrão é "center". Outras legendas têm como padrão "start".

Tipo: string
Padrão:automático
legend.position

Posição da legenda. Será um dos seguintes valores:

  • "bottom" - exibe a legenda abaixo do gráfico.
  • "labeled" - desenha linhas que conectam fatias aos seus valores de dados.
  • "esquerda" - exibe a legenda esquerda do gráfico.
  • "none" - não exibe legenda.
  • "right" - exibe a legenda à direita do gráfico.
  • "top" - exibe a legenda acima do gráfico.
Tipo: string
Padrão: "right"
legend.maxLines

Número máximo de linhas na legenda. Defina como um número maior que um para adicionar linhas à legenda. Observação: a lógica exata usada para determinar o número real de linhas renderizadas ainda está em fluxo.

No momento, essa opção funciona apenas quando caption.position é "topo".

Tipo: número
Padrão: 1
legend.textStyle

Um objeto que especifica o estilo do texto da legenda. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieHole

Se estiver entre 0 e 1, mostra um gráfico de rosca. O buraco com um raio igual a number vezes o raio do gráfico.

Tipo: número
Padrão:0
pieSliceBorderColor

A cor das bordas das fatias. Aplicável apenas quando o gráfico é bidimensional.

Tipo: string
Padrão: "branco"
pieSliceText

O conteúdo do texto exibido na fatia. Será um dos seguintes valores:

  • "percentage" - a porcentagem do tamanho da fatia em relação ao total.
  • "valor" - o valor quantitativo da fatia.
  • "rótulo" - o nome da fatia.
  • "none" - Nenhum texto é exibido.
Tipo: string
Padrão: 'percentage'
pieSliceTextStyle

Um objeto que especifica o estilo de texto da fatia. O objeto tem este formato:

{color: <string>, fontName: <string>, fontSize: <number>}

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

O ângulo, em graus, para girar o gráfico. O padrão de 0 orienta a borda mais esquerda da primeira fatia diretamente para cima.

Tipo: número
Padrão:0
reverseCategories

Se verdadeiro, desenha fatias no sentido anti-horário. O padrão é desenhar no sentido horário.

Tipo: booleano
Padrão:false
pieResidueSliceColor

Cor da fração de combinação que contém todas as fatias abaixo de sliceVisibilityThreshold.

Tipo: string
Padrão: '#mostrado'
pieResidueSliceLabel

Um rótulo para a fração de combinação que contém todas as frações abaixo de sliceVisibilityThreshold.

Tipo: string
Padrão: "Outro"
fatias

Uma matriz de objetos, cada um descrevendo o formato da fatia correspondente da pizza. Para usar valores padrão em uma fração, especifique um objeto vazio (por exemplo, {}). Se uma fração ou um valor não for especificado, o valor global será usado. Cada objeto é compatível com as seguintes propriedades:

  • color: a cor a ser usada nessa fatia. Especifique uma string de cor HTML válida.
  • offset: a distância entre a fatia e o restante da pizza, de 0,0 (nenhuma) até 1,0 (o raio da pizza).
  • textStyle: substitui o pieSliceTextStyle global desta fração.

É possível especificar uma matriz de objetos, cada um sendo aplicado à fração na ordem determinada, ou especificar um objeto em que cada filho tenha uma chave numérica que indique a qual fração se aplica. Por exemplo, as duas declarações a seguir são idênticas e declaram a primeira fração como preta e a quarta como vermelha: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Tipo:matriz de objetos ou objeto com objetos aninhados
Padrão: {}
sliceVisibilityThreshold

O valor fracionário da pizza, abaixo do qual uma fatia não será exibida individualmente. Todas as fatias que não ultrapassaram esse limite serão combinadas em uma única fração "Outros", cujo tamanho é a soma de todos os respectivos tamanhos. O padrão é não mostrar individualmente qualquer fatia menor que meio grau. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Tipo: número
Padrão:meio grau (0,5/360, 1/720 ou 0,0014)
título

Texto a ser exibido acima do gráfico.

Tipo: string
Padrão:sem título
titleTextStyle

Um objeto que especifica o estilo do texto do título. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
dica

Um objeto com membros para configurar vários elementos de dica. Para especificar as propriedades desse objeto, use a notação literal de objeto, como mostrado aqui: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: objeto
Padrão:nulo
tooltip.ignoreBounds

Se definido como true, permite que o desenho de dicas flua fora dos limites do gráfico em todos os lados.

Observação:isso se aplica apenas a dicas de HTML. Se essa opção for ativada com dicas de SVG, qualquer estouro fora dos limites do gráfico será cortado. Consulte Como personalizar o conteúdo da dica para mais detalhes.

Tipo: booleano
Padrão:false
tooltip.isHtml

Se definida como verdadeira, use dicas renderizadas em HTML (em vez de renderizadas em SVG). Consulte Como personalizar o conteúdo da dica para mais detalhes.

Observação:a personalização do conteúdo da dica HTML pelo papel de dados da coluna de dicas não é compatível com a visualização do gráfico de bolhas.

Tipo: booleano
Padrão:false
tooltip.showColorCode

Se verdadeiro, mostra quadrados coloridos ao lado das informações da fatia na dica.

Tipo: booleano
Padrão:false
tooltip.text

Quais informações exibir quando o usuário passar o cursor sobre uma fatia de pizza. Os valores a seguir são compatíveis:

  • "ambos": [Padrão] exibe o valor absoluto da fração e a porcentagem do todo.
  • "value" - exibe apenas o valor absoluto da fatia.
  • "percentage": exibe somente a porcentagem do todo representada pela fatia.
Tipo: string
Padrão: "ambos"
tooltip.textStyle

Um objeto que especifica o estilo do texto da dica. O objeto tem este formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

O color pode ser qualquer string de cor HTML, como 'red' ou '#00cc00'. Consulte também fontName e fontSize.

Tipo: objeto
Padrão: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

A interação do usuário que faz com que a dica seja exibida:

  • "focus": a dica é mostrada quando o usuário passa o cursor sobre o elemento.
  • "nenhum" - a dica de ferramenta não será exibida.
  • "selection": a dica de ferramenta será mostrada quando o usuário selecionar o elemento.
Tipo: string
Padrão: "focus"
width

Largura do gráfico, em pixels.

Tipo: número
Padrão:largura do elemento que o contém

Métodos

Método
draw(data, options)

Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento ready é disparado. Extended description.

Return Type: nenhum
getAction(actionID)

Retorna o objeto de ação da dica com o actionID solicitado.

Tipo de retorno: objeto
getBoundingBox(id)

Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do elemento id do gráfico. O formato de id ainda não está documentado (eles são os valores de retorno dos manipuladores de eventos), mas estes são alguns exemplos:

var cli = chart.getChartLayoutInterface();

Altura da área do gráfico
cli.getBoundingBox('chartarea').height
Largura da terceira barra na primeira série de um gráfico de barras ou colunas
cli.getBoundingBox('bar#0#2').width
Caixa delimitadora do quinto encaixe de um gráfico de pizza
cli.getBoundingBox('slice#4')
Caixa delimitadora dos dados de um gráfico vertical (por exemplo, coluna):
cli.getBoundingBox('vAxis#0#gridline')
Caixa delimitadora dos dados de um gráfico horizontal (por exemplo, de barras):
cli.getBoundingBox('hAxis#0#gridline')

Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado.

Tipo de retorno: objeto
getChartAreaBoundingBox()

Retorna um objeto que contém as informações de esquerda, parte superior, largura e altura do conteúdo do gráfico (ou seja, excluindo rótulos e legendas):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Os valores são relativos ao contêiner do gráfico. Chame essa função depois que o gráfico for desenhado.

Tipo de retorno: objeto
getChartLayoutInterface()

Retorna um objeto que contém informações sobre o posicionamento na tela do gráfico e seus elementos.

Os seguintes métodos podem ser chamados no objeto retornado:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Chame essa função depois que o gráfico for desenhado.

Tipo de retorno: objeto
getHAxisValue(xPosition, optional_axis_index)

Retorna o valor de dados horizontal em xPosition, que é um deslocamento de pixel da borda esquerda do contêiner do gráfico. Pode ser negativo.

Exemplo: chart.getChartLayoutInterface().getHAxisValue(400).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
getImageURI()

Retorna o gráfico serializado como um URI de imagem.

Chame essa função depois que o gráfico for desenhado.

Consulte Como imprimir gráficos PNG.

Tipo de retorno: string
getSelection()

Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são frações e entradas de legenda. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Tipo de retorno:matriz de elementos de seleção
getVAxisValue(yPosition, optional_axis_index)

Retorna o valor de dados vertical em yPosition, que é um deslocamento de pixel para baixo em relação à borda superior do contêiner do gráfico. Pode ser negativo.

Exemplo: chart.getChartLayoutInterface().getVAxisValue(300).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
getXLocation(dataValue, optional_axis_index)

Retorna a coordenada x do pixel de dataValue em relação à borda esquerda do contêiner do gráfico.

Exemplo: chart.getChartLayoutInterface().getXLocation(400).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
getYLocation(dataValue, optional_axis_index)

Retorna a coordenada y do pixel de dataValue em relação à borda superior do contêiner do gráfico.

Exemplo: chart.getChartLayoutInterface().getYLocation(300).

Chame essa função depois que o gráfico for desenhado.

Tipo de devolução: número
removeAction(actionID)

Remove a ação da dica com o actionID solicitado do gráfico.

Tipo de devolução: none
setAction(action)

Define uma ação de dica a ser executada quando o usuário clica no texto de ação.

O método setAction usa um objeto como parâmetro de ação. Esse objeto precisa especificar três propriedades: id, o ID da ação definida, text, o texto que aparecerá na dica da ação, e action, a função que será executada quando um usuário clicar no texto da ação.

Todas as ações de dica precisam ser definidas antes de chamar o método draw() do gráfico. Descrição estendida.

Tipo de devolução: none
setSelection()

Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior. As entidades selecionáveis são frações e entradas de legenda. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Return Type: nenhum
clearChart()

Limpa o gráfico e libera todos os recursos alocados.

Return Type: nenhum

Eventos

Para mais informações sobre como usar esses eventos, consulte Interatividade básica, Como lidar com eventos e Como disparar eventos.

Nome
click

Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legenda, os eixos, as linhas de grade ou os rótulos são clicados.

Propriedades:targetID
error

Disparado quando ocorre um erro ao tentar renderizar o gráfico.

Properties:ID, message
onmouseover

Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma entrada de fração ou legenda correlaciona-se a uma linha na tabela de dados (o índice da coluna é nulo).

Propriedades: linha, coluna
onmouseout

Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma entrada de fração ou legenda correlaciona-se a uma linha na tabela de dados (o índice da coluna é nulo).

Propriedades: 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 disparado.

Properties:nenhuma
select

Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame getSelection().

Properties:nenhuma

Política de dados

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