VegaChart

Descripción general

Un VegaChart es una de las tantas 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 el aspecto visual y el comportamiento interactivo de una visualización en formato JSON, y generar vistas basadas en la Web mediante Canvas o SVG.

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

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

Ejemplo simple, gráfico de barras

Este es un ejemplo simple 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 los 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 lo siguiente, que usa la “tabla de datos” proporcionada por la llamada de dibujo como la “fuente” para otro objeto de datos llamado “tabla”, y “tabla” se usa en el resto de la especificación de 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>


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 los datos

Los datos se pueden pasar a un VegaChart de una manera muy similar a la de otros Google Charts, mediante el uso de un DataTable (o DataView). La principal diferencia 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 el esperado para la visualización particular de Vega que especificaste. Por ejemplo, la siguiente tabla de datos se crea con columnas que tienen ID para 'category' y 'amount', y los mismos ID se usan 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 de 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 de estas tablas a VegaChart de esta manera, mientras que algunos 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 cualquier dato adicional que necesites usar en la opción 'vega' 'data', ya sea intercalado o cargándolo desde una URL. Puedes encontrar ejemplos de ambos a continuación.

Opciones de configuración

Nombre
Área_gráficos

Un objeto con miembros para configurar la posición y el tamaño del área del gráfico (sin incluir el eje y las leyendas), donde se dibuja el gráfico. 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%'}

Type:
Valor predeterminado: null
chartArea.bottom

Hasta dónde dibujar el gráfico desde el borde inferior.

Tipo: número o string
Predeterminado: automático
chartArea.left

Hasta dónde dibujar el gráfico desde el borde izquierdo.

Tipo: número o string
Predeterminado: automático
áreadelgráfico

Hasta dónde dibujar el gráfico desde el borde derecho

Tipo: número o string
Predeterminado: automático
área_gráfico

Hasta dónde dibujar el gráfico desde el borde superior

Tipo: número o string
Predeterminado: automático
ancho_gráfico

Ancho del área del gráfico.

Tipo: número o string
Predeterminado: automático
gráficoAreArea.height

Altura del área del gráfico.

Tipo: número o string
Predeterminado: automático
alto

Altura del gráfico, en píxeles.

Tipo: número
Predeterminado: altura del elemento que lo contiene
ancho

Ancho del gráfico en píxeles.

Tipo: número
Predeterminado: ancho del elemento que lo contiene

Métodos

Método
draw(data, options)

Dibuja el gráfico. El gráfico acepta más llamadas a métodos 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.

Return Type: Objeto
getBoundingBox(id)

Muestra un objeto que contiene la izquierda, la parte superior, el ancho y la altura del elemento de gráfico id. El formato para 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 de gráfico de un gráfico vertical (p.ej., columna)
cli.getBoundingBox('vAxis#0#gridline')
Cuadro de límite de los datos de gráfico de un gráfico horizontal (p.ej., barra)
cli.getBoundingBox('hAxis#0#gridline')

Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico.

Return Type: Objeto
getChartAreaBoundingBox()

Muestra un objeto que contiene el contenido a la izquierda, en la parte superior, el ancho y la altura del contenido del gráfico (es decir, sin incluir las etiquetas y la leyenda):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Los valores son relativos al contenedor del gráfico. Llámelo después de que se dibuje el gráfico.

Return Type: Objeto
getChartLayoutInterface()

Muestra un objeto que contiene información sobre la posición en la pantalla del gráfico y sus elementos.

Se puede llamar a los siguientes métodos en el objeto mostrado:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Llámelo después de que se dibuje el gráfico.

Return Type: Objeto
getHAxisValue(xPosition, optional_axis_index)

Muestra el valor de los datos horizontales en xPosition, que es un desplazamiento de píxeles del borde izquierdo del contenedor del gráfico. Puede ser negativo.

Ejemplo: chart.getChartLayoutInterface().getHAxisValue(400).

Llámelo después de que se dibuje el gráfico.

Tipo de devolución: número
getImageURI()

Muestra el gráfico serializado como un URI de imagen.

Llámelo después de que se dibuje el gráfico.

Consulta Cómo imprimir gráficos PNG.

Tipo de datos que se muestra: string
getSelection()

Muestra un arreglo de las entidades del gráfico seleccionadas. Para este gráfico, solo se puede seleccionar una entidad por momento. Extended description.

Tipo de datos que se muestra: arreglo de elementos de selección
getVAxisValue(yPosition, optional_axis_index)

Muestra el valor de datos vertical en yPosition, que es un desplazamiento de píxeles hacia abajo desde el borde superior del contenedor del gráfico. Puede ser negativo.

Ejemplo: chart.getChartLayoutInterface().getVAxisValue(300).

Llámelo después de que se dibuje el gráfico.

Tipo de devolución: 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ámelo después de que se dibuje el gráfico.

Tipo de devolución: 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ámelo después de que se dibuje el gráfico.

Tipo de devolución: número
removeAction(actionID)

Quita del gráfico la acción de información sobre la herramienta con la actionID solicitada.

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 la 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 herramienta de la acción) y action (la función que se debe ejecutar cuando un usuario hace clic en el texto de la 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 los recursos asignados.

Tipo de datos que se muestra: ninguno

Eventos

Si quieres obtener más información para usar estos eventos, consulta Interactividad básica, Control de eventos y Eventos de activación.

Nombre
animationfinish

Se activa cuando se completa la animación de transición.

Propiedades: ninguna
click

Se activa cuando el usuario hace clic dentro del gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de la 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 procesar 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ágina actual basado en cero de la leyenda 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 de columna del elemento de tabla de datos correspondiente.

Properties: Row, Column
onmouseout

Se activa cuando el usuario se aleja del mouse de una entidad visual. Vuelve a pasar los índices de fila y columna del elemento de tabla de datos correspondiente.

Properties: Row, Column
ready

El gráfico está listo para las llamadas a métodos externos. 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 y llamarlo solo después de que se active el evento.

Propiedades: ninguna
select

Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a getSelection().

Propiedades: ninguna

Política de Datos

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