Histogramme

Présentation

Un histogramme est un graphique qui regroupe les données numériques dans des bins et affiche les bins sous forme de colonnes segmentées. Ils servent à représenter la distribution d'un ensemble de données: la fréquence à laquelle les valeurs se situent dans des plages.

Google Charts choisit automatiquement le nombre de classes pour vous. Tous les bins ont la même largeur et leur hauteur est proportionnelle au nombre de points de données qu'ils contiennent. À d'autres égards, les histogrammes sont similaires aux graphiques à colonnes.

Exemple

Voici un histogramme des longueurs des dinosaures:

L'histogramme nous indique que le bac le plus courant est inférieur à 10 mètres, et qu'il n'y a qu'un seul dinosaure de plus de 40 mètres. Nous pouvons pointer sur la barre pour découvrir qu'il s'agit du Seismosaurus (qui n'est peut-être qu'un très grand Diplodocus ; les paléontologues ne le sont pas vraiment).

Le code permettant de générer cet histogramme est présenté ci-dessous. Après avoir défini les données (ici, avec google.visualization.arrayToDataTable), le graphique est défini avec un appel à google.visualization.Histogram et dessiné avec la méthode draw.

<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([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

        var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Les étiquettes (ici, les noms des dinosaures) peuvent être omises, auquel cas les info-bulles n'affichent que la valeur numérique.

Contrôler les couleurs

Voici un histogramme des populations nationales:

Il existe plus de 200 pays dont la population est inférieure à 100 millions d'habitants. Après cela, elle connaît une forte baisse de la population.

Cet histogramme utilise l'option colors pour afficher les données en vert:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

Comme pour tous les graphiques Google, les couleurs peuvent être spécifiées sous forme de noms anglais ou de valeurs hexadécimales.

Contrôler les buckets

Par défaut, Google Charts choisit automatiquement la taille du bucket à l'aide d'un algorithme bien connu pour les histogrammes. Cependant, il peut arriver que vous souhaitiez remplacer cette valeur. Le graphique ci-dessus en est un exemple. Avec autant de pays dans le premier bucket, il est difficile d'examiner ceux des autres.

Dans de telles situations, l'histogramme propose deux options: histogram.bucketSize, qui remplace l'algorithme et code en dur la taille du bucket, et histogram.lastBucketPercentile. La deuxième option nécessite plus d'explications: elle modifie le calcul des tailles de buckets pour ignorer les valeurs supérieures ou inférieures aux valeurs restantes selon le pourcentage que vous spécifiez. Les valeurs sont toujours incluses dans l'histogramme, mais n'affectent pas la façon dont elles sont réparties en buckets. Cela est utile lorsque vous ne souhaitez pas que les anomalies se retrouvent dans leurs propres buckets. Elles seront plutôt regroupées avec le premier ou le dernier bucket.

Dans le graphique ci-dessus, nous avons ignoré les cinq premières et les cinq % inférieurs des valeurs lors du calcul de la taille du bucket. Les valeurs sont toujours représentées sous forme de graphique. Seule la taille du bucket est modifiée, mais cela permet d'obtenir un histogramme plus lisible.

Cet exemple montre également comment modifier l'échelle de l'axe vertical pour utiliser l'échelle "logique en miroir", ce qui s'avère également utile lors de la représentation graphique de données ayant une longue traîne de valeurs faibles.

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

Comme vous pouvez le constater, la suppression des cinq % supérieurs et inférieurs du calcul donne lieu à une taille de bucket de 10 000 000 fois, au lieu des 100 000 000 qu'elle aurait été autrement. Si vous saviez depuis le début que la taille d'un bucket de 10 000 000 d'objets vous convenait, vous auriez pu utiliser la commande histogram.bucketSize pour effectuer cette opération:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

L'exemple suivant montre comment étendre la plage des buckets et afficher beaucoup plus de buckets sans écart entre eux. L'option maxNumBuckets peut être utilisée pour augmenter le nombre de buckets par défaut. Les options histogram.minValue et histogram.maxValue étendent la plage des buckets, mais si des données sont en dehors de cette plage, elles ne la réduisent pas.

Cet exemple montre également que vous pouvez spécifier les graduations à afficher pour chacun des buckets à l'aide de l'option ticks explicite pour hAxis. Cela n'affecte pas les buckets eux-mêmes, mais uniquement la façon dont les ticks sont affichés.

Notez également que nous spécifions chartArea.width de sorte que le nombre de buckets s'adapte plus précisément sans artefact visuel. Voici les options disponibles pour cet exemple.

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

Plusieurs séries

Voici un histogramme des charges des particules subatomiques selon le modèle standard:

Le graphique ci-dessus comporte une série contenant toutes les particules. Les particules subatomiques peuvent être divisées en quatre groupes: quarks, leptons et bosons. Considérons chacun d'entre eux comme une série distincte:

Dans ce graphique, nous utilisons une série différente (et donc une couleur) pour chacun des quatre types de particules subatomiques. Nous définissons explicitement interpolateNulls sur false pour nous assurer que les valeurs nulles (nécessaire car les séries sont de longueur inégale) ne sont pas tracées. Nous avons également défini legend.maxLines pour ajouter une autre ligne à la légende:

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

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

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

Format des données

Il existe deux façons de remplir un tableau de données d'histogramme. Lorsqu'il n'y a qu'une seule série:

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...et lorsqu'il existe plusieurs séries:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

Pour le moment, aucun rôle de colonne facultatif n'est compatible avec les histogrammes.

Options de configuration

Nom
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"
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).
bar.groupWidth
Largeur d'un groupe de barres, spécifiée dans l'un des formats suivants:
  • Pixels (50, par exemple)
  • Pourcentage de la largeur disponible pour chaque groupe (par exemple, "20%"), où "100%" signifie qu'il n'y a pas d'espace entre les groupes.
Type:nombre ou chaîne
Par défaut:golden ratio, environ "61,8%".
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
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"
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:

  • "données de référence" : permet de se concentrer sur un seul point de données. Correspond à une cellule du tableau de données.
  • "category" : regroupez tous les points de données sur le grand axe. Correspond à une ligne de la table de données.

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

Tableau de tailles (en tant que valeurs de données, et non en pixels) entre des lignes de quadrillage adjacentes. Pour le moment, cette option ne concerne que les axes numériques, mais elle est analogue aux options gridlines.units.<unit>.interval, qui ne sont utilisées que pour les dates et les heures. Pour les échelles linéaires, la valeur par défaut est [1, 2, 2.5, 5], ce qui signifie que les valeurs de la ligne de grille peuvent se trouver sur chaque unité (1), sur des unités paires (2) ou sur des multiples de 2,5 ou 5. Toute puissance 10 fois supérieure à ces valeurs est également prise en compte (par exemple, [10, 20, 25, 50] et [0,1, 0,2, 0,25, 0,5]). Pour les échelles logarithmiques, la valeur par défaut est [1, 2, 5].

Type:nombre compris entre 1 et 10, sans compter 10.
Par défaut:calculé
hAxis.gridlines.minSpacing

Espace minimal à l'écran, en pixels, entre les lignes de quadrillage principales de l'axe horizontal. La valeur par défaut pour le quadrillage principal est 40 pour les échelles linéaires et 20 pour les échelles logarithmiques. Si vous spécifiez count et non minSpacing, le minSpacing est calculé à partir du nombre. Inversement, si vous spécifiez minSpacing et non count, le nombre est calculé à partir de minSpacing. Si vous spécifiez les deux, minSpacing remplace.

Type:nombre
Par défaut:calculé
hAxis.gridlines.multiple

Toutes les valeurs des lignes de grille et des graduations doivent être un multiple de la valeur de cette option. Notez que, contrairement aux intervalles, les puissances 10 fois le multiple ne sont pas prises en compte. Vous pouvez donc forcer les graduations à être des entiers en spécifiant gridlines.multiple = 1, ou les forcer à être des multiples de 1 000 en spécifiant gridlines.multiple = 1000.

Type:nombre
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.interval

L'option mineurGridlines.interval est semblable à l'option d'intervalle de quadrillage principal, à la différence que l'intervalle choisi sera toujours un diviseur pair de l'intervalle de ligne de quadrillage principal. L'intervalle par défaut pour les échelles linéaires est [1, 1.5, 2, 2.5, 5]. Pour les échelles logarithmiques, il est de [1, 2, 5].

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

Espace minimal requis, en pixels, entre les lignes de quadrillage mineures adjacentes, et entre les lignes de quadrillage mineures et principales. La valeur par défaut est 1/2 du minSpacing des principaux quadrillages pour les échelles linéaires et 1/5 du minSpacing pour les échelles logarithmiques.

Type:nombre
Par défaut:computed
hAxis.minorGridlines.multiple

Identiques à celles des gridlines.multiple principaux.

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.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.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.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 hAxis.textPosition est défini sur "out" (valeur par défaut). La valeur par défaut est false pour les dates et les heures.

Type:booléen
Par défaut:automatique
hAxis.slantedTextAngle

Angle du texte de l'axe horizontal, s'il est incliné. Ignoré si hAxis.slantedText est défini sur false ou s'il est en mode automatique, et si le graphique a décidé de dessiner le texte horizontalement. Si l'angle est positif, la rotation est dans le sens inverse des aiguilles d'une montre. Si elle est négative, elle l'est dans le sens des aiguilles d'une montre.

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

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 à vAxis.viewWindowMode.min, il définit une plage semi-ouverte [min, max) qui indique les index d'éléments à afficher. En d'autres termes, chaque index tel que min <= index < max sera affiché.

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

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 à vAxis.viewWindowMode.max, il définit une plage semi-ouverte [min, max) qui indique les index d'éléments à afficher. En d'autres termes, chaque index tel que min <= index < max sera affiché.

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

Type:nombre
Par défaut:auto
histogram.bucketSize

Codez en dur la taille de chaque barre d'histogramme au lieu de la laisser être déterminée par un algorithme.

Type:nombre
Par défaut:auto
histogram.hideBucketItems

Omettez les fines divisions entre les blocs de l'histogramme pour en faire une série de barres pleines.

Type:booléen
Par défaut : "false"
histogram.lastBucketPercentile

Lors du calcul de la taille du bucket de l'histogramme, ignorez les lastBucketPercentile pour cent en haut et en bas. Les valeurs sont toujours incluses dans l'histogramme, mais n'affectent pas le binning.

Type:nombre
Par défaut:0
histogram.minValue

Étendez la plage de buckets pour inclure cette valeur.

Type:nombre
Par défaut:automatique (utiliser le minimum de données)
histogram.maxValue

Étendez la plage de buckets pour inclure cette valeur.

Type:nombre
Par défaut:auto (utiliser le maximum de données)
histogram.numBucketsRule

Découvrez comment calculer le nombre de buckets par défaut. Les valeurs possibles sont :

  • 'sqrt' : calcule la racine carrée du nombre de points de données.
  • 'sturges' : dérivé de la distribution binomiale. Suppose implicitement une distribution approximativement normale.
  • 'rice' : alternative plus simple à la règle de Sturges.
Pour en savoir plus, consultez Wikipédia – Histogramme: nombre de bins et largeur.

Type:chaîne
Par défaut:'sqrt'
taille

Hauteur du graphique, en pixels.

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

Indique s'il faut deviner la valeur des points manquants. Si la valeur est "true", il déduit la valeur des données manquantes en fonction des points voisins. Si la valeur est "false", un saut de ligne est laissé au point inconnu.

Cela n'est pas compatible avec les graphiques en aires avec l'option isStacked: true/'percent'/'relative'/'absolute'.

Type:booléen
Par défaut : "false"
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 isStacked est également compatible avec l'empilement à 100 %, où les piles d'éléments pour chaque valeur de domaine sont redimensionnées pour atteindre 100%.

Les options pour isStacked sont les suivantes:

  • false : les éléments ne s'empilent pas. Il s'agit de l'option par défaut.
  • true : empile les éléments de toutes les séries pour chaque valeur de domaine.
  • 'percent' : empile les éléments de toutes les séries à chaque valeur de domaine et les redimensionne de sorte que leur somme soit égale à 100%, la valeur de chaque élément étant calculée sous la forme d'un pourcentage de 100%.
  • 'relative' : empile les éléments de toutes les séries à chaque valeur de domaine et les redimensionne de sorte que leur somme soit égale à 1, la valeur de chaque élément étant calculée sous la forme d'une fraction de 1.
  • 'absolute' : fonctionne de la même manière que isStacked: true.

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 'relative' et de 0 à 100% pour 'percent'. Remarque:lorsque vous utilisez l'option 'percent', les valeurs de l'axe et des graduations sont affichées sous forme de pourcentages, tandis que les valeurs réelles correspondent aux valeurs d'échelle relatives de 0 à 1. En effet, les graduations de l'axe en pourcentage sont le résultat de l'application d'un format de "#.##%" aux valeurs d'échelle relatives 0-1. Lorsque vous utilisez isStacked: 'percent', veillez à spécifier les graduations/gridlines à l'aide des valeurs d'échelle relatives (0-1). Vous pouvez personnaliser les valeurs du quadrillage/de graduation ainsi que la mise en forme à l'aide des options hAxis/vAxis appropriées.

L'empilement à 100% n'accepte que les valeurs de données de type number et doit avoir une référence égale à zéro.

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 :

  • "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>}
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"
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"
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.
  • targetAxisIndex : axe auquel attribuer cette série, où 0 est l'axe par défaut et 1 l'axe opposé. La valeur par défaut est 0. Définissez-la sur 1 pour définir un graphique dans lequel différentes séries sont affichées sur différents axes. Au moins une série doit être allouée à l'axe par défaut. Vous pouvez définir une échelle différente pour différents axes.
  • 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.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 focusTarget est défini sur "category". Sinon, la valeur par défaut est "false".

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

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.
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 vAxis et peut contenir toutes les propriétés compatibles avec vAxis. Ces valeurs remplacent les paramètres globaux d'une même propriété.

Pour spécifier un graphique comportant plusieurs axes verticaux, commencez par définir un nouvel axe à l'aide de series.targetAxisIndex, puis configurez-le à l'aide de vAxes. L'exemple suivant attribue la série 2 à l'axe de droite et spécifie un titre et un style de texte personnalisés:

{
  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 vAxis présenté ci-dessus:

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

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

Tableau de tailles (en tant que valeurs de données, et non en pixels) entre des lignes de quadrillage adjacentes. Pour le moment, cette option ne concerne que les axes numériques, mais elle est analogue aux options gridlines.units.<unit>.interval, qui ne sont utilisées que pour les dates et les heures. Pour les échelles linéaires, la valeur par défaut est [1, 2, 2.5, 5], ce qui signifie que les valeurs de la ligne de grille peuvent se trouver sur chaque unité (1), sur des unités paires (2) ou sur des multiples de 2,5 ou 5. Toute puissance 10 fois supérieure à ces valeurs est également prise en compte (par exemple, [10, 20, 25, 50] et [0,1, 0,2, 0,25, 0,5]). Pour les échelles logarithmiques, la valeur par défaut est [1, 2, 5].

Type:nombre compris entre 1 et 10, sans compter 10.
Par défaut:calculé
vAxis.gridlines.minSpacing

Espace minimal à l'écran, en pixels, entre les lignes de quadrillage principales de l'axe horizontal. La valeur par défaut pour le quadrillage principal est 40 pour les échelles linéaires et 20 pour les échelles logarithmiques. Si vous spécifiez count et non minSpacing, le minSpacing est calculé à partir du nombre. Inversement, si vous spécifiez minSpacing et non count, le nombre est calculé à partir de minSpacing. Si vous spécifiez les deux, minSpacing remplace.

Type:nombre
Par défaut:calculé
vAxis.gridlines.multiple

Toutes les valeurs des lignes de grille et des graduations doivent être un multiple de la valeur de cette option. Notez que, contrairement aux intervalles, les puissances 10 fois le multiple ne sont pas prises en compte. Vous pouvez donc forcer les graduations à être des entiers en spécifiant gridlines.multiple = 1, ou les forcer à être des multiples de 1 000 en spécifiant gridlines.multiple = 1000.

Type:nombre
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.interval

L'option mineurGridlines.interval est semblable à l'option d'intervalle de quadrillage principal, à la différence que l'intervalle choisi sera toujours un diviseur pair de l'intervalle de ligne de quadrillage principal. L'intervalle par défaut pour les échelles linéaires est [1, 1.5, 2, 2.5, 5]. Pour les échelles logarithmiques, il est de [1, 2, 5].

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

Espace minimal requis, en pixels, entre les lignes de quadrillage mineures adjacentes, et entre les lignes de quadrillage mineures et principales. La valeur par défaut est 1/2 du minSpacing des principaux quadrillages pour les échelles linéaires et 1/5 du minSpacing pour les échelles logarithmiques.

Type:nombre
Par défaut:computed
vAxis.minorGridlines.multiple

Identiques à celles des gridlines.multiple principaux.

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 les barres, les entrées de légende et les catégories. 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 les barres, les entrées de légende et les catégories. 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. Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul).

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. Une barre correspond à une cellule du tableau de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul).

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