Importante: o uso do componente de gráficos de imagem das Ferramentas de gráfico do Google foi suspenso oficialmente em 20 de abril de 2012. Ela vai continuar funcionando de acordo com nossa política de descontinuação.
Visão geral
Um gráfico de pizza que é renderizado como uma imagem usando a API Google Charts.
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 identificador da fatia. A segunda coluna deve ser um número e conter o valor da fatia.
Opções de configuração
Especifique as opções a seguir como parte do objeto options transmitido no método draw()
da visualização.
Nome | Tipo | Padrão | Descrição |
---|---|---|---|
backgroundColor | string | '#FFFFFF' (branca) | A cor do plano de fundo do gráfico no formato de cores da API Chart. |
cor | 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 Chart.
Será ignorado se colors for especificado. |
Cores | Matriz<string> | Automático | Use essa opção para atribuir cores específicas a cada série de dados. As cores são especificadas no formato de cores da API Chart.
A cor i é usada na coluna de dados i, envolvendo ao início
se houver mais colunas de dados do que cores. Se as 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 gerem eventos acionados pelo usuário, como clique ou mouse. Compatível apenas com tipos específicos de gráficos. Veja a seção Eventos abaixo. |
altura | number | Altura do contêiner | Altura do gráfico em pixels. |
is3D | boolean | false | Se definido como verdadeiro, exibe um gráfico tridimensional. |
labels | string | "none" | Qual rótulo, se houver, para cada fatia. Escolha entre estes valores:
|
lenda | string | "direita" | O local da legenda no gráfico. Escolha um dos seguintes valores: "top", "bottom", "left", "right" e "none". |
title | string | sem título | Texto a ser exibido acima do gráfico. |
largura | 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 genérico de imagens.
Política de dados
Consulte a política de geração de registros da API Chart.