Visão geral
Um VegaChart é uma das muitas visualizações possíveis que podem ser criadas com a Vega Layout Grammar, uma linguagem declarativa para criar, salvar e compartilhar designs de visualização interativa. Com a Vega, é possível descrever a aparência visual e o comportamento interativo de uma visualização no formato JSON e gerar visualizações baseadas na Web usando Canvas ou SVG.
Ao desenhar um VegaChart, é necessário incluir nas opções uma especificação sobre como criar o gráfico na gramática de visualização da Vega. Veja abaixo alguns exemplos dessas especificações. Você pode encontrar outros na página Exemplos do VegaChart.
Observação:embora o VegaChart do Google Graph possa desenhar qualquer gráfico Vega que você pode especificar com uma especificação JSON Vega (incluindo tudo na Galeria de exemplos), outros recursos que exigem chamadas para a API Vega ainda não estão disponíveis.
Um exemplo simples: o gráfico de barras
Veja um exemplo simples de um VegaChart que mostra um gráfico de barras. Consulte o exemplo original, um tutorial detalhado e o gráfico de barras no editor de gráficos Vega.
Embora isso represente outra forma de gerar um gráfico de barras nos Gráficos Google, planejamos integrar todos os recursos dos outros gráficos de barras e colunas em uma nova implementação com base nesse VegaChart.
Neste exemplo, a opção "data" foi substituída pela seguinte, que usa a "tabela de dados" fornecida pela chamada de desenho como a "origem" de outro objeto de dados chamado "table", e "table" é usada no restante da especificação Vega.
'data': [{'name': 'table', 'source': 'datatable'}],
<html> <head> <script src='https://www.gstatic.com/charts/loader.js'></script> <script> google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart); function drawChart() { const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addColumn({type: 'number', 'id': 'amount'}); dataTable.addRows([ ['A', 28], ['B', 55], ['C', 43], ['D', 91], ['E', 81], ['F', 53], ['G', 19], ['H', 87], ]); const options = { "vega": { "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 500, "height": 200, "padding": 5, 'data': [{'name': 'table', 'source': 'datatable'}], "signals": [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05, "round": true }, { "name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ], "axes": [ { "orient": "bottom", "scale": "xscale" }, { "orient": "left", "scale": "yscale" } ], "marks": [ { "type": "rect", "from": {"data":"table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category"}, "width": {"scale": "xscale", "band": 1}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } }, { "type": "text", "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#333"} }, "update": { "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, "text": {"signal": "tooltip.amount"}, "fillOpacity": [ {"test": "datum === tooltip", "value": 0}, {"value": 1} ] } } } ] } }; const chart = new google.visualization.VegaChart(document.getElementById('chart-div')); chart.draw(dataTable, options); } </script> </head> <body> <div id="chart-div" style="width: 700px; height: 250px;"></div> </body> </html>
Carregando
O nome do pacote google.charts.load
é "vegachart"
.
google.charts.load("current", {packages: ["vegachart"]});
O nome da classe do layout é google.visualization.VegaChart
.
var visualization = new google.visualization.VegaChart(container);
Formato de dados
Os dados podem ser transmitidos para um VegaChart de maneira muito semelhante a outros gráficos do Google, usando uma DataTable (ou DataView). A principal diferença é que, em vez de depender da ordem das colunas para determinar como elas são usadas, o VegaChart depende que o ID de cada coluna seja o mesmo esperado para a visualização específica da Vega que você especificou.
Por exemplo, a DataTable a seguir é criada com colunas que têm IDs para
'category'
e 'amount'
, e os mesmos IDs são usados na opção "vega" para se referir a
essas colunas.
const dataTable = new google.visualization.DataTable(); dataTable.addColumn({type: 'string', 'id': 'category'}); dataTable.addColumn({type: 'number', 'id': 'amount'}); dataTable.addRows([ ['A', 28], ['B', 55], ['C', 43], ]); const options = { 'vega': { ... // Here we create the Vega data object named 'datatable', // which will be passed in via the draw() call with a DataTable. 'data': {'name': 'datatable'}, 'scales': [ { 'name': 'yscale', // Here is an example of how to use the 'amount' field from 'datatable'. 'domain': {'data': 'datatable', 'field': 'amount'}, } ] } }; const chart = new google.visualization.VegaChart( document.getElementById('chart-div')); chart.draw(dataTable, options);
// A DataTable is required, but it may be empty. const dataTable = new google.visualization.DataTable(); const options = { 'vega': { // Here the data is specified inline in the Vega specification. "data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, ] } ], 'scales': [ { 'name': 'yscale', // Here is how Vega normally uses the 'amount' field from 'table'. "domain": {"data": "table", "field": "category"}, } ] } }; const chart = new google.visualization.VegaChart( document.getElementById('chart-div')); chart.draw(dataTable, options);
No entanto, apenas uma dessas tabelas pode ser transmitida ao VegaChart dessa maneira, enquanto alguns gráficos Vega exigem mais de uma tabela de dados. Vamos abordar essa limitação em uma versão futura dos Gráficos Google.
Enquanto isso, você pode especificar quaisquer dados adicionais que precise usar na opção
'vega'
'data'
, in-line
ou carregando-a a partir de um URL.
Veja abaixo exemplos dessas duas opções.
Opções de configuração
Nome | |
---|---|
Área do gráfico |
Um objeto com membros para configurar a posição e o tamanho da área do gráfico (em que 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. Um número seguido por % é uma porcentagem. Exemplo: Tipo: objeto
Padrão: nulo
|
gráficoArea.bottom |
Até onde desenhar o gráfico da borda inferior. Tipo:número ou string
Padrão: automático
|
gráficoArea.left |
Até onde desenhar o gráfico da borda esquerda. Tipo: número ou string
Padrão:automático
|
gráficoArea.right |
Até onde desenhar o gráfico na borda direita. Tipo: número ou string
Padrão: automático
|
gráficoArea.top |
Até onde desenhar o gráfico da borda superior. Tipo:número ou string
Padrão:automático
|
gráficoArea.largura |
Largura da área do gráfico. Tipo: número ou string
Padrão: automático
|
gráficoArea.height |
Altura da área do gráfico. Tipo:número ou string
Padrão:automático
|
altura |
Altura do gráfico, em pixels. Tipo:número
Padrão: altura do elemento em questão
|
largura |
Largura do gráfico, em pixels. Tipo: número
Padrão:largura do elemento contido
|
Métodos
Método | |
---|---|
draw(data, options) |
Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento Tipo de retorno:nenhum
|
getAction(actionID) |
Retorna o objeto de ação da dica com a Return Type: objeto
|
getBoundingBox(id) |
Retorna um objeto que contém os elementos esquerdo, superior, largura e altura do elemento do gráfico
Os valores são relativos ao contêiner do gráfico. Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getChartAreaBoundingBox() |
Retorna um objeto que contém o lado esquerdo, o topo, a largura e a altura do conteúdo do gráfico (ou seja, excluir rótulos e legendas):
Os valores são relativos ao contêiner do gráfico. Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getChartLayoutInterface() |
Retorna um objeto que contém informações sobre o posicionamento na tela do gráfico e os elementos dele. Os seguintes métodos podem ser chamados no objeto retornado:
Chame essa função após o gráfico ser desenhado. Return Type: objeto
|
getHAxisValue(xPosition, optional_axis_index) |
Retorna o valor de dados horizontal em Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno: número
|
getImageURI() |
Retorna o gráfico serializado como um URI de imagem. Chame essa função após o gráfico ser desenhado. Consulte Como imprimir gráficos PNG. Tipo de retorno: string
|
getSelection() |
Retorna uma matriz das entidades do gráfico selecionadas.
Nesse gráfico, apenas uma entidade pode ser selecionada por vez.
Tipo de retorno: matriz de elementos de seleção
|
getVAxisValue(yPosition, optional_axis_index) |
Retorna o valor de dados verticais em Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno:número
|
getXLocation(dataValue, optional_axis_index) |
Retorna a coordenada X de pixel de Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno:número
|
getYLocation(dataValue, optional_axis_index) |
Retorna a coordenada y de pixel de Exemplo: Chame essa função após o gráfico ser desenhado. Tipo de retorno: número
|
removeAction(actionID) |
Remove a ação de dica com a Tipo de retorno:
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
Toda e qualquer ação de dica precisa ser definida antes de chamar o método Tipo de retorno:
none |
setSelection() |
Seleciona as entidades do gráfico especificadas. Cancela qualquer seleção anterior.
Somente uma entidade pode ser selecionada por vez para este gráfico.
Tipo de retorno:nenhum
|
clearChart() |
Limpa o gráfico e libera todos os recursos alocados. Tipo de retorno:nenhum
|
Eventos
Para mais informações sobre como usar esses eventos, consulte Interatividade básica, Como lidar com eventos e Eventos de disparo.
Nome | |
---|---|
animationfinish |
Disparado quando a animação de transição é concluída. Propriedades:nenhuma
|
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 legendas, 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. Propriedades:ID e mensagem
|
legendpagination |
Disparado quando o usuário clica nas setas de paginação de legenda. Retorna o índice de páginas atual com base em zero e o número total de páginas. Propriedades: currentPageIndex, totalPages
|
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. Propriedades:linha, coluna
|
onmouseout |
Disparado quando o usuário passa o mouse sobre uma entidade visual. Retorna os índices de linha e coluna do elemento da tabela de dados correspondente. Propriedades: linha, coluna
|
ready |
O gráfico está pronto para chamadas de método externo. 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 Propriedades: nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
Propriedades: nenhuma
|
Política de dados
Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.