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

O VegaChart é uma das muitas visualizações possíveis que podem ser criadas usando a Grama de visualização Vega, que é uma linguagem declarativa para criar, salvar e compartilhar designs de visualização interativa. Com o Vega, é possível descrever a aparência visual e o comportamento interativo de uma visualização em 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 construir o gráfico na gramática da visualização Vega. Veja abaixo alguns exemplos dessas especificações, e vários outros podem ser encontrados na página Exemplos do VegaChart.

Observação:embora o VegaChart do Google Charts possa desenhar qualquer gráfico Vega que você possa especificar com uma especificação JSON do Vega (incluindo tudo o que está na Galeria de exemplo), outros recursos que exigem chamadas para a API Vega ainda não estão disponíveis.

Um exemplo simples: o gráfico de barras

Este é um exemplo simples de um VegaChart que desenha 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 mais uma maneira de produzir um gráfico de barras nos gráficos do 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" é substituída pela seguinte, que usa a "datatable" fornecida pela chamada de desenho como a "origem" para 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 da visualização é google.visualization.VegaChart.

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

Formato de dados

Os dados podem ser passados para um VegaChart de forma muito semelhante a outros gráficos do Google, usando uma tabela de dados (ou DataView). A principal diferença é que, em vez de confiar na ordem das colunas para determinar como elas são usadas, o VegaChart depende do ID de cada coluna ser o mesmo esperado para a visualização Vega específica que você especificou. Por exemplo, o DataTable a seguir é criado com colunas que têm IDs para 'category' e 'amount', e os mesmos IDs são usados na opção "vega" para fazer referência a essas colunas.

Com DataTable

        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 do 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 um desses DataTable pode ser transmitido para o VegaChart dessa maneira, enquanto alguns gráficos Vega exigem mais de uma tabela de dados. Essa limitação será abordada em uma versão futura do Gráficos Google.

Enquanto isso, você pode especificar outros dados que precisa usar na opção 'vega' 'data', seja in-line ou carregando-os de um URL. Confira abaixo exemplos de ambas.

Opções de configuração

Nome
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.bottom	A distância que o gráfico deve ser desenhado da borda inferior. Tipo:número ou string Padrão:automático
chartArea.left	A distância da borda esquerda a desenhar o gráfico. Tipo:número ou string Padrão:automático
chartArea.right	Indica a distância entre a borda direita e o gráfico a partir da borda direita. 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
height	Altura do gráfico, em pixels. Tipo: número Padrão:altura do elemento contêiner
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. 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. 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
`animationfinish`	Disparado quando a animação de transição é concluída. Properties: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 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
`legendpagination`	Disparado quando o usuário clica nas setas de paginação de legendas. Transmite o índice de página baseado em zero atual 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 afasta o mouse de uma entidade visual. Transmite 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é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.