Visualisation: graphique à nuage de points

Présentation

Les graphiques à nuage de points représentent des points sur un graphique. Lorsque l'utilisateur pointe sur les points, des info-bulles contenant plus d'informations s'affichent.

Les graphiques à nuage de points Google sont affichés dans le navigateur à l'aide du format SVG ou VML, selon les fonctionnalités du navigateur.

Exemple

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Modifier et animer des formes

Par défaut, les graphiques à nuage de points représentent les éléments de votre ensemble de données par des cercles. Vous pouvez spécifier d'autres formes avec l'option pointShape, décrite dans la documentation Personnaliser les points.

Comme pour la plupart des graphiques Google, vous pouvez les animer à l'aide d'événements. Vous pouvez ajouter un écouteur d'événements pour le premier événement ready et redessiner le graphique après avoir apporté les modifications souhaitées. Après le premier événement ready, vous pouvez écouter l'événement animationfinish pour répéter le processus, ce qui génère une animation continue. L'option animation contrôle le mode de redessin: immédiatement (aucune animation) ou de manière fluide, et si elle est fluide, à quelle vitesse et avec quel comportement.

Fonctionnalités intéressantes
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
Full HTML
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

Créer des graphiques à nuage de points Material

En 2014, Google a annoncé des consignes destinées à assurer une apparence commune à toutes ses propriétés et applications (comme les applications Android) exécutées sur les plates-formes Google. Nous appelons cette initiative Material Design. Nous fournissons des versions "Material" de tous nos principaux graphiques ; n'hésitez pas à les utiliser si leur apparence vous convient.

La création d'un graphique à nuage de points Material est semblable à la création d'un graphique à nuage de points "classique". Vous devez charger l'API Google Visualization (bien qu'avec le package 'scatter' au lieu du package 'corechart'), définir votre table de données, puis créer un objet (mais avec la classe google.charts.Scatter au lieu de google.visualization.ScatterChart).

Remarque:Les graphiques Material ne fonctionnent pas dans les anciennes versions d'Internet Explorer. (IE8 et les versions antérieures ne sont pas compatibles avec le format SVG, ce qui est nécessaire avec Material Charts.)

Les graphiques à nuage de points Material offrent de nombreuses améliorations mineures par rapport aux graphiques à nuage de points classiques, y compris une opacité variable pour la lisibilité des points qui se chevauchent, une palette de couleurs améliorée, une mise en forme des libellés plus nette, un espacement par défaut plus serré, des lignes et des titres plus doux (et l'ajout de sous-titres). 

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Les graphiques Material Charts sont en version bêta. L'apparence et l'interactivité sont en grande partie définitives, mais de nombreuses options disponibles dans les graphiques classiques ne sont pas encore disponibles. Vous trouverez une liste des options qui ne sont pas encore prises en charge dans ce problème.

De plus, la façon dont les options sont déclarées n'est pas finalisée. Par conséquent, si vous utilisez l'une des options classiques, vous devez la convertir en options Material en remplaçant la ligne suivante :

chart.draw(data, options);

...par ce qui suit :

chart.draw(data, google.charts.Scatter.convertOptions(options));

Graphiques double y

Parfois, vous pouvez afficher deux séries dans un graphique à nuage de points, avec deux axes Y indépendants: un axe de gauche pour une série et un axe de droite pour une autre:

Notez que non seulement nos deux axes Y sont étiquetés différemment ("Note à l'examen final" et "Heures d'étude"), mais qu'ils ont chacun leur propre échelle et quadrillage indépendants. Si vous souhaitez personnaliser ce comportement, utilisez les options vAxis.gridlines.

Dans le code ci-dessous, les options axes et series spécifient ensemble l'apparence double Y du graphique. L'option series spécifie l'axe à utiliser pour chacun ('final grade' et 'hours studied' ; ils n'ont pas besoin d'avoir une relation avec les noms des colonnes dans le tableau de données). L'option axes transforme ensuite ce graphique en deux Y, en plaçant l'axe 'Final Exam Grade' à gauche et l'axe 'Hours Studied' à droite. 

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

Classements des X premiers

Remarque:Les axes X supérieurs ne sont disponibles que pour les graphiques Material (c'est-à-dire ceux avec le package scatter).

Si vous souhaitez placer les libellés et le titre de l'axe X en haut de votre graphique plutôt qu'en bas, vous pouvez le faire dans les graphiques Material avec l'option axes.x: 

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Chargement...

Le nom du package google.charts.load est "corechart" et le nom de la classe de la visualisation est google.visualization.ScatterChart. 

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.ScatterChart(container);

Pour les graphiques à nuage de points Material, le nom du package google.charts.load est "scatter" et le nom de la classe de la visualisation est google.charts.Scatter. 

  google.charts.load("current", {packages: ["scatter"]});

  var visualization = new google.charts.Scatter(container);

Format des données

Lignes:chaque ligne du tableau représente un ensemble de points de données ayant la même valeur d'axe des abscisses.

Columns:

  Colonne 0 Colonne 1 ... Colonne N
Objectif : Valeurs X du point de données Valeurs Y de la série 1 ... Valeurs Y de la série N
Type de données : chaîne, nombre ou date/date/heure/heure du jour chaîne, nombre ou date/date/heure/heure du jour ... chaîne, nombre ou date/date/heure/heure du jour
Rôle : Données Données ... Données
Rôles de colonne facultatifs:

Aucun contrôle

 ...

Pour spécifier plusieurs séries, spécifiez au moins deux colonnes de l'axe Y et spécifiez les valeurs Y dans une seule colonne Y:

Valeurs X Valeurs Y de la série 1 Valeurs Y de la série 2
10 nul 75
20 nul 18
33 nul 22
55 16 nul
14 61 nul
48 3 nul

 

Options de configuration

Nom
aggregationTarget
Comment les données sélectionnées sont regroupées dans des info-bulles:
  • 'category': regroupe les données sélectionnées par valeur x.
  • 'series': regroupe les données sélectionnées par série.
  • 'auto': permet de regrouper les données sélectionnées par valeur x si toutes les sélections ont la même valeur x, et par série dans le cas contraire.
  • 'none': affiche une seule info-bulle par sélection.
aggregationTarget sera souvent utilisé en tandem avec selectionMode et tooltip.trigger, par exemple : 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
Type:chaîne
Par défaut : "auto"
animation.duration

Durée de l'animation, en millisecondes. Pour en savoir plus, consultez la documentation sur les animations.

Type:nombre
Par défaut:0
animation.easing

Fonction de lissage de vitesse appliquée à l'animation. Les options suivantes sont disponibles :

  • "linear" : vitesse constante.
  • 'in' - Lissage à l'approche : démarrez en douceur, puis accélérez.
  • "out" (lissage à l'éloignement) : démarre rapidement et ralentit.
  • "inAndOut" (aller et venir) : démarre lentement, accélère, puis ralentit.
Type:chaîne
Par défaut : "linear" (linéaire).
animation.startup

Détermine si le graphique doit s'animer lors du dessin initial. Si la valeur est true, le graphique commence à la référence et s'anime jusqu'à son état final.

Type:booléen
Valeur par défaut "false"
annotations.boxStyle

Pour les graphiques compatibles avec les annotations, l'objet annotations.boxStyle contrôle l'apparence des cases entourant les annotations: 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

Cette option est actuellement disponible pour les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Il n'est pas compatible avec le graphique sur les annotations.

Type:objet
Par défaut:null
annotations.datum
Pour les graphiques compatibles avec les annotations, l'objet annotations.datum vous permet d'ignorer le choix de Google Charts pour les annotations fournies pour des éléments de données individuels (comme les valeurs affichées avec chaque barre d'un graphique à barres). Vous pouvez contrôler la couleur avec annotations.datum.stem.color, la longueur de la tige avec annotations.datum.stem.length et le style avec annotations.datum.style.
Type:objet
Par défaut:la couleur est "black", la longueur est de 12 et le style est "point".
annotations.domain
Pour les graphiques compatibles avec les annotations, l'objet annotations.domain vous permet d'ignorer le choix de Google Charts pour les annotations fournies pour un domaine (l'axe principal du graphique, comme l'axe X d'un graphique en courbes classique). Vous pouvez contrôler la couleur avec annotations.domain.stem.color, la longueur de la tige avec annotations.domain.stem.length et le style avec annotations.domain.style.
Type:objet
Par défaut:la couleur est "black", la longueur est de 5 et le style est "point".
annotations.highContrast
Pour les graphiques compatibles avec les annotations, la valeur booléenne annotations.highContrast vous permet d'ignorer le choix de la couleur d'annotation par Google Charts. Par défaut, annotations.highContrast est défini sur "true". Les graphiques sélectionnent donc une couleur d'annotation offrant un bon contraste: couleurs claires sur les fonds sombres et foncées sur les fonds clairs. Si vous définissez annotations.highContrast sur "false" et ne spécifiez pas votre propre couleur d'annotation, Google Charts utilise la couleur de série par défaut pour l'annotation:
Type:booléen
Valeur par défaut : "true"
annotations.stem
Pour les graphiques compatibles avec les annotations, l'objet annotations.stem vous permet d'ignorer le choix de Google Charts pour le style racine. Vous pouvez contrôler la couleur avec annotations.stem.color et la longueur de la tige avec annotations.stem.length. Notez que l'option de longueur de la tige n'a aucun effet sur les annotations avec le style 'line': pour les annotations de plan de référence 'line', la longueur de la tige est toujours identique à celle du texte. Pour les annotations de domaine 'line', la longueur du pied s'étend sur l'ensemble du graphique.
Type:objet
Par défaut:la couleur est "black". La longueur est de 5 pour les annotations de domaine et de 12 pour les annotations de plans de référence.
annotations.style
Pour les graphiques compatibles avec les annotations, l'option annotations.style vous permet d'ignorer le type d'annotation choisi par Google Charts. Il peut s'agir de 'line' ou de 'point'.
Type:chaîne
Par défaut : "point"
annotations.textStyle
Pour les graphiques compatibles avec les annotations, l'objet annotations.textStyle contrôle l'apparence du texte de l'annotation: 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

Cette option est actuellement disponible pour les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Il n'est pas compatible avec le graphique d'annotations .

Type:objet
Par défaut:null
axisTitlesPosition

l'emplacement des titres des axes par rapport à la zone du graphique ; Valeurs acceptées :

  • in : tracez les titres des axes à l'intérieur de la zone du graphique.
  • out - Tracez les titres des axes à l'extérieur de la zone du graphique.
  • none - Omettez les titres de l'axe.
Type:chaîne
Par défaut : "out"
backgroundColor

Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une simple chaîne de couleur HTML, par exemple 'red' ou '#00cc00', ou d'un objet avec les propriétés suivantes.

Type:chaîne ou objet
Par défaut : "white" (blanc).
backgroundColor.stroke

Couleur de la bordure du graphique, sous forme de chaîne de couleur HTML.

Type:chaîne
Par défaut : "#666"
backgroundColor.strokeWidth

Largeur de la bordure, en pixels.

Type:nombre
Par défaut:0
backgroundColor.fill

Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML.

Type:chaîne
Par défaut : "white" (blanc).
chart.title

Pour les graphiques Material, cette option indique le titre.

Type:chaîne
Par défaut:null
chart.subtitle

Pour les graphiques Material, cette option spécifie le sous-titre. Seuls les graphiques Material Charts sont compatibles avec les sous-titres.

Type:chaîne
Par défaut:null
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 : chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type:objet
Par défaut:null
chartArea.backgroundColor
Couleur d'arrière-plan de la zone de graphique Lorsqu'une chaîne est utilisée, il peut s'agir d'une chaîne hexadécimale (par exemple, "#fdc") ou d'un nom de couleur anglais. Lorsqu'un objet est utilisé, les propriétés suivantes peuvent être fournies:
  • stroke: couleur fournie sous forme de chaîne hexadécimale ou de nom de couleur anglais.
  • strokeWidth: si ce champ est fourni, il dessine une bordure autour de la zone du graphique de la largeur donnée (et de la couleur stroke).
Type:chaîne ou objet
Par défaut : "white" (blanc).
chartArea.left

Distance à partir de la bordure gauche 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
colors

Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: colors:['red','#004411'].

Type:tableau de chaînes
Par défaut:couleurs par défaut
réticule

Objet contenant les propriétés du réviseur pour le graphique.

Type:objet
Par défaut:null
crosshair.color

Couleur du réticule, exprimée sous la forme d'un nom de couleur (par exemple, "bleu") ou une valeur RVB (par exemple, "#adf").

Type:chaîne
Type:default (par défaut)
crosshair.focused

Objet contenant les propriétés du curseur en forme de cible lors de la mise au point.
Exemple : crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Type:objet
Par défaut:default (par défaut)
crosshair.opacity

Opacité du curseur en forme de croix, 0.0 étant totalement transparent et 1.0 totalement opaque.

Type:nombre
Par défaut:1.0
crosshair.orientation

L'orientation du réticule, qui peut être "verticale" pour les cheveux verticaux uniquement, "horizontal" pour les cheveux horizontaux uniquement ou "les deux" pour les cheveux traditionnels.

Type:chaîne
Par défaut : "les deux"
crosshair.selected

Objet contenant les propriétés du curseur lors de la sélection.
Exemple : crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Type:objet
Par défaut:default (par défaut)
crosshair.trigger

Quand afficher le curseur en forme de croix: sur 'focus', 'selection' ou 'both'.

Type:chaîne
Par défaut : "les deux"
curveType

Permet de contrôler la courbe des lignes lorsque l'épaisseur de ligne n'est pas nulle. Les possibilités suivantes s'offrent à vous :

  • "none" : lignes droites sans courbe.
  • "function" : les angles de la ligne sont lissés.
Type:chaîne
Par défaut : "none" (aucun)
dataOpacity

Transparence des points de données, 1,0 étant complètement opaque et 0,0 totalement transparent. Dans les graphiques à nuage de points, les histogrammes, les barres et les colonnes, cela fait référence aux données visibles: points dans le graphique à nuage de points et rectangles dans les autres. Dans les graphiques où la sélection de données crée un point (comme les graphiques en courbes et en aires), il s'agit des cercles qui s'affichent lorsque l'utilisateur pointe dessus ou sélectionne un élément. Le graphique combiné présente les deux comportements, et cette option n'a aucun effet sur les autres graphiques. Pour modifier l'opacité d'une ligne de tendance, consultez Opacité de la ligne de tendance .

Type:nombre
Par défaut:1.0
enableInteractivity

Indique si le graphique génère des événements basés sur l'utilisateur ou réagit à une interaction utilisateur. Si la valeur est définie sur "false", le graphique ne génère pas d'événements de type "select" ou d'autres événements basés sur une interaction (mais génère des événements "prêts" ou d'erreur), et n'affiche pas le texte de l'info-bulle ni ne change en fonction de l'entrée utilisateur.

Type:booléen
Valeur par défaut : "true"
explorer

L'option explorer permet aux utilisateurs d'effectuer un panoramique et un zoom sur les graphiques Google. explorer: {} fournit le comportement par défaut de l'explorateur, qui permet aux utilisateurs de faire un panoramique horizontalement et verticalement par glisser-déposer, et de faire un zoom avant ou arrière en faisant défiler l'écran.

Cette fonctionnalité est expérimentale et susceptible d'être modifiée dans les prochaines versions.

Remarque:L'explorateur ne fonctionne qu'avec des axes continus (tels que des nombres ou des dates).

Type:objet
Par défaut:null
explorer.actions

L'explorateur de graphiques Google permet d'effectuer trois actions:

  • dragToPan: faites glisser le graphique pour effectuer un panoramique horizontal et vertical. Pour n'effectuer un panoramique que le long de l'axe horizontal, utilisez explorer: { axis: 'horizontal' }. Il en va de même pour l'axe vertical.
  • dragToZoom: le comportement par défaut de l'explorateur consiste à faire un zoom avant ou arrière lorsque l'utilisateur fait défiler la page. Si vous utilisez explorer: { actions: ['dragToZoom', 'rightClickToReset'] } et que vous faites glisser une zone rectangulaire, elle zoome sur celle-ci. Nous vous recommandons d'utiliser rightClickToReset chaque fois que dragToZoom est utilisé. Consultez explorer.maxZoomIn, explorer.maxZoomOut et explorer.zoomDelta pour personnaliser le zoom.
  • rightClickToReset: un clic droit sur le graphique rétablit les niveaux de zoom et de panoramique d'origine.
Type:tableau de chaînes
Par défaut : ['dragToPan', 'rightClickToReset']
explorer.axis

Par défaut, les utilisateurs peuvent effectuer un panoramique à la fois horizontalement et verticalement lorsque l'option explorer est utilisée. Si vous souhaitez que les utilisateurs puissent effectuer un panoramique uniquement horizontalement, utilisez explorer: { axis: 'horizontal' }. De même, explorer: { axis: 'vertical' } permet un panoramique vertical uniquement.

Type:chaîne
Par défaut:panoramique horizontal et vertical
explorer.keepInBounds

Par défaut, les utilisateurs peuvent faire un panoramique tout autour, quel que soit l'emplacement des données. Pour vous assurer qu'ils ne dépassent pas le graphique d'origine, utilisez explorer: { keepInBounds: true }.

Type:booléen
Par défaut : "false"
explorer.maxZoomIn

Montant maximal sur lequel l'explorateur peut effectuer un zoom. Par défaut, les utilisateurs peuvent effectuer un zoom avant suffisant pour ne voir que 25% de la vue d'origine. En définissant explorer: { maxZoomIn: .5 }, les utilisateurs peuvent zoomer uniquement sur la moitié de la vue d'origine.

Type:nombre
Par défaut:0,25
explorer.maxZoomOut

Valeurs maximales sur lesquelles l'explorateur peut effectuer un zoom arrière. Par défaut, les utilisateurs peuvent effectuer un zoom arrière suffisamment important pour que le graphique n'occupe qu'un quart de l'espace disponible. Définir explorer: { maxZoomOut: 8 } permet aux utilisateurs de faire un zoom arrière suffisamment pour que le graphique n'occupe qu'un huitième de l'espace disponible.

Type:nombre
Par défaut:4
explorer.zoomDelta

Lorsque les utilisateurs font un zoom avant ou arrière, explorer.zoomDelta détermine le niveau de zoom souhaité. Plus le nombre est faible, plus le zoom est fluide et lent.

Type:nombre
Valeur par défaut:1,5
fontSize

Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique.

Type:nombre
Par défaut:automatique
fontName

Type de police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique.

Type:chaîne
Par défaut : "Arial"
forceIFrame

Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames.

Type:booléen
Par défaut : "false"
hAxis

Objet avec des membres permettant de configurer divers éléments de l'axe horizontal. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Type:objet
Par défaut:null
hAxis.baseline

Base de l'axe horizontal.

Type:nombre
Par défaut:automatique
hAxis.baselineColor

Couleur de la référence de l'axe horizontal. Peut correspondre à n'importe quelle chaîne de couleur HTML, par exemple : 'red' ou '#00cc00'.

Type:nombre
Par défaut : "black" (noir)
hAxis.direction

Sens de croissance des valeurs le long de l'axe horizontal. Spécifiez -1 pour inverser l'ordre des valeurs.

Type:1 ou -1
Par défaut : 1
hAxis.format

Chaîne de format pour les libellés numériques des axes. Il s'agit d'un sous-ensemble de l' ensemble de modèles ICU . Par exemple, {format:'#,###%'} affiche les valeurs "1 000%", "750%" et "50%" pour les valeurs 10, 7,5 et 0,5. Vous pouvez également fournir l'un des éléments suivants:

  • {format: 'none'}: affiche les nombres sans mise en forme (par exemple, 8000000)
  • {format: 'decimal'}: affiche les nombres avec des séparateurs de milliers (par exemple, 8 000 000)
  • {format: 'scientific'}: affiche les nombres en notation scientifique (par exemple, 8e6).
  • {format: 'currency'}: affiche les nombres dans la devise locale (par exemple, 8 000 000,00 $)
  • {format: 'percent'}: affiche les nombres sous forme de pourcentages (par exemple, 800 000 000%)
  • {format: 'short'}: affiche des nombres abrégés (par exemple, 8M)
  • {format: 'long'}: affiche les nombres sous forme de mots entiers (par exemple, 8 millions)

La mise en forme réelle appliquée au libellé est dérivée des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec des paramètres régionaux spécifiques .

Lors du calcul des valeurs de graduation et des lignes de quadrillage, plusieurs combinaisons alternatives de toutes les options de graduation pertinentes sont prises en compte, et les alternatives sont rejetées si les étiquettes de graduation mises en forme sont dupliquées ou se chevauchent. Vous pouvez donc spécifier format:"#" si vous souhaitez n'afficher que les valeurs de graduation entières. Sachez toutefois que si aucune alternative ne répond à cette condition, aucun quadrillage ni graduation ne s'affichera.

Type:chaîne
Par défaut:auto
hAxis.gridlines

Objet avec des propriétés permettant de configurer le quadrillage sur l'axe horizontal. Notez que le quadrillage de l'axe horizontal est dessiné verticalement. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

{color: '#333', minSpacing: 20}
Type:objet
Par défaut:null
hAxis.gridlines.color

Couleur des lignes de quadrillage horizontales dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide.

Type:chaîne
Par défaut : "#CCC"
hAxis.gridlines.count

Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique. Si vous spécifiez un nombre positif pour gridlines.count, il sera utilisé pour calculer la minSpacing entre le quadrillage. Vous pouvez spécifier la valeur 1 pour ne dessiner qu'un seul quadrillage, ou la valeur 0 pour ne dessiner aucun quadrillage. Spécifiez -1 (valeur par défaut) pour calculer automatiquement le nombre de lignes de quadrillage en fonction d'autres options.

Type:nombre
Valeur par défaut : -1
hAxis.gridlines.units

Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec le quadrillage calculé de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Des informations supplémentaires sont disponibles dans Dates et heures.

Type:objet
Par défaut:null
hAxis.minorGridlines

Objet avec des membres permettant de configurer les lignes de quadrillage mineures sur l'axe horizontal, de la même manière que l'option hAxis.gridlines.

Type:objet
Par défaut:null
hAxis.minorGridlines.color

Couleur des lignes de quadrillage mineures horizontales dans la zone de graphique. Spécifiez une chaîne de couleur HTML valide.

Type:chaîne
Par défaut:mélange des couleurs du quadrillage et de l'arrière-plan
hAxis.minorGridlines.count

L'option minorGridlines.count est presque obsolète, à l'exception de la désactivation des lignes de quadrillage mineures en définissant le nombre sur 0. Le nombre de lignes de quadrillage mineures dépend désormais entièrement de l'intervalle entre les principaux quadrillages (voir hAxis.gridlines.interval) et de l'espace minimal requis (voir hAxis.minorGridlines.minSpacing).

Type:nombre
Par défaut:1
hAxis.minorGridlines.units

Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec les minorGridlines calculés dans un graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Des informations supplémentaires sont disponibles dans Dates et heures.

Type:objet
Par défaut:null
hAxis.logScale

Propriété hAxis qui transforme l'axe horizontal sur une échelle logarithmique (toutes les valeurs doivent être positives). Définissez cette valeur sur "true" pour "oui".

Type:booléen
Par défaut : "false"
hAxis.scaleType

Propriété hAxis qui transforme l'axe horizontal sur une échelle logarithmique. Les possibilités suivantes s'offrent à vous :

  • null - Aucune mise à l'échelle logarithmique n'est effectuée.
  • 'log' : mise à l'échelle logarithmique. Les valeurs négatives et nulles ne sont pas représentées. Cette option revient à définir hAxis: { logscale: true }.
  • "MirrorLog" : mise à l'échelle logarithmique dans laquelle les valeurs négatives et nulles sont représentées. La valeur représentée d'un nombre négatif est la négative du logarithme de la valeur absolue. Les valeurs proches de 0 sont tracées sur une échelle linéaire.
Type:chaîne
Valeur par défaut: null
hAxis.textPosition

Position du texte de l'axe horizontal par rapport à la zone du graphique. Valeurs acceptées: "out", "in", "none".

Type:chaîne
Par défaut : "out"
hAxis.textStyle

Objet spécifiant le style de texte de l'axe horizontal. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

Remplace les graduations automatiques de l'axe X par le tableau spécifié. Chaque élément du tableau doit être une valeur de graduation valide (comme un nombre, une date, une date et une heure ou une heure de la journée) ou un objet. S'il s'agit d'un objet, il doit comporter une propriété v pour la valeur de la graduation et une propriété facultative f contenant la chaîne littérale à afficher en tant que libellé.

La fenêtre viewWindow est automatiquement développée pour inclure les graduations minimale et maximale, sauf si vous spécifiez un viewWindow.min ou un viewWindow.max à remplacer.

Exemples :

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Type:tableau d'éléments
Par défaut:auto
hAxis.title

hAxis spécifiant le titre de l'axe horizontal.

Type:chaîne
Par défaut:null
hAxis.titleTextStyle

Objet spécifiant le style de texte du titre de l'axe horizontal. L'objet a le format suivant: 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

Déplace la valeur maximale de l'axe horizontal vers la valeur spécifiée. Elle sera positionnée vers la droite dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur inférieure à la valeur x maximale des données. hAxis.viewWindow.max remplace cette propriété.

Type:nombre
Par défaut:automatique
hAxis.minValue

Déplace la valeur minimale de l'axe horizontal vers la valeur spécifiée. Elle sera vers la gauche dans la plupart des graphiques. Ignoré si ce champ est défini sur une valeur supérieure à la valeur x minimale des données. hAxis.viewWindow.min remplace cette propriété.

Type:nombre
Par défaut:automatique
hAxis.viewWindowMode

Spécifie comment mettre à l'échelle l'axe horizontal pour afficher les valeurs dans la zone du graphique. Les valeurs de chaîne suivantes sont acceptées:

  • "pretty" : met à l'échelle les valeurs horizontales afin que les valeurs de données maximales et minimales soient affichées un peu à gauche et à droite de la zone du graphique. ViewWindow est développée jusqu'à la ligne de grille principale la plus proche pour les nombres ou la ligne de grille mineure la plus proche pour les dates et les heures.
  • "maximized" : met à l'échelle les valeurs horizontales de sorte que les valeurs de données maximales et minimales s'étendent à gauche et à droite de la zone du graphique. haxis.viewWindow.min et haxis.viewWindow.max seront donc ignorés.
  • "explicite" : option obsolète permettant de spécifier les valeurs d'échelle de gauche et de droite de la zone de graphique. (Obsolète, car il est redondant avec haxis.viewWindow.min et haxis.viewWindow.max.) Les valeurs de données en dehors de ces valeurs seront recadrées. Vous devez spécifier un objet hAxis.viewWindow décrivant les valeurs maximale et minimale à afficher.
Type:chaîne
Par défaut:équivaut à "pretty", mais haxis.viewWindow.min et haxis.viewWindow.max sont prioritaires s'ils sont utilisés.
hAxis.viewWindow

Spécifie la plage de recadrage de l'axe horizontal.

Type:objet
Par défaut:null
hAxis.viewWindow.max

Valeur maximale des données horizontales à afficher.

Ignoré lorsque hAxis.viewWindowMode est "joli" ou "maximisé".

Type:nombre
Par défaut:auto
hAxis.viewWindow.min

Valeur minimale des données horizontales à afficher.

Ignoré lorsque hAxis.viewWindowMode est "joli" ou "maximisé".

Type:nombre
Par défaut:auto
taille

Hauteur du graphique, en pixels.

Type:nombre
Par défaut:hauteur de l'élément parent
légende

Objet avec des membres permettant de configurer divers aspects de la légende. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type:objet
Par défaut:null
legend.alignment

Alignement de la légende. Les possibilités suivantes s'offrent à vous :

  • "start" : aligné sur le début de la zone allouée à la légende.
  • "center" : centré dans la zone allouée à la légende.
  • "end" : aligné à la fin de la zone allouée à la légende.

Le début, le centre et la fin dépendent du style (vertical ou horizontal) de la légende. Par exemple, dans une légende "droite", "début" et "fin" se trouvent respectivement en haut et en bas. Pour une légende "haut", "début" et "fin" se trouvent respectivement à gauche et à droite de la zone.

La valeur par défaut dépend de la position de la légende. Pour les légendes "bas", la valeur par défaut est "center" ; les autres légendes sont "start" (début).

Type:chaîne
Par défaut:automatique
legend.maxLines

Nombre maximal de lignes dans la légende. Définissez ce paramètre sur un nombre supérieur à 1 pour ajouter des lignes à votre légende. Remarque: La logique exacte utilisée pour déterminer le nombre réel de lignes affichées est toujours en mouvement.

Pour le moment, cette option ne fonctionne que lorsque la valeur "caption.position" est définie sur "top".

Type:nombre
Par défaut : 1
legend.pageIndex

Index de page basé sur zéro initial sélectionné pour la légende.

Type:nombre
Par défaut:0
legend.position

Position de la légende. Les possibilités suivantes s'offrent à vous :

  • "bottom" : sous le graphique.
  • "left" : à gauche du graphique, à condition qu'aucune série ne soit associée à l'axe de gauche. Ainsi, si vous souhaitez que la légende se trouve à gauche, utilisez l'option targetAxisIndex: 1.
  • 'in' : à l'intérieur du graphique, dans l'angle supérieur gauche.
  • "none" : aucune légende ne s'affiche.
  • "right" : à droite du graphique. Incompatible avec l'option vAxes.
  • "top" : au-dessus du graphique.
Type:chaîne
Par défaut : "right" (droite)
legend.textStyle

Objet qui spécifie le style du texte de la légende. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineWidth

Épaisseur de la ligne en pixels. Utilisez la valeur zéro pour masquer toutes les lignes et n'afficher que les points.

Type:nombre
Par défaut:0
orientation

Orientation du graphique. Si la valeur est 'vertical', fait pivoter les axes du graphique de sorte que (par exemple) un graphique à colonnes se transforme en graphique à barres, et qu'un graphique en aires se développe vers la droite plutôt que vers le haut:

Type:chaîne
Par défaut : "horizontal"
pointShape

Forme des éléments de données individuels: "cercle", "triangle", "carré", "losange", "étoile" ou "polygone". Consultez la documentation sur les points pour obtenir des exemples.

Type:chaîne
Par défaut : "circle" (cercle)
pointSize

Diamètre des points de données, en pixels Utilisez zéro pour masquer tous les points. Vous pouvez remplacer les valeurs de chaque série à l'aide de la propriété series. Si vous utilisez une ligne de tendance, cette option affecte également le pointSize des points qui la composent, ce qui modifie sa largeur apparente. Pour éviter cela, vous pouvez le remplacer avec l'option trendlines.n.pointsize.

Type:nombre
Par défaut:7
pointsVisible

Détermine si les points seront affichés. Définissez la valeur sur false pour masquer tous les points. Vous pouvez remplacer les valeurs de chaque série à l'aide de la propriété series. Si vous utilisez une ligne de tendance, l'option pointsVisible affecte la visibilité des points sur toutes les lignes de tendance, sauf si vous la remplacez par l'option trendlines.n.pointsVisible.

Vous pouvez également remplacer ce paramètre à l'aide du rôle de style sous la forme "point {visible: true}".

Type:booléen
Valeur par défaut : "true"
selectionMode

Lorsque selectionMode est défini sur 'multiple', les utilisateurs peuvent sélectionner plusieurs points de données.

Type:chaîne
Par défaut : "single" (unique)
séries

Tableau d'objets, chacun décrivant le format de la série correspondante dans le graphique. Si vous souhaitez utiliser des valeurs par défaut pour une série, spécifiez un objet vide {}. Si aucune série ou valeur n'est spécifiée, la valeur globale sera utilisée. Chaque objet accepte les propriétés suivantes:

  • color : couleur à utiliser pour cette série. Indiquez une chaîne de couleur HTML valide.
  • labelInLegend : description de la série à afficher dans la légende du graphique.
  • lineWidth : remplace la valeur lineWidth globale pour cette série.
  • pointShape : remplace la valeur pointShape globale pour cette série.
  • pointSize : remplace la valeur pointSize globale pour cette série.
  • pointsVisible : remplace la valeur pointsVisible globale pour cette série.
  • visibleInLegend : valeur booléenne, où "true" signifie que la série doit comporter une entrée de légende et "false" qu'elle ne doit pas l'être. La valeur par défaut est "true".

Vous pouvez spécifier un tableau d'objets, chacun s'appliquant à la série dans l'ordre indiqué, ou un objet dans lequel chaque enfant possède une clé numérique indiquant à quelle série il s'applique. Par exemple, les deux déclarations suivantes sont identiques et déclarent la première série comme noire et absente de la légende, et la quatrième comme rouge et absente de la légende: 

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
Type:tableau d'objets ou objet avec des objets imbriqués
Par défaut : {}
thème

Un thème est un ensemble de valeurs d'options prédéfinies qui fonctionnent ensemble pour obtenir un comportement ou un effet visuel spécifique dans un graphique. Actuellement, un seul thème est disponible:

  • agrandi : optimise la zone du graphique, et affiche la légende et tous les libellés qu'il contient. Définit les options suivantes : 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Type:chaîne
Par défaut:null
titre

Texte à afficher au-dessus du graphique.

Type:chaîne
Par défaut:aucun titre
titlePosition

Emplacement du titre du graphique par rapport à la zone du graphique. Valeurs acceptées :

  • in : dessinez le titre à l'intérieur de la zone du graphique.
  • out : dessinez le titre à l'extérieur de la zone du graphique.
  • none : omettez le titre.
Type:chaîne
Par défaut : "out"
titleTextStyle

Objet spécifiant le style du texte du titre. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Info-bulle

Objet avec des membres permettant de configurer divers éléments d'info-bulle. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type:objet
Par défaut:null
tooltip.ignoreBounds

Si la valeur est true, autorise le dessin des info-bulles en dehors des limites du graphique sur tous les côtés.

Remarque:Cela ne s'applique qu'aux info-bulles HTML. Si cette option est activée avec les info-bulles SVG, tout dépassement en dehors des limites du graphique sera rogné. Pour en savoir plus, consultez Personnaliser le contenu des info-bulles.

Type:booléen
Par défaut : "false"
tooltip.isHtml

Si elle est définie sur "True", utilisez les info-bulles affichées en HTML (plutôt que SVG). Pour en savoir plus, consultez Personnaliser le contenu des info-bulles.

Remarque:La personnalisation du contenu de l'info-bulle HTML via le rôle de données des colonnes d'info-bulles n'est pas disponible pour la visualisation Graphique à bulles.

Type:booléen
Par défaut : "false"
tooltip.showColorCode

Si la valeur est "true", des carrés de couleur s'affichent à côté des informations sur la série dans l'info-bulle.

Type:booléen
Par défaut : "false"
tooltip.textStyle

Objet spécifiant le style de texte de l'info-bulle. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:

  • "sélectionner" : l'info-bulle s'affiche lorsque l'utilisateur pointe sur l'élément.
  • "none" : l'info-bulle ne s'affiche pas.
  • "selection" : l'info-bulle s'affiche lorsque l'utilisateur sélectionne l'élément.
Type:chaîne
Par défaut : "focus"
courbes de tendance

Affiche les lignes de tendance sur les graphiques compatibles. Par défaut, les courbes de tendance linéaires sont utilisées, mais vous pouvez les personnaliser avec l'option trendlines.n.type.

Les courbes de tendance sont spécifiées par série. Par conséquent, la plupart du temps, les options se présentent comme suit: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Type:objet
Par défaut:null
trendlines.n.color

Couleur de la ligne de tendance , exprimée sous la forme d'un nom de couleur anglais ou d'une chaîne hexadécimale.

Type:chaîne
Par défaut:couleur de la série par défaut
trendlines.n.degree

Pour les lignes de tendance de type: 'polynomial', le degré du polynôme (2 pour le quadratique, 3 pour le cubique, etc.). (Le degré par défaut peut passer de 3 à 2 dans une prochaine version de Google Charts.)

Type:nombre
Par défaut:3
trendlines.n.labelInLegend

Si elle est définie, la ligne de tendance apparaît dans la légende en tant que chaîne.

Type:chaîne
Par défaut:null
trendlines.n.lineWidth

Épaisseur de la ligne de tendance , en pixels.

Type:nombre
Par défaut:2
trendlines.n.opacity

Transparence de la ligne de tendance , qui passe de 0,0 (transparent) à 1,0 (opaque).

Type:nombre
Par défaut:1.0
trendlines.n.pointSize

Les lignes de tendance sont composées de plusieurs points sur le graphique. Cette option rarement nécessaire vous permet de personnaliser la taille des points. L'option lineWidth de la courbe de tendance est généralement préférable. Toutefois, vous aurez besoin de cette option si vous utilisez l'option globale pointSize et que vous souhaitez utiliser une taille de point différente pour vos courbes de tendance.

Type:nombre
Par défaut : 1
trendlines.n.pointsVisible

Les lignes de tendance sont composées de plusieurs points sur le graphique. L'option pointsVisible de la courbe de tendance détermine si ses points sont visibles ou non.

Type:booléen
Valeur par défaut : "true"
trendlines.n.showR2

Indique si le coefficient de détermination doit s'afficher dans l'info-bulle de la légende ou de la courbe de tendance.

Type:booléen
Par défaut : "false"
trendlines.n.type

Indique si les lignes de tendance sont définies sur 'linear' (valeur par défaut), 'exponential' ou 'polynomial'.

Type:chaîne
Par défaut : "linear" (linéaire).
trendlines.n.visibleInLegend

Indique si l'équation de la ligne de tendance apparaît dans la légende. Il apparaîtra dans l'info-bulle de la courbe de tendance.

Type:booléen
Par défaut : "false"
vAxis

Objet avec des membres permettant de configurer divers éléments de l'axe vertical. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type:objet
Par défaut:null
vAxis.baseline

vAxis spécifiant la référence de l'axe vertical. Si la ligne de référence est plus grande que la ligne de grille la plus élevée ou inférieure à la ligne de grille la plus basse, elle est arrondie à la ligne de grille la plus proche.

Type:nombre
Par défaut:automatique
vAxis.baselineColor

Spécifie la couleur de la référence de l'axe vertical. Peut correspondre à n'importe quelle chaîne de couleur HTML, par exemple: 'red' ou '#00cc00'.

Type:nombre
Par défaut : "black" (noir)
vAxis.direction

Sens de croissance des valeurs le long de l'axe vertical. Par défaut, les valeurs faibles se trouvent en bas du graphique. Spécifiez -1 pour inverser l'ordre des valeurs.

Type:1 ou -1
Par défaut : 1
vAxis.format

Chaîne de format pour les libellés numériques des axes. Il s'agit d'un sous-ensemble de l' ensemble de modèles ICU . Par exemple, {format:'#,###%'} affiche les valeurs "1 000%", "750%" et "50%" pour les valeurs 10, 7,5 et 0,5. Vous pouvez également fournir l'un des éléments suivants:

  • {format: 'none'}: affiche les nombres sans mise en forme (par exemple, 8000000)
  • {format: 'decimal'}: affiche les nombres avec des séparateurs de milliers (par exemple, 8 000 000)
  • {format: 'scientific'}: affiche les nombres en notation scientifique (par exemple, 8e6).
  • {format: 'currency'}: affiche les nombres dans la devise locale (par exemple, 8 000 000,00 $)
  • {format: 'percent'}: affiche les nombres sous forme de pourcentages (par exemple, 800 000 000%)
  • {format: 'short'}: affiche des nombres abrégés (par exemple, 8M)
  • {format: 'long'}: affiche les nombres sous forme de mots entiers (par exemple, 8 millions)

La mise en forme réelle appliquée au libellé est dérivée des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec des paramètres régionaux spécifiques .

Lors du calcul des valeurs de graduation et des lignes de quadrillage, plusieurs combinaisons alternatives de toutes les options de graduation pertinentes sont prises en compte, et les alternatives sont rejetées si les étiquettes de graduation mises en forme sont dupliquées ou se chevauchent. Vous pouvez donc spécifier format:"#" si vous souhaitez n'afficher que les valeurs de graduation entières. Sachez toutefois que si aucune alternative ne répond à cette condition, aucun quadrillage ni graduation ne s'affichera.

Type:chaîne
Par défaut:auto
vAxis.gridlines

Objet avec des membres permettant de configurer le quadrillage sur l'axe vertical. Notez que le quadrillage de l'axe vertical est dessiné horizontalement. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: 

{color: '#333', minSpacing: 20}
Type:objet
Par défaut:null
vAxis.gridlines.color

Couleur du quadrillage vertical dans la zone du graphique. Indiquez une chaîne de couleur HTML valide.

Type:chaîne
Par défaut : "#CCC"
vAxis.gridlines.count

Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique. Si vous spécifiez un nombre positif pour gridlines.count, il sera utilisé pour calculer la minSpacing entre le quadrillage. Vous pouvez spécifier la valeur 1 pour ne dessiner qu'un seul quadrillage, ou la valeur 0 pour ne dessiner aucun quadrillage. Spécifiez -1 (valeur par défaut) pour calculer automatiquement le nombre de lignes de quadrillage en fonction d'autres options.

Type:nombre
Valeur par défaut : -1
vAxis.gridlines.units

Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec le quadrillage calculé de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

Des informations supplémentaires sont disponibles dans Dates et heures.

Type:objet
Par défaut:null
vAxis.minorGridlines

Objet avec des membres permettant de configurer le quadrillage mineur sur l'axe vertical, semblable à l'option vAxis.gridlines.

Type:objet
Par défaut:null
vAxis.minorGridlines.color

Couleur des lignes de quadrillage mineures verticales dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide.

Type:chaîne
Par défaut:mélange des couleurs du quadrillage et de l'arrière-plan
vAxis.minorGridlines.count

L'option mineurGridlines.count est presque obsolète, à l'exception de la désactivation des lignes de quadrillage mineures en définissant le nombre sur 0. Le nombre de lignes de quadrillage mineures dépend de l'intervalle entre les principaux quadrillages (voir vAxis.gridlines.interval) et l'espace minimal requis (voir vAxis.minorGridlines.minSpacing).

Type:nombre
Par défaut : 1
vAxis.minorGridlines.units

Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec les minorGridlines calculés dans un graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes.

Le format général est le suivant:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

Des informations supplémentaires sont disponibles dans Dates et heures.

Type:objet
Par défaut:null
vAxis.logScale

Si la valeur est "true", l'axe vertical devient une échelle logarithmique. Remarque: Toutes les valeurs doivent être positives.

Type:booléen
Par défaut : "false"
vAxis.scaleType

Propriété vAxis qui transforme l'axe vertical une échelle logarithmique. Les possibilités suivantes s'offrent à vous :

  • null - Aucune mise à l'échelle logarithmique n'est effectuée.
  • 'log' : mise à l'échelle logarithmique. Les valeurs négatives et nulles ne sont pas représentées. Cette option revient à définir vAxis: { logscale: true }.
  • "MirrorLog" : mise à l'échelle logarithmique dans laquelle les valeurs négatives et nulles sont représentées. La valeur représentée d'un nombre négatif est la négative du logarithme de la valeur absolue. Les valeurs proches de 0 sont tracées sur une échelle linéaire.
Type:chaîne
Par défaut:null
vAxis.textPosition

Position du texte de l'axe vertical par rapport à la zone du graphique. Valeurs acceptées: "out", "in", "none".

Type:chaîne
Par défaut : "out"
vAxis.textStyle

Objet spécifiant le style de texte de l'axe vertical. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Remplace les graduations de l'axe Y générées automatiquement par le tableau spécifié. Chaque élément du tableau doit être une valeur de graduation valide (comme un nombre, une date, une date et une heure ou une heure de la journée) ou un objet. S'il s'agit d'un objet, il doit comporter une propriété v pour la valeur de la graduation et une propriété facultative f contenant la chaîne littérale à afficher en tant que libellé.

La fenêtre viewWindow est automatiquement développée pour inclure les graduations minimale et maximale, sauf si vous spécifiez un viewWindow.min ou un viewWindow.max à remplacer.

Exemples :

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Type:tableau d'éléments
Par défaut:auto
vAxis.title

vAxis qui spécifie le titre de l'axe vertical.

Type:chaîne
Par défaut:aucun titre
vAxis.titleTextStyle

Objet spécifiant le style de texte du titre de l'axe vertical. L'objet a le format suivant:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color peut être n'importe quelle chaîne de couleur HTML, par exemple 'red' ou '#00cc00'. Voir également fontName et fontSize.

Type:objet
Par défaut: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

Déplace la valeur maximale de l'axe vertical vers la valeur spécifiée. Dans la plupart des graphiques, cette valeur est augmentée vers le haut. Ignoré si ce paramètre est défini sur une valeur inférieure à la valeur y maximale des données. vAxis.viewWindow.max remplace cette propriété.

Type:nombre
Par défaut:automatique
vAxis.minValue

Déplace la valeur minimale de l'axe vertical vers la valeur spécifiée. Elle est alors vers le bas dans la plupart des graphiques. Ignoré si cette valeur est définie sur une valeur supérieure à la valeur y minimale des données. vAxis.viewWindow.min remplace cette propriété.

Type:nombre
Par défaut:null
vAxis.viewWindowMode

Spécifie comment mettre à l'échelle l'axe vertical pour afficher les valeurs dans la zone du graphique. Les valeurs de chaîne suivantes sont acceptées:

  • "pretty" : met à l'échelle les valeurs verticales afin que les valeurs de données maximales et minimales soient affichées un peu en bas et en haut de la zone du graphique. ViewWindow est développée jusqu'à la ligne de grille principale la plus proche pour les nombres ou la ligne de grille mineure la plus proche pour les dates et les heures.
  • 'maximized' [maximized] : met à l'échelle les valeurs verticales de sorte que les valeurs de données maximales et minimales s'étendent en haut et en bas de la zone du graphique. vaxis.viewWindow.min et vaxis.viewWindow.max seront donc ignorés.
  • "explicite" : option obsolète permettant de spécifier les valeurs d'échelle supérieure et inférieure de la zone de graphique. (Obsolète car il est redondant avec vaxis.viewWindow.min et vaxis.viewWindow.max. Les valeurs de données en dehors de ces valeurs seront recadrées. Vous devez spécifier un objet vAxis.viewWindow décrivant les valeurs maximale et minimale à afficher.
Type:chaîne
Par défaut:équivaut à "pretty", mais vaxis.viewWindow.min et vaxis.viewWindow.max sont prioritaires s'ils sont utilisés.
vAxis.viewWindow

Spécifie la plage de recadrage de l'axe vertical.

Type:objet
Par défaut:null
vAxis.viewWindow.max

Valeur maximale des données verticales à afficher.

Ignoré lorsque vAxis.viewWindowMode est "joli" ou "maximisé".

Type:nombre
Par défaut:auto
vAxis.viewWindow.min

Valeur minimale des données verticales à afficher.

Ignoré lorsque vAxis.viewWindowMode est "joli" ou "maximisé".

Type:nombre
Par défaut:auto
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 ready. Extended description.

Return Type (Type renvoyé) : aucun
getAction(actionID)

Renvoie l'objet d'action d'info-bulle avec l'élément actionID demandé.

Type renvoyé:objet
getBoundingBox(id)

Renvoie un objet contenant les valeurs gauche, supérieure, largeur et hauteur de l'élément de graphique id. Le format de id n'est pas encore documenté (il s'agit des valeurs renvoyées des gestionnaires d'événements), mais voici quelques exemples:

var cli = chart.getChartLayoutInterface();

Hauteur de la zone de graphique
cli.getBoundingBox('chartarea').height
Largeur de la troisième barre de 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 d'un graphique à secteurs
cli.getBoundingBox('slice#4')
Cadre de délimitation des données d'un graphique vertical (par exemple, un graphique à colonnes) :
cli.getBoundingBox('vAxis#0#gridline')
Cadre de délimitation des données d'un graphique horizontal (par exemple, un graphique à barres) :
cli.getBoundingBox('hAxis#0#gridline')

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):

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 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é:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Appelez-le après que le graphique est dessiné.

Type renvoyé:objet
getHAxisValue(xPosition, optional_axis_index)

Renvoie la valeur de données horizontales à xPosition, qui correspond à un décalage de pixels par rapport au bord gauche du conteneur du graphique. Peut être négatif.

Exemple : chart.getChartLayoutInterface().getHAxisValue(400)

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. Les entités sélectionnables sont des points et des entrées de légende. Un point correspond à une cellule de la table de données et une entrée de légende dans une colonne (l'index de ligne est nul). Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

Type renvoyé:tableau d'éléments de sélection
getVAxisValue(yPosition, optional_axis_index)

Renvoie la valeur de données verticales à yPosition, qui correspond à un décalage de pixels par rapport au bord supérieur du conteneur du graphique. Peut être négatif.

Exemple : chart.getChartLayoutInterface().getVAxisValue(300)

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 dataValue par rapport au bord gauche du conteneur du graphique.

Exemple : chart.getChartLayoutInterface().getXLocation(400)

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 dataValue par rapport au bord supérieur du conteneur du graphique.

Exemple : chart.getChartLayoutInterface().getYLocation(300)

Appelez-le après que le graphique est dessiné.

Type renvoyé:nombre
removeAction(actionID)

Supprime l'action d'info-bulle avec l'élément actionID demandé du graphique.

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 setAction utilise un objet comme paramètre d'action. Cet objet doit spécifier trois propriétés: id (ID de l'action en cours de définition), text (texte à afficher dans l'info-bulle de l'action) et action (fonction à exécuter lorsqu'un utilisateur clique sur le texte de l'action).

Toutes les actions d'info-bulle doivent être définies avant d'appeler la méthode draw() du graphique. Description étendue :

Type renvoyé:none
setSelection()

Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente. Les entités sélectionnables sont des points et des entrées de légende. Un point correspond à une cellule de la table de données et une entrée de légende dans une colonne (l'index de ligne est nul). Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

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 draw, puis ne les appeler qu'après le déclenchement de l'événement.

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

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 à un serveur.