Présentation
Graphique en aires en escalier affiché dans le navigateur à l'aide du SVG ou de VML. Affiche des conseils lorsque vous pointez sur les étapes.
Exemple simple
<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([
          ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
          ['Alfred Hitchcock (1935)', 8.4,         7.9],
          ['Ralph Thomas (1959)',     6.9,         6.5],
          ['Don Sharp (1978)',        6.5,         6.4],
          ['James Hawes (2008)',      4.4,         6.2]
        ]);
        var options = {
          title: 'The decline of \'The 39 Steps\'',
          vAxis: {title: 'Accumulated Rating'},
          isStacked: true
        };
        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
Quelques options courantes
Comme tous les graphiques Google, les graphiques en aires en escalier disposent de nombreuses options, présentées ici. Voici un exemple illustrant certaines des méthodes les plus courantes:
Dans le graphique ci-dessus, nous avons modifié la couleur d'arrière-plan avec backgroundColor, déplacé la légende vers le bas avec legend.position, supprimé les lignes verticales en définissant connectSteps sur "false" et personnalisé les couleurs. Voici comment cela a été fait:
  var options = {
      backgroundColor: '#ddd',
      legend: { position: 'bottom' },
      connectSteps: false,
      colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
      isStacked: true,
  };
Graphiques en aires en escalier empilées
  Les graphiques en aires en escalier sont également compatibles avec l'empilement, y compris à 100 %. Un graphique en aires en escalier empilées est un graphique en aires en escalier qui place les valeurs associées les unes au-dessus des autres. S'il existe des valeurs négatives, elles sont empilées dans l'ordre inverse en dessous de la référence du graphique. Pour l'empilement à 100 %, les piles d'éléments à chaque valeur de domaine sont redimensionnées de manière à atteindre un total de 100%. Pour cela, les options sont isStacked: 'percent', qui met en forme chaque valeur en tant que pourcentage de 100%, et isStacked: 'relative', qui met en forme chaque valeur sous la forme d'une fraction de 1. Il existe également une option isStacked: 'absolute', qui équivaut fonctionnellement à isStacked: true.
Notez que dans le graphique empilé à 100% de droite, les valeurs des graduations sont écrites en fonction de l'échelle relative de 0 à 1, sous forme de fractions de 1.
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
  
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    
  Chargement...
Le nom du package google.charts.load est "corechart".
  google.charts.load("current", {packages: ["corechart"]});
Le nom de classe de la visualisation est google.visualization.SteppedAreaChart.
var visualization = new google.visualization.SteppedAreaChart(container);
Format des données
Lignes:chaque ligne du tableau représente un groupe de barres.
Columns:
| Colonne 0 | Colonne 1 | ... | Colonne N | |
|---|---|---|---|---|
| Objectif : | Étiquettes de groupe de l'axe X | Valeurs de la barre 1 dans ce groupe | ... | Barre N valeurs dans ce groupe | 
| Type de données : | chaîne | Nombre | ... | Nombre | 
| Rôle : | domaine | Données | ... | Données | 
| Rôles de colonne facultatifs: | ... | 
Options de configuration
| Nom | |
|---|---|
| aggregationTarget | Comment les données sélectionnées sont regroupées dans des info-bulles: 
 aggregationTargetsera souvent utilisé en tandem avecselectionModeettooltip.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 : 
 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  Type:booléen Valeur par défaut "false" | 
| areaOpacity | 
        Opacité par défaut de la zone située en dessous de l'étape, où 0 correspond à une transparence totale et 1 à opaque totale. N'affecte pas l'opacité de la ligne en escalier. Pour obtenir un graphique en courbes en escalier, définissez cette valeur sur 0. Pour spécifier l'opacité d'une série individuelle, définissez la valeur  Type:nombre, 0,0–1,0 Par défaut:0,3 | 
| axisTitlesPosition | l'emplacement des titres des axes par rapport à la zone du graphique ; Valeurs acceptées : 
 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  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). | 
| chartArea | 
      Objet avec des membres permettant de configurer l'emplacement et la taille de la zone de graphique (où le graphique est dessiné, à l'exception des axes et des légendes). Deux formats sont acceptés: un nombre ou un nombre suivi de %. Un nombre simple est une valeur en pixels. Un nombre suivi de % est un pourcentage. Exemple :  Type:objet Par défaut:null | 
| chartArea.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:
     
 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:  Type:tableau de chaînes Par défaut:couleurs par défaut | 
| connectSteps | Si elle est définie sur "true", les étapes sont connectées pour former une ligne en escalier. Sinon, seule la ligne du haut apparaît. Par défaut, les étapes sont connectées. Type:booléen Valeur par défaut : "true" | 
| 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" | 
| focusTarget | Type de l'entité sélectionnée au passage de la souris. Affecte également l'entité sélectionnée par un clic de souris et l'élément de tableau de données associé à des événements. Il peut s'agir de l'un des éléments suivants: 
 Dans "category" dans focusTarget, l'info-bulle affiche toutes les valeurs de catégorie. Cela peut être utile pour comparer les valeurs de différentes séries. Type:chaîne Par défaut : "datum" | 
| 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.direction | 
      Sens de croissance des valeurs le long de l'axe horizontal. Spécifiez  Type:1 ou -1 Par défaut : 1 | 
| 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> }
    
       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é  
      La fenêtre viewWindow est automatiquement développée pour inclure les graduations minimale et maximale, sauf si vous spécifiez un  Exemples : 
 Type:tableau d'éléments Par défaut:auto | 
| hAxis.title | 
       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> }
    
       Type:objet 
      Par défaut: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| hAxis.allowContainerBoundaryTextCutoff | Si la valeur est "false", les libellés les plus externes sont masqués au lieu d'être recadrés par le conteneur du graphique. Si la valeur est "true", le recadrage du libellé est autorisé. Type:booléen Par défaut : "false" | 
| hAxis.slantedText | 
      Si la valeur est "true", tracez le texte de l'axe horizontal selon un angle pour ajuster plus de texte sur l'axe. Si la valeur est "false", dessinez le texte sur l'axe horizontal à la verticale. Le comportement par défaut consiste à incliner le texte si tout ne peut pas tenir lorsqu'il est dessiné à la verticale. Notez que cette option n'est disponible que lorsque  Type:booléen Par défaut:automatique | 
| hAxis.slantedTextAngle | 
      Angle du texte de l'axe horizontal, s'il est incliné. Ignoré si  Type:nombre, -90–90 Par défaut:30 | 
| hAxis.maxAlternation | Nombre maximal de niveaux de texte sur l'axe horizontal. Si les étiquettes de texte des axes deviennent trop encombrées, le serveur peut décaler les étiquettes voisines vers le haut ou vers le bas afin de les rapprocher les uns des autres. Cette valeur indique le plus grand nombre de niveaux à utiliser. Le serveur peut en utiliser moins si les étiquettes peuvent tenir sans chevauchement. Pour les dates et les heures, la valeur par défaut est 1. Type:nombre Par défaut:2 | 
| hAxis.maxTextLines | Nombre maximal de lignes autorisé pour les libellés de texte. Les étiquettes peuvent s'étendre sur plusieurs lignes si elles sont trop longues. Par défaut, le nombre de lignes est limité par la hauteur de l'espace disponible. Type:nombre Par défaut:auto | 
| hAxis.minTextSpacing | Espacement horizontal minimal autorisé, en pixels, entre deux étiquettes de texte adjacentes. Si les étiquettes sont trop espacées ou trop longues, l'espacement peut descendre en dessous de ce seuil.Dans ce cas, l'une des mesures permettant de les simplifier est appliquée (par exemple, tronquer les étiquettes ou en supprimer certaines). Type:nombre Par défaut:la valeur de  hAxis.textStyle.fontSize | 
| hAxis.showTextEvery | Nombre de libellés sur l'axe horizontal à afficher, 1 signifiant "afficher tous les libellés", 2 signifiant "afficher tous les autres libellés", etc. La valeur par défaut consiste à essayer d'afficher autant de libellés que possible sans les chevauchements. Type:nombre Par défaut:automatique | 
| hAxis.viewWindow | Spécifie la plage de recadrage de l'axe horizontal. Type:objet Par défaut:null | 
| hAxis.viewWindow.max | 
          Index de ligne de base zéro à la fin de la fenêtre de recadrage. Les points de données à cet indice ou à un niveau supérieur seront rognés. Conjointement à  Ignoré lorsque  Type:nombre Par défaut:auto | 
| hAxis.viewWindow.min | 
          Index de ligne de base zéro à partir duquel la fenêtre de recadrage commence. Les points de données aux indices inférieurs seront recadrés. Conjointement à  Ignoré lorsque  Type:nombre Par défaut:auto | 
| taille | Hauteur du graphique, en pixels. Type:nombre Par défaut:hauteur de l'élément parent | 
| isStacked | Si la valeur est définie sur "true", les éléments sont empilés pour toutes les séries à chaque valeur de domaine. Remarque:Dans les graphiques Column, Area et SteppedArea, Google Charts inverse l'ordre des éléments de légende pour mieux correspondre à l'empilement des éléments de la série (par exemple, la série 0 sera l'élément de légende le plus bas). Cela ne s'applique pas aux graphiques à barres. 
      L'option  Les options pour  
 Pour un empilement à 100 %, la valeur calculée pour chaque élément apparaît dans l'info-bulle après sa valeur réelle. 
      L'axe cible utilise par défaut les valeurs de graduation basées sur l'échelle relative de 0 à 1 sous forme de fractions de 1 pour  
      L'empilement à 100% n'accepte que les valeurs de données de type  Type:booléen/chaîne Par défaut : "false" | 
| 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 : 
 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.position | Position de la légende. Les possibilités suivantes s'offrent à vous : 
 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> }
    
       Type:objet 
      Par défaut: 
        {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
       | 
| lineDashStyle | 
      Modèle on-et-off pour les lignes en pointillés. Par exemple,  Type:tableau de nombres Par défaut:null | 
| reverseCategories | Si cette règle est définie sur "True", la série est dessinée de droite à gauche. Par défaut, le tracé est de gauche à droite. Type:booléen Par défaut : "false" | 
| selectionMode | 
      Lorsque  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: 
 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: 
 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 : 
 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> }
    
       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  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. La valeur par défaut est "true" lorsque  Type:booléen Par défaut:automatique | 
| 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> }
    
       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: 
 Type:chaîne Par défaut : "focus" | 
| vAxes | 
      Spécifie les propriétés des axes verticaux individuels, si le graphique comporte plusieurs axes verticaux.
      Chaque objet enfant est un objet  
      Pour spécifier un graphique comportant plusieurs axes verticaux, commencez par définir un nouvel axe à l'aide de  
{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    
      Cette propriété peut être un objet ou un tableau. L'objet est un ensemble d'objets, chacun associé à un libellé numérique spécifiant l'axe qu'il définit. Il s'agit du format indiqué ci-dessus. Le tableau est un tableau d'objets, un par axe. Par exemple, la notation de tableau suivante est identique à l'objet  
vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    Type:tableau d'objet ou d'objet avec des objets enfants Par défaut:null | 
| 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 | 
       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:  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  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,  
 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  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  Type:nombre Valeur par défaut : -1 | 
| 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.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é  
 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> }
    
       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é  
      La fenêtre viewWindow est automatiquement développée pour inclure les graduations minimale et maximale, sauf si vous spécifiez un  Exemples : 
 Type:tableau d'éléments Par défaut:auto | 
| vAxis.title | 
 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> }
  
     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.
       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.
       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: 
 Type:chaîne 
      Par défaut:équivaut à "pretty", mais  vaxis.viewWindow.minetvaxis.viewWindow.maxsont 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  Type:nombre Par défaut:auto | 
| vAxis.viewWindow.min | Valeur minimale des données verticales à afficher. Ignoré lorsque  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  Return Type (Type renvoyé) : aucun | 
| getAction(actionID) | Renvoie l'objet d'action d'info-bulle avec l'élément  Type renvoyé:objet | 
| getBoundingBox(id) | 
      Renvoie un objet contenant les valeurs gauche, supérieure, largeur et hauteur de l'élément de graphique  
 Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé:objet | 
| getChartAreaBoundingBox() | Renvoie un objet contenant les valeurs de gauche, de haut, de largeur et de hauteur du contenu du graphique (à l'exclusion des libellés et des légendes): 
 Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé:objet | 
| getChartLayoutInterface() | Renvoie un objet contenant des informations sur l'emplacement à l'écran du graphique et de ses éléments. Les méthodes suivantes peuvent être appelées sur l'objet renvoyé: 
 Appelez-le après que le graphique est dessiné. Type renvoyé:objet | 
| getHAxisValue(xPosition, optional_axis_index) | 
      Renvoie la valeur de données horizontales à  Exemple :  Appelez-le après que le graphique est dessiné. Type renvoyé:nombre | 
| getImageURI() | Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après que le graphique est dessiné. Consultez la page Imprimer des graphiques PNG. Type renvoyé:chaîne | 
| getSelection() | 
      Renvoie un tableau des entités de graphique sélectionnées.
    
      Les entités sélectionnables sont les étapes, les entrées de légende et les catégories.
    
    
      
    Une étape correspond à une cellule de la table de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie à une ligne (l'index de colonne est nul).
    
    
      Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
    
      
         Type renvoyé:tableau d'éléments de sélection | 
| getVAxisValue(yPosition, optional_axis_index) | 
      Renvoie la valeur de données verticales à  Exemple :  Appelez-le après que le graphique est dessiné. Type renvoyé:nombre | 
| getXLocation(dataValue, optional_axis_index) | 
      Renvoie la coordonnée X en pixels de  Exemple :  Appelez-le après que le graphique est dessiné. Type renvoyé:nombre | 
| getYLocation(dataValue, optional_axis_index) | 
      Renvoie la coordonnée Y en pixels de  Exemple :  Appelez-le après que le graphique est dessiné. Type renvoyé:nombre | 
| removeAction(actionID) | Supprime l'action d'info-bulle avec l'élément  Type renvoyé: none | 
| setAction(action) | Définit une action d'info-bulle à exécuter lorsque l'utilisateur clique sur le texte de l'action. 
      La méthode  
      Toutes les actions d'info-bulle doivent être définies avant d'appeler la méthode  Type renvoyé: none | 
| setSelection() | 
      Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
    
      Les entités sélectionnables sont les étapes, les entrées de légende et les catégories.
    
    
      
    Une étape correspond à une cellule de la table de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie à une ligne (l'index de colonne est nul).
    
    
      Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
    
      
         Return Type (Type renvoyé) : aucun | 
| clearChart() | Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun | 
Événements
Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gérer les événements et Déclencher des événements.
| Nom | |
|---|---|
| animationfinish | Déclenché lorsque l'animation de transition est terminée. Propriétés:aucune | 
| click | Déclenché lorsque l'utilisateur clique dans le graphique. Permet de déterminer quand un utilisateur clique sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Propriétés:targetID | 
| error | Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. Propriétés:id, message | 
| legendpagination | Déclenché lorsque l'utilisateur clique sur les flèches de pagination de la légende. Renvoie l'index de page basé sur zéro actuel de la légende et le nombre total de pages. Properties (Propriétés) : currentPageIndex, totalPages | 
| onmouseover | Déclenché lorsque l'utilisateur pointe sur une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Propriétés:ligne, colonne | 
| onmouseout | Déclenché lorsque l'utilisateur éloigne le curseur de la souris d'une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Propriétés:ligne, colonne | 
| ready | 
      Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode  Propriétés:aucune | 
| select | 
      Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez  Propriétés:aucune | 
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.