Esta página foi traduzida pela API Cloud Translation.

Gráfico Vega

Visão geral
Um exemplo simples
Carregando
Formato de dados
Opções de configuração
Métodos
Eventos
Política de dados

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'}],

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);
      }

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

Com tabela de dados

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

Com dados inline da Vega

        // 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: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` 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 `ready` ser acionado. `Extended description` Tipo de retorno:nenhum
`getAction(actionID)`	Retorna o objeto de ação da dica com a `actionID` solicitada. Return Type: objeto
`getBoundingBox(id)`	Retorna um objeto que contém os elementos esquerdo, superior, largura e altura do elemento do gráfico `id`. O formato de `id` ainda não foi documentado (são os valores de retorno dos manipuladores de eventos), mas veja 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 de 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, uma barra): `cli.getBoundingBox('hAxis#0#gridline')` 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): `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 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: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` 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 `xPosition`, que é um deslocamento de pixel da borda esquerda do contêiner do gráfico. Pode ser negativa. Exemplo: `chart.getChartLayoutInterface().getHAxisValue(400)`. 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. `Extended description` Tipo de retorno: matriz de elementos de seleção
`getVAxisValue(yPosition, optional_axis_index)`	Retorna o valor de dados verticais em `yPosition`, que é um deslocamento de pixel da borda superior do contêiner do gráfico. Pode ser negativa. Exemplo: `chart.getChartLayoutInterface().getVAxisValue(300)`. 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 `dataValue` em relação à borda esquerda do contêiner do gráfico. Exemplo: `chart.getChartLayoutInterface().getXLocation(400)`. 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 `dataValue` em relação à borda superior do contêiner do gráfico. Exemplo: `chart.getChartLayoutInterface().getYLocation(300)`. 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 `actionID` solicitada do gráfico. 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 `setAction` usa um objeto como parâmetro de ação. Esse objeto precisa especificar três propriedades: `id`, o ID da ação sendo definida, `text`, o texto que vai aparecer na dica da ação, e `action`, a função que precisa ser executada quando um usuário clica no texto da ação. Toda e qualquer ação de dica precisa ser definida antes de chamar o método `draw()` do gráfico. Descrição estendida. 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. `Extended description` 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 `draw` e chame-o somente depois que o evento for acionado. Propriedades: nenhuma
`select`	Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame `getSelection()`. 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.