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'}],
<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.
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 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: 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 Tipo de datos que se muestra: ninguno
|
getAction(actionID) |
Muestra el objeto de acción de información sobre la herramienta con el Tipo de datos que se muestra: objeto
|
getBoundingBox(id) |
Muestra un objeto que contiene las partes izquierda, superior, ancho y altura del elemento
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):
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:
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 Ejemplo: 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.
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 Ejemplo: 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 Ejemplo: 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 Ejemplo: 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 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
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 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 Propiedades: ninguna
|
select |
Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a 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.