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.
Visão geral
O gráfico de imagem genérica é um wrapper genérico para todos os gráficos produzidos pela API de gráficos do Google. Leia a documentação da API de gráficos antes de tentar usar essa visualização. É possível enviar até 16 mil dados usando essa visualização, ao contrário do limite de 2 mil em chamadas diretas para a API de gráficos.
Todos os dados são transmitidos para os gráficos usando DataTable ou DataView. Além disso, alguns rótulos são transmitidos como colunas na tabela de dados.
Todos os outros parâmetros de URL da API de gráficos (exceto chd) são transmitidos como opções.
Autor: Google
Exemplos
Aqui estão exemplos de vários tipos diferentes de gráficos.
Gráfico de linhas
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Gráfico de barras verticais
Nos gráficos de barras encapsuladas, não é necessário especificar chxt='x' como você faria ao chamar o gráfico. Se você não especificar um eixo, o gráfico de imagem genérica tentará configurar o gráfico corretamente por padrão.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Gráfico 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:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Gráfico de radar
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Gráfico de mapa
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Carregando
O nome do pacote google.charts.load é "imagechart".
google.charts.load('current', {'packages': ['imagechart']});
O nome da classe da visualização é google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Formato de dados
Há dois formatos de dados generalizados: um para gráficos de mapas e outro para todos os outros gráficos. O único formato numérico compatível com dados é o tipo de número em JavaScript.
Observação: não codifique para URL nenhum valor de string transmitido como dados ou opções.
Gráficos de mapa
Um gráfico de mapa usa uma tabela de dados com duas colunas obrigatórias:
- Primeira coluna: [string] código do país ou estado/província.
- Segunda coluna: [number] o valor desse país ou estado.
Consulte a documentação do gráfico de mapa para mais informações.
Gráficos que não são mapas
Os gráficos que não são de mapa usam uma tabela de dados com duas colunas opcionais (uma no início e uma no final) e uma ou mais colunas de dados no meio:
- Primeira coluna: [optional, string] cada entrada representa um rótulo usado no eixo X (equivalente ao parâmetro
chlouchxl) para gráficos compatíveis. - Próximas colunas: qualquer número de colunas numéricas, cada uma representando uma série de dados.
- Últimas colunas - [optional, string] qualquer número de colunas de string depois das colunas de dados, em que cada entrada representa um rótulo de ponto de dados para gráficos compatíveis. Se você quiser usar essa coluna,
especifique a opção
annotationColumns.
Os dados serão exibidos de maneiras diferentes, dependendo do tipo de gráfico. Consulte a documentação do gráfico.
Uma observação sobre os índices de coluna: a visualização de gráfico de imagem genérica remove as colunas de string da tabela de dados antes de enviá-la para o serviço da API de gráficos do Google. Portanto, os índices de coluna nas opções, métodos e eventos definidos nesta página incluem as colunas de string na contagem de índices. No entanto, os índices de coluna em qualquer opção manipulada pelo serviço da API Chart (por exemplo, a opção chm) ignoram as colunas de string na contagem de índices.
Opções de configuração
As opções a seguir foram definidas para essa visualização. Defina-as no objeto de opções transmitido para o método draw() da visualização.
Nem todas as opções a seguir são compatíveis com todos os tipos de gráfico. Consulte a documentação do seu tipo de gráfico de imagem estática. Você pode transmitir qualquer parâmetro de URL da API de gráficos como opção. Por exemplo, o parâmetro de URL chg=50,50 de uma visualização de gráfico é especificado desta maneira: options['chg'] = '50,50'.
Observação sobre cores: as opções de cor, como colors, color e backgroundColor, são especificadas no formato de cores da API Chart.
Esse formato é semelhante ao #RRGGBB, exceto pelo fato de incluir um quarto número hexadecimal opcional para indicar a transparência. Cores legíveis por humanos, como "vermelho", "verde", "azul" etc. não são compatíveis. O formato de cores da API de gráficos do Google não inclui o símbolo # inicial, mas as opções genéricas de visualização do gráfico de imagem aceitam códigos de cores com ou sem #.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| annotationColumns | Array<object> | nenhum | Rótulos de pontos de dados para vários tipos de gráficos. Trata-se de uma matriz de objetos, cada um atribuindo um rótulo formatado a um ponto de dados no gráfico. Essa opção está disponível apenas para gráficos que oferecem suporte a pontos de dados (consulte o tópico vinculado para saber quais), e a tabela de dados precisa ter pelo menos uma das colunas de rótulo da string. Cada objeto da matriz tem as seguintes propriedades:
Exemplo : este snippet define um rótulo de texto preto de 12 pixels, com texto retirado da coluna 0 e atribuído ao ponto de dados na coluna 2 da mesma linha: |
| 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. |
| fill | boolean | false | Se verdadeiro, preenche a área abaixo de cada linha. Disponível apenas para gráficos de linhas. |
| firstHiddenColumn | number | nenhum | Um índice de coluna de dados. A coluna listada, assim como todas as colunas seguintes, não serão usadas para desenhar os principais elementos de série do gráfico (como linhas em um gráfico de linhas ou barras em um gráfico de barras), mas serão usadas como dados para marcadores e outras anotações. As colunas de string estão incluídas nessa contagem de índice. |
| height | number | 200 | Altura do gráfico, em pixels. Se ausente ou não estiver em um intervalo aceitável, a altura do elemento contêiner será usada. Se esse valor também estiver fora do intervalo aceitável, a altura padrão será usada. |
| rótulos | string | "none" | [Somente gráfico de pizza] Qual rótulo exibir para cada fatia, se houver. Escolha entre os seguintes valores:
|
| lenda | string | "direita" | Onde exibir uma legenda de gráfico em relação ao gráfico. Especifique uma das seguintes opções: "top", "bottom", "left", "right" ou "none". Ignorado em gráficos que não incluem legendas (como gráficos de mapa). |
| max | number | Valor máximo dos dados | O valor máximo mostrado na escala. Ignorado para gráficos de pizza. O padrão é o valor máximo de dados, exceto para gráficos de barras, em que o padrão é o valor máximo de dados. Isso é ignorado em gráficos de barras quando a tabela tem mais de uma coluna de dados. |
| min | number | Valor mínimo de dados | O valor mínimo mostrado na balança. Ignorado para gráficos de pizza. O padrão é o valor mínimo de dados, exceto para gráficos de barras, em que o padrão é zero. Isso é ignorado em gráficos de barras quando a tabela tem mais de uma coluna de dados. |
| showCategoryLabels | boolean | verdadeiro | Indica se os rótulos devem aparecer no eixo de categoria (por exemplo, linha). Disponível apenas para gráficos de linhas e de barras. |
| showValueLabels | boolean | verdadeiro | "True" mostra um rótulo no eixo de valor. Disponível apenas para gráficos de linhas e barras. |
| singleColumnDisplay | number | nenhum | Renderiza apenas a coluna de dados especificada. Esse número é um índice da tabela com base em zero e 0 é a primeira coluna de dados. A cor atribuída à única coluna é a mesma que quando todas as colunas são renderizadas. Não pode ser usada com gráficos de pizza ou mapa. |
| título | string | String em branco | O título do gráfico. Se não for especificado, nenhum título será exibido. O parâmetro de gráfico equivalente é chtt. |
| valueLabelsInterval | number | Automático | O intervalo em que os rótulos dos eixos de valor são mostrados. Por exemplo, se min for 0, max for 100 e valueLabelsInterval for 20, o gráfico mostrará rótulos de eixo em (0, 20, 40, 60, 80 100). |
| width | number | 400 | Largura do gráfico, em pixels. Se ausente ou não estiver em um intervalo aceitável, a largura do elemento contêiner será usada. Se esse valor também estiver fora do intervalo aceitável, a largura padrão será usada. |
Métodos
| Método | Tipo de retorno | Descrição |
|---|---|---|
draw(data, options) |
Nenhum | Desenha o mapa. |
getImageUrl() |
String | Retorna o URL da API de gráficos do Google usado para solicitar o gráfico. Ele pode ter mais de 2.000 caracteres. Consulte a API de gráficos do Google para mais detalhes. |
Eventos
Se você definir a propriedade enableEvents como verdadeira, os gráficos de suporte vão gerar eventos para eventos do usuário listados na tabela abaixo. Todos esses eventos retornam um objeto event com as seguintes propriedades:
type: string que representa o tipo de evento.region: um ID da região afetada. Adicione o parâmetrochof=jsonao tipo de gráfico bruto para ver uma lista de nomes disponíveis. Consultechof=jsonpara mais detalhes.
| Nome | Descrição | tipo Value |
|---|---|---|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. | ID, mensagem |
onmouseover |
Disparado quando o usuário passa o mouse sobre um elemento do gráfico. | "mouseover" |
onmouseout |
Disparado quando o usuário afasta o mouse de um elemento do gráfico. | "mouseout" |
onclick |
Disparado quando um usuário clica em um elemento do gráfico. | “clicar” |
Quais gráficos são compatíveis com eventos?
Todos os gráficos compatíveis com o parâmetro chof=json
são compatíveis com a geração de eventos, ou seja, todos os gráficos, exceto gráficos especiais, como
códigos QR.
Exemplo de manipulação de eventos
Veja um exemplo que mostra uma barra que registra cliques do mouse.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Política de dados
Os dados são enviados ao serviço da API Google Chart.
Localização
Essa visualização é compatível com qualquer localização compatível com o serviço de gráficos do Google.