Présentation
Un VegaChart est l'une des nombreuses visualisations possibles qui peuvent ê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 dessinez un graphique VegaChart, vous devez inclure dans les options une spécification expliquant comment créer le graphique dans la grammaire de visualisation Vega. Vous trouverez ci-dessous quelques exemples de ces spécifications, et d'autres sont disponibles sur la page Exemples de VegaChart.
Remarque:Bien que Google Charts VegaChart puisse dessiner n'importe quel graphique Vega que vous pouvez spécifier avec une spécification JSON Vega (y compris tout ce qui se trouve dans la galerie d'exemples), les fonctionnalités supplémentaires nécessitant des appels à l' API Vega ne sont pas encore disponibles.
Exemple simple : le graphique à barres
Voici un exemple simple de VegaChart qui dessine un graphique à barres. (Consultez l'exemple d'origine, un tutoriel détaillé et le graphique à barres dans l'éditeur de graphique Vega).
Bien qu'il s'agisse d'un autre moyen de créer 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 implémentation basée sur ce VegaChart.
Dans cet exemple, l'option "data" est remplacée par la suivante, qui utilise la "datatable" fournie par l'appel de dessin comme "source" pour un autre objet de données appelé "table", et "table" est utilisé 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 les autres graphiques Google, à l'aide d'une table DataTable (ou DataView). La principale différence est que, plutôt que de s'appuyer sur l'ordre des colonnes pour déterminer leur utilisation, VegaChart s'appuie sur le fait que l'ID de chaque colonne est le même que celui attendu pour la visualisation Vega que vous avez spécifiée.
Par exemple, le DataTable suivant est créé avec des colonnes ayant des ID pour 'category' et 'amount', et les mêmes ID 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, un seul DataTable de ce type peut être transmis à VegaChart de cette manière, alors que certains graphiques Vega nécessitent plusieurs tables de données. Cette limitation sera levée dans une prochaine version de Google Charts.
En attendant, vous pouvez spécifier les données supplémentaires que vous devez utiliser dans l'option 'vega' 'data', soit en les intégrant, soit en les chargeant à partir d'une URL.
Vous trouverez des exemples dans les deux cas ci-dessous.
Options de configuration
| Nom | |
|---|---|
| chartArea |
Objet avec des membres permettant de configurer l'emplacement et la taille de la zone de graphique (où le graphique est dessiné, à l'exception des axes et des légendes). Deux formats sont acceptés: un nombre ou un nombre suivi de %. Un nombre simple est une valeur en pixels. Un nombre suivi de % est un pourcentage. Exemple : Type:objet
Par défaut:null
|
| chartArea.bottom |
Distance à partir de la bordure inférieure du graphique Type:nombre ou chaîne
Par défaut:auto
|
| chartArea.left |
Distance à partir de la bordure gauche du graphique Type:nombre ou chaîne
Par défaut:auto
|
| chartArea.right |
Distance à partir de la bordure droite du graphique Type:nombre ou chaîne
Par défaut:auto
|
| chartArea.top |
Distance à partir de la bordure supérieure du graphique 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
|
| taille |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément parent
|
| largeur |
Largeur du graphique, en pixels. Type:nombre
Par défaut:largeur de l'élément parent
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Permet de dessiner 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 renvoyé) : aucun
|
getAction(actionID) |
Renvoie l'objet d'action d'info-bulle avec l'élément Type renvoyé:objet
|
getBoundingBox(id) |
Renvoie un objet contenant les valeurs gauche, supérieure, largeur et hauteur de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé:objet
|
getChartAreaBoundingBox() |
Renvoie un objet contenant les valeurs de gauche, de haut, de largeur et de hauteur du contenu du graphique (à l'exclusion des libellés et des légendes):
Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé: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 que le graphique est dessiné. Type renvoyé:objet
|
getHAxisValue(xPosition, optional_axis_index) |
Renvoie la valeur de données horizontales à Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
getImageURI() |
Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après que le graphique est dessiné. Consultez la page Imprimer des graphiques PNG. Type renvoyé:chaîne
|
getSelection() |
Renvoie un tableau des entités de graphique sélectionnées.
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Type renvoyé:tableau d'éléments de sélection
|
getVAxisValue(yPosition, optional_axis_index) |
Renvoie la valeur de données verticales à Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
getXLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée X en pixels de Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
getYLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée Y en pixels de Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
removeAction(actionID) |
Supprime l'action d'info-bulle avec l'élément Type renvoyé:
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 d'info-bulle doivent être définies avant d'appeler la méthode Type renvoyé:
none |
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Return Type (Type renvoyé) : aucun
|
clearChart() |
Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun
|
Événements
Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gérer les événements et Déclencher des événements.
| Nom | |
|---|---|
animationfinish |
Déclenché lorsque l'animation de transition est terminée. Propriétés:aucune
|
click |
Déclenché lorsque l'utilisateur clique dans le graphique. Permet de déterminer quand un utilisateur clique sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Propriétés:targetID
|
error |
Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. Propriétés:id, message
|
legendpagination |
Déclenché lorsque l'utilisateur clique sur les flèches de pagination de la légende. Renvoie l'index de page basé sur zéro actuel de la légende et le nombre total de pages. Properties (Propriétés) : currentPageIndex, totalPages
|
onmouseover |
Déclenché lorsque l'utilisateur pointe sur une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Propriétés:ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur de la souris d'une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Propriétés:ligne, colonne
|
ready |
Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Propriétés:aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Propriétés:aucune
|
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.