Se usó la API de Cloud Translation para traducir esta página.

VegaChart

Overview
Un ejemplo sencillo
Cargando
Formato de los datos
Opciones de configuración
Métodos
Eventos
Política de Datos

Descripción general

Un VegaChart es una de las muchas visualizaciones posibles que se pueden crear con la gramática de visualización de Vega, que es un lenguaje declarativo para crear, guardar y compartir diseños de visualización interactivos. Con Vega, puedes describir la apariencia visual y el comportamiento interactivo de una visualización en un formato JSON y generar vistas basadas en la Web con Canvas o SVG.

Cuando dibujes un VegaChart, debes incluir dentro de las opciones una especificación sobre cómo crear el gráfico en la gramática de visualización de Vega. A continuación, se incluyen algunos ejemplos de esas especificaciones, y se pueden encontrar muchos más en la página Ejemplos de VegaChart.

Nota: Si bien VegaChart de Google Charts puede dibujar cualquier gráfico de Vega que puedas especificar con una especificación de JSON de Vega (incluido todo lo que se encuentra en la Galería de ejemplos), las funciones adicionales que requieren llamadas a la API de Vega aún no están disponibles.

Un ejemplo simple: el gráfico de barras

Aquí hay un ejemplo sencillo de un VegaChart que dibuja un gráfico de barras. (Consulta el ejemplo original, un instructivo detallado y el gráfico de barras del editor de gráficos de Vega).

Si bien esto representa otra forma de producir un gráfico de barras en Gráficos de Google, planeamos integrar todas las funciones de los demás gráficos de barras y columnas en una implementación nueva basada en este VegaChart.

En este ejemplo, ten en cuenta que la opción "datos" se reemplaza por la siguiente, que usa la "tabla de datos" proporcionada por la llamada de dibujo como la "fuente" de otro objeto de datos llamado "tabla", y "tabla" se usa en el resto de la especificación de 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>

Cargando

El nombre del paquete google.charts.load es "vegachart".

google.charts.load("current", {packages: ["vegachart"]});

El nombre de clase de la visualización es google.visualization.VegaChart.

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

Formato de datos

Los datos se pueden pasar a un VegaChart de una manera muy similar a otros gráficos de Google, a través de un DataTable (o DataView). La diferencia principal es que, en lugar de depender del orden de las columnas para determinar cómo se usan, VegaChart se basa en que el ID de cada columna sea el mismo que se espera para la visualización de Vega específica que especificaste. Por ejemplo, la siguiente tabla de datos se crea con columnas que tienen IDs para 'category' y 'amount', y se utilizan los mismos IDs dentro de la opción "vega" para hacer referencia a estas columnas.

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

Con datos intercalados en 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);

Sin embargo, solo se puede pasar una DataTable a VegaChart de esta manera, mientras que algunos gráficos de Vega requieren más de una tabla de datos. Abordaremos esta limitación en una versión futura de los Gráficos de Google.

Mientras tanto, puedes especificar los datos adicionales que necesites usar en la opción 'vega' 'data', ya sea intercalándolos o cargándolos desde una URL. Puedes encontrar ejemplos de ambos a continuación.

Opciones de configuración

Nombre
chartArea	Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (donde se dibuja el gráfico, sin incluir los ejes ni las leyendas). Se admiten dos formatos: un número o un número seguido de %. Un número simple es un valor en píxeles; un número seguido de % es un porcentaje. Ejemplo: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` Tipo: objeto Valor predeterminado: nulo
chartArea.bottom	Indica qué tan lejos dibujar el gráfico desde el borde inferior. Tipo: número o string Predeterminada: automática
chartArea.left	Indica qué tan lejos se debe dibujar el gráfico desde el borde izquierdo. Tipo: número o string Predeterminada: automática
chartArea.right	Indica qué tan lejos se debe dibujar el gráfico desde el borde derecho. Tipo: número o string Predeterminada: automática
chartArea.top	Indica qué tan lejos se debe dibujar el gráfico desde el borde superior. Tipo: número o string Predeterminada: automática
chartArea.width	Ancho del área del gráfico. Tipo: número o string Predeterminada: automática
chartArea.height	Altura del área del gráfico. Tipo: número o string Predeterminada: automática
height	Altura del gráfico en píxeles. Tipo: Número Predeterminado: la altura del elemento contenedor
width	Es el ancho del gráfico (en píxeles). Tipo: Número Predeterminado: Ancho del elemento contenedor

Métodos

Método
`draw(data, options)`	Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento `ready`. `Extended description`. Tipo de datos que se muestra: ninguno
`getAction(actionID)`	Muestra el objeto de acción de información sobre la herramienta con el `actionID` solicitado. Tipo de datos que se muestra: objeto
`getBoundingBox(id)`	Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento `id` del gráfico. El formato de `id` aún no está documentado (son los valores de retorno de los controladores de eventos), pero estos son algunos ejemplos: `var cli = chart.getChartLayoutInterface();` Altura del área del gráfico `cli.getBoundingBox('chartarea').height` Ancho de la tercera barra en la primera serie de un gráfico de barras o columnas `cli.getBoundingBox('bar#0#2').width` Cuadro de límite de la quinta cuña de un gráfico circular `cli.getBoundingBox('slice#4')` Cuadro de límite de los datos del gráfico de un gráfico vertical (por ejemplo, las columnas): `cli.getBoundingBox('vAxis#0#gridline')` Cuadro de límite de los datos del gráfico de un gráfico horizontal (p.ej., de barras): `cli.getBoundingBox('hAxis#0#gridline')` Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
`getChartAreaBoundingBox()`	Muestra un objeto que contiene la parte izquierda, superior, ancho y altura del contenido del gráfico (es decir, sin incluir las etiquetas ni la leyenda): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` Los valores están relacionados con el contenedor del gráfico. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
`getChartLayoutInterface()`	Muestra un objeto que contiene información sobre la ubicación del gráfico y sus elementos en la pantalla. Se puede llamar a los siguientes métodos en el objeto que se muestra: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: objeto
`getHAxisValue(xPosition, optional_axis_index)`	Muestra el valor de datos horizontales en `xPosition`, que es un desplazamiento de píxeles desde el borde izquierdo del contenedor de gráfico. Puede ser negativo. Ejemplo: `chart.getChartLayoutInterface().getHAxisValue(400)`. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
`getImageURI()`	Muestra el gráfico serializado como un URI de imagen. Llámalo después de que se dibuje el gráfico. Consulta Cómo imprimir gráficos en PNG. Tipo de datos que se muestra: string
`getSelection()`	Muestra un array de las entidades del gráfico seleccionadas. Para este gráfico, solo se puede seleccionar una entidad en un momento determinado. `Extended description` . Tipo de datos que se muestra: Es el array de elementos de selección.
`getVAxisValue(yPosition, optional_axis_index)`	Muestra el valor de datos verticales en `yPosition`, que es un desplazamiento de píxeles hacia abajo desde el borde superior del contenedor de gráfico. Puede ser negativo. Ejemplo: `chart.getChartLayoutInterface().getVAxisValue(300)`. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
`getXLocation(dataValue, optional_axis_index)`	Muestra la coordenada X del píxel de `dataValue` en relación con el borde izquierdo del contenedor del gráfico. Ejemplo: `chart.getChartLayoutInterface().getXLocation(400)`. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
`getYLocation(dataValue, optional_axis_index)`	Muestra la coordenada Y del píxel de `dataValue` en relación con el borde superior del contenedor del gráfico. Ejemplo: `chart.getChartLayoutInterface().getYLocation(300)`. Llámalo después de que se dibuje el gráfico. Tipo de datos que se muestra: número
`removeAction(actionID)`	Quita del gráfico la acción de información sobre la herramienta con el `actionID` solicitado. Tipo de datos que se muestra: `none`
`setAction(action)`	Establece una acción de información sobre la herramienta que se ejecutará cuando el usuario haga clic en el texto de acción. El método `setAction` toma un objeto como su parámetro de acción. Este objeto debe especificar 3 propiedades: `id` (el ID de la acción que se establece, `text`, el texto que debe aparecer en la información sobre la acción) y `action` (la función que se debe ejecutar cuando un usuario hace clic en el texto de acción). Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método `draw()` del gráfico. Descripción extendida. Tipo de datos que se muestra: `none`
`setSelection()`	Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior. Para este gráfico, solo se puede seleccionar una entidad a la vez. `Extended description` . Tipo de datos que se muestra: ninguno
`clearChart()`	Borra el gráfico y libera todos sus recursos asignados. Tipo de datos que se muestra: ninguno

Eventos

Para obtener más información sobre cómo usar estos eventos, consulta Interactividad básica, Cómo controlar eventos y Cómo activar eventos.

Nombre
`animationfinish`	Se activa cuando se completa la animación de transición. Propiedades: ninguna
`click`	Se activa cuando el usuario hace clic en el gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de leyenda, los ejes, las líneas de cuadrícula o las etiquetas. Propiedades: targetID
`error`	Se activa cuando se produce un error cuando se intenta renderizar el gráfico. Propiedades: ID, mensaje
`legendpagination`	Se activa cuando el usuario hace clic en las flechas de paginación de la leyenda. Devuelve el índice de páginas basado en cero de la leyenda actual y la cantidad total de páginas. Propiedades: currentPageIndex, totalPages
`onmouseover`	Se activa cuando el usuario desplaza el mouse sobre una entidad visual. Devuelve los índices de fila y columna del elemento de tabla de datos correspondiente. Propiedades:fila, columna
`onmouseout`	Se activa cuando el usuario aleja el mouse de una entidad visual. Devuelve los índices de filas y columnas del elemento de tabla de datos correspondiente. Propiedades:fila, columna
`ready`	El gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método `draw` e llamarlos solo después de que se haya activado el evento. Propiedades: ninguna
`select`	Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a `getSelection()`. Propiedades: ninguna

Política de Datos

Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.