Présentation
VegaChart est l'une des nombreuses visualisations possibles pouvant être créées à l'aide de la grammaire de visualisation Vega, un langage déclaratif permettant de créer, d'enregistrer et de partager des conceptions de visualisation interactives. Avec Vega, vous pouvez décrire l'apparence visuelle et le comportement interactif d'une visualisation au format JSON, et générer des vues Web à l'aide de Canvas ou SVG.
Lorsque vous tracez un graphique VegaChart, vous devez inclure, dans les options, une spécification de création du graphique dans la grammaire de visualisation Vega. Vous trouverez ci-dessous quelques exemples de spécifications ainsi que d'autres exemples sur la page Exemples de Charts Vega.
Remarque : Google Charts VegaChart peut dessiner n'importe quel graphique Vega que vous pouvez spécifier à l'aide d'une spécification JSON Vega (y compris tout ce qui se trouve dans la Galerie d'exemples). Toutefois, d'autres fonctionnalités qui nécessitent des appels à l'API Vega ne sont pas encore disponibles.
Exemple simple : le graphique à barres
Voici un exemple simple de graphique VegaChart représentant un graphique à barres. (Consultez l'exemple d'origine, un tutoriel détaillé et le graphique à barres dans l'éditeur de graphiques Vega).
Bien qu'il s'agisse d'un autre moyen de produire un graphique à barres dans Google Charts, nous prévoyons d'intégrer toutes les fonctionnalités des autres graphiques à barres et à colonnes dans une nouvelle mise en œuvre basée sur VegaChart.
Dans cet exemple, notez que l'option "data" est remplacée par la suivante, qui utilise la "table de données" fournie par l'appel de dessin comme "source" pour un autre objet de données appelé "table", et "table" dans le reste de la spécification 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>
Chargement...
Le nom du package google.charts.load
est "vegachart"
.
google.charts.load("current", {packages: ["vegachart"]});
Le nom de classe de la visualisation est google.visualization.VegaChart
.
var visualization = new google.visualization.VegaChart(container);
Format des données
Les données peuvent être transmises à un graphique VegaChart de la même manière que pour d'autres graphiques Google, à l'aide d'un DataTable (ou DataView). La principale différence réside dans le fait que, plutôt que de dépendre de l'ordre des colonnes pour déterminer leur utilisation, VegaChart repose sur l'ID de chaque colonne qui est le même que celui attendu pour la visualisation Vega que vous avez spécifiée.
Par exemple, le tableau de données suivant est créé avec des colonnes ayant des identifiants pour 'category'
et 'amount'
, et les mêmes identifiants sont utilisés dans l'option "vega" pour référencer ces colonnes.
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);
Cependant, une seule de ces tables peut être transmise à VegaChart de cette manière, alors que certains graphiques Vega nécessitent plusieurs tables. Nous allons résoudre cette limite dans une prochaine version de Google Charts.
En attendant, vous pouvez spécifier des données supplémentaires à utiliser dans l'option 'data'
'vega'
, en les intégrant ou en les chargeant à partir d'une URL.
Vous trouverez ci-dessous des exemples des deux.
Options de configuration
Nom | |
---|---|
zone du graphique |
Objet avec des membres permettant de configurer l'emplacement et la taille de la zone du graphique (à l'endroit où le graphique est dessiné, à l'exclusion de l'axe et des légendes) Deux formats sont acceptés: un nombre, ou un nombre suivi du pourcentage. Un nombre simple est une valeur en pixels ; un nombre suivi de % est un pourcentage. Exemple : Type:objet
Par défaut:null
|
chartArea.bottom |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure inférieure. Type:nombre ou chaîne
Par défaut:auto
|
chartArea.gauche |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure de gauche Type:nombre ou chaîne
Par défaut : auto
|
chartArea.droite |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure de droite Type:nombre ou chaîne
Par défaut : auto
|
chartArea.top |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure supérieure. Type : nombre ou chaîne
Par défaut : auto
|
chartArea.width |
Largeur de la zone du graphique. Type:nombre ou chaîne
Par défaut:auto
|
chartArea.height |
Hauteur de la zone de graphique Type : nombre ou chaîne
Par défaut:auto
|
hauteur |
Hauteur du graphique, en pixels. Type : nombre
Par défaut : hauteur de l'élément conteneur.
|
largeur |
Largeur du graphique, en pixels. Type : nombre
Par défaut : largeur de l'élément conteneur
|
Méthodes
Méthode | |
---|---|
draw(data, options) |
Dessine le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type de retour) : aucun
|
getAction(actionID) |
Renvoie l'objet d'action info-bulle avec le Return Type : objet
|
getBoundingBox(id) |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type : objet
|
getChartAreaBoundingBox() |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" dans le contenu du graphique (c'est-à-dire, à l'exclusion des libellés et de la légende):
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type:objet
|
getChartLayoutInterface() |
Renvoie un objet contenant des informations sur l'emplacement à l'écran du graphique et de ses éléments. Les méthodes suivantes peuvent être appelées sur l'objet renvoyé:
Appelez-le après le graphique. Return Type : objet
|
getHAxisValue(xPosition, optional_axis_index) |
Renvoie la valeur de données horizontale à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getImageURI() |
Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après le graphique. Consultez Imprimer des graphiques PNG. Type de retour:chaîne
|
getSelection() |
Affiche un tableau des entités de graphique sélectionnées.
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi:tableau des éléments de sélection
|
getVAxisValue(yPosition, optional_axis_index) |
Renvoie la valeur de données verticales à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getXLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée X du pixel de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getYLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée Y en pixels de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
removeAction(actionID) |
Supprime l'action d'info-bulle avec le Type de retour :
none |
setAction(action) |
Définit une action d'info-bulle à exécuter lorsque l'utilisateur clique sur le texte de l'action.
La méthode
Toutes les actions de l'info-bulle doivent être définies avant d'appeler la méthode Type de retour :
none |
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Pour ce graphique, une seule entité peut être sélectionnée à la fois.
Return Type (Type de retour) : aucun
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gestion des événements et Déclenchement d'événements.
Nom | |
---|---|
animationfinish |
Déclenché lorsque l'animation de transition est terminée. Properties (Propriétés) : aucune
|
click |
Déclenché lorsque l'utilisateur clique dans le graphique Permet d'identifier le clic sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Properties (Propriétés) : targetID
|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
legendpagination |
Déclenché lorsque l'utilisateur clique sur les flèches de pagination de la légende Transmet l'index de page basé sur la légende actuelle et le nombre total de pages. Properties (Propriétés) : currentPageIndex, totalPages
|
onmouseover |
Déclenché lorsque l'utilisateur passe la souris sur une entité visuelle. Transmet les index de ligne et de colonne de l'élément du tableau de données correspondant. Properties (Propriétés) : ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur d'une entité visuelle Transmet les index de ligne et de colonne de l'élément de table de données correspondant. Properties (Propriétés) : ligne, colonne
|
ready |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles relatives aux données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.