Cette page a été traduite par l'API Cloud Translation.

Classement vega

Présentation
Exemple simple
Loading
Format des données
Options de configuration
Méthodes
Événements
Règles concernant les données

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'}],

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);
      }

<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.

Avec 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);

Avec les données intégrées 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);

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 : `chartArea:{left:20,top:0,width:'50%',height:'75%'}` 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 `ready`. `Extended description` Return Type (Type de retour) : aucun
`getAction(actionID)`	Renvoie l'objet d'action info-bulle avec le `actionID` demandé. Return Type : objet
`getBoundingBox(id)`	Renvoie un objet contenant les éléments "left", "top", "width" et "height" de l'élément de graphique `id`. Le format de `id` n'est pas encore documenté (il s'agit des valeurs de retour des gestionnaires d'événements). Voici quelques exemples: `var cli = chart.getChartLayoutInterface();` Hauteur de la zone de graphique `cli.getBoundingBox('chartarea').height` Largeur de la troisième barre dans la première série d'un graphique à barres ou à colonnes `cli.getBoundingBox('bar#0#2').width` Cadre de délimitation du cinquième coin du graphique à secteurs `cli.getBoundingBox('slice#4')` Cadre de délimitation des données d'un graphique vertical (par exemple, une colonne) : `cli.getBoundingBox('vAxis#0#gridline')` Cadre de délimitation des données d'un graphique horizontal (à barres, par exemple) : `cli.getBoundingBox('hAxis#0#gridline')` 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): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` 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é: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Appelez-le après le graphique. Return Type : objet
`getHAxisValue(xPosition, optional_axis_index)`	Renvoie la valeur de données horizontale à `xPosition`, qui est un décalage de pixels par rapport au bord gauche du conteneur de graphique. Peut être négatif. Exemple : `chart.getChartLayoutInterface().getHAxisValue(400)` 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é. `Extended description`. Type de renvoi:tableau des éléments de sélection
`getVAxisValue(yPosition, optional_axis_index)`	Renvoie la valeur de données verticales à `yPosition`, qui est un décalage de pixels par rapport au bord supérieur du conteneur de graphique. Peut être négatif. Exemple : `chart.getChartLayoutInterface().getVAxisValue(300)` 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 `dataValue` par rapport au bord gauche du conteneur du graphique. Exemple : `chart.getChartLayoutInterface().getXLocation(400)` 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 `dataValue` par rapport au bord supérieur du conteneur du graphique. Exemple : `chart.getChartLayoutInterface().getYLocation(300)` Appelez-le après le graphique. Return Type (Type de retour) : nombre
`removeAction(actionID)`	Supprime l'action d'info-bulle avec le `actionID` demandé du graphique. 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 `setAction` utilise un objet comme paramètre d'action. Cet objet doit spécifier trois propriétés : `id` (l'ID de l'action définie, `text`), le texte qui doit apparaître dans l'info-bulle, et `action`, la fonction à exécuter lorsqu'un utilisateur clique sur le texte de l'action. Toutes les actions de l'info-bulle doivent être définies avant d'appeler la méthode `draw()` du graphique. Description étendue : 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. `Extended description`. 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 `draw` et de les appeler uniquement après le déclenchement de l'événement. 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 `getSelection()`. 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.