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.
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);
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: 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 Tipo de datos que se muestra: ninguno
|
getAction(actionID) |
Muestra el objeto de acción de información sobre la herramienta con el 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
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):
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:
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 Ejemplo: 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.
Tipo de datos que se muestra: arreglo de elementos de selección
|
getVAxisValue(yPosition, optional_axis_index) |
Muestra el valor de datos vertical en Ejemplo: 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 Ejemplo: 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 Ejemplo: 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 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
Todas las acciones de información sobre la herramienta se deben configurar antes de llamar al método 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.
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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué elementos se seleccionaron, llama a 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.