Présentation
Un histogramme est un graphique qui regroupe les données numériques dans les bins et affiche les bins sous forme de colonnes segmentées. Ils sont utilisés pour représenter la distribution d'un ensemble de données, c'est-à-dire la fréquence à laquelle les valeurs se situent dans des plages.
Google Charts choisit automatiquement le nombre de bacs à votre place. Tous les bins ont la même largeur et ont une hauteur proportionnelle au nombre de points de données qu'ils contiennent. À d'autres égards, les histogrammes sont semblables aux graphiques à colonnes.
Exemple
Voici un histogramme de la longueur des dinosaures:
L'histogramme nous indique que la poubelle la plus courante est inférieure à 10 mètres et qu'il n'y a qu'un seul dinosaure de plus de 40 mètres. Nous pouvons survoler la barre pour découvrir qu'il s'agit du Seismosaurus (ce qui pourrait être un très grand diplodocus, les paléontologues n'en sont pas sûrs).
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 libellés (ici, les noms de dinosaures) peuvent être omis, auquel cas les info-bulles n'afficheront que la valeur numérique.
Contrôler des couleurs
Voici un histogramme des populations nationales:
Il existe plus de 200 pays dont la population est inférieure à 100 millions d'habitants, puis de graves embouteillages s'envolent après.
Cet histogramme utilise l'option colors
pour dessiner 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 des 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 ce comportement, et le graphique ci-dessus en soit un exemple. Avec autant de pays dans le premier bucket, il est difficile d'examiner ceux des autres.
Dans de telles situations, le graphique d'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 davantage 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 spécifié. Les valeurs sont toujours incluses dans l'histogramme, mais n'affectent pas la façon dont elles sont réparties dans les buckets. Cette fonctionnalité est utile lorsque vous ne souhaitez pas que les anomalies se retrouvent dans leurs propres buckets. Elles sont regroupées avec le premier ou le dernier bucket à la place.
Dans le graphique ci-dessus, nous avons ignoré les cinq pour cent et les cinq pour cent les plus bas des valeurs lors du calcul de la taille du bucket. Les valeurs sont toujours représentées dans un graphique. Seule la taille du bucket a été modifiée, mais elle permet d'obtenir un histogramme plus lisible.
Cet exemple montre également comment modifier l'échelle de l'axe vertical pour utiliser l'échelle "journal en miroir", ce qui est également utile lors de la création de graphiques à partir d'une longue traîne de petites valeurs.
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
Comme vous pouvez le constater, la suppression des 5 % supérieurs et inférieurs du calcul a conduit à une taille de bucket de 10 000 000 au lieu de 100 000 000. Si vous savez depuis le début qu'une taille de bucket de 10 000 000 est celle que vous souhaitez, vous auriez pu utiliser histogram.bucketSize
pour cela:
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 espace entre eux. Vous pouvez utiliser l'option maxNumBuckets
pour augmenter le nombre de buckets par défaut. Les options histogram.minValue
et histogram.maxValue
permettent d'étendre la plage des buckets. Toutefois, s'il existe des données en dehors de cette plage, ces options 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 explicite ticks
pour hAxis
. Cela n'affecte pas les buckets eux-mêmes, mais uniquement la manière dont les graduations sont affichées.
Notez également que nous spécifions chartArea.width
afin que le nombre de buckets s'adapte plus précisément sans artefacts visuels. Voici les options de 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 } };
Séries multiples
Voici un histogramme des frais associés aux particules subatomiques, selon le modèle standard :
Le graphique ci-dessus contient 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'eux sa propre série:
Dans ce graphique, nous utilisons une série différente (et donc une couleur) pour chacun des quatre types de particules subatomiques. Nous avons explicitement défini interpolateNulls
sur false
pour nous assurer que les valeurs nulles (nécessaires en raison de la longueur inégale de la série) ne sont pas tracées. Nous avons également défini legend.maxLines
pour ajouter une 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, ...], ... ]);
Aucun rôle de colonne facultatif n'est compatible avec les histogrammes pour le moment.
Options de configuration
Nom | |
---|---|
durée.animation |
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"
|
animation.startup |
Détermine si le graphique doit s'animer lors du tracé initial. Si la valeur est Type : booléen
Valeur par défaut : false
|
Position de l'axe |
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 : "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 : "blanc"
|
Largeur du groupe |
Largeur d'un groupe de barres, spécifiée dans l'un des formats suivants:
Type : nombre ou chaîne
Par défaut : taux d'or (environ 61,8 %).
|
zone du graphique |
Objet avec des membres permettant de configurer l'emplacement et la taille de la zone du graphique (à l'endroit où le graphique est dessiné, à l'exclusion de l'axe et des légendes) Deux formats sont acceptés: un nombre, ou un nombre suivi du pourcentage. Un nombre simple est une valeur en pixels ; un nombre suivi de % est un pourcentage. Exemple : 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 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 : "blanc"
|
chartArea.gauche |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure de gauche Type:nombre ou chaîne
Par défaut:auto
|
chartArea.top |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure supérieure. Type : nombre ou chaîne
Par défaut:auto
|
chartArea.width |
Largeur de la zone du graphique. Type : nombre ou chaîne
Par défaut:auto
|
chartArea.height |
Hauteur de la zone de graphique Type:nombre ou chaîne
Par défaut:auto
|
couleurs |
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
|
opacité des données |
Transparence des points de données, 1.0 étant complètement opaque et 0.0 complètement transparente. Dans les graphiques à nuage de points, d'histogrammes, à barres et à colonnes, il s'agit des données visibles: les points dans le graphique à nuage de points et les rectangles dans les autres. Dans les graphiques où la sélection des données crée un point, tel que les graphiques en courbes et en aires, il s'agit des cercles qui apparaissent lors du survol ou de la sélection. 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 courbe de tendance, consultez la section Opacité de la courbe de tendance. Type:nombre
Par défaut:1.0
|
ActiverInteractivité |
Indique si le graphique génère des événements utilisateur ou réagit aux interactions des utilisateurs. Si la valeur est "false", le graphique ne génère pas de "sélection" ni d'autres événements basés sur les interactions (mais lancera des événements prêts ou d'erreur). Il n'affichera pas de texte au passage de la souris ni ne changera d'une autre manière selon l'entrée utilisateur. Type : booléen
Par défaut:true
|
cible |
Type d'entité qui reçoit le curseur de la souris. Affecte également l'entité sélectionnée par clic de la souris et l'élément du tableau de données associé aux événements. Il peut s'agir de l'un des éléments suivants:
Dans "targetTarget", la catégorie "target" contient toutes les valeurs de la catégorie. Cela peut être utile pour comparer les valeurs de différentes séries. Type:chaîne
Par défaut : "datum"
|
Taille de police |
Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type : nombre
Par défaut : automatique
|
Nom de la police |
Police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type : chaîne
Par défaut : "Arial"
|
Forcer le cadre iFrame |
Dessine le graphique dans un cadre intégré. (Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres iFrame.) Type:booléen
Par défaut:false
|
Axe |
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 de littéral 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 de littéral d'objet, comme indiqué ci-dessous: {color: '#333', minSpacing: 20} Type : objet
Par défaut : null
|
hAxis.gridlines.color |
Couleur du quadrillage horizontal 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 Type : nombre
Par défaut : -1
|
hAxis.gridlines.interval |
Tableau de tailles (sous forme de valeurs de données et non de pixels) entre les lignes adjacentes. Cette option ne concerne que les axes numériques pour le moment, mais elle est analogue aux options Type : nombre compris entre 1 et 10, à l'exception de 10.
Par défaut : calculée
|
hAxis.gridlines.minSpacing |
Espace minimal d'affichage en pixels entre les quadrillages principaux de l'axe.
La valeur par défaut pour les principales lignes de quadrillage est Type : nombre
Par défaut : calculée
|
hAxis.gridlines.multiple |
Toutes les valeurs de quadrillage et de graduation doivent être un multiple de la valeur de cette option. Notez que, contrairement aux intervalles, les puissances 10 fois supérieures au multiple ne sont pas prises en compte.
Vous pouvez donc forcer les ticks à être des entiers en spécifiant Type:nombre
Par défaut : 1
|
hAxis.gridlines.units |
Remplace le format par défaut pour différents aspects des types de données de date/heure/heure de la journée lorsqu'il est utilisé avec un quadrillage calculé par 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*/]}, } } Pour en savoir plus, consultez Dates et heures. Type:objet
Par défaut : null
|
hAxis.minorGridlines |
Objet avec des membres permettant de configurer le quadrillage mineur sur l'axe horizontal, semblable à l'option hAxis.gridlines. Type:objet
Par défaut : null
|
hAxis.minorGridlines.color |
Couleur du quadrillage mineur horizontal dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type:chaîne
Par défaut : un mélange de quadrillages et de couleurs d'arrière-plan
|
hAxis.minorGridlines.count |
L'option Type : nombre
Par défaut : 1
|
hAxis.minorGridlines.interval |
L'option minorGridlines.interval est semblable à l'option d'intervalle de quadrillage principal, mais l'intervalle choisi est toujours un diviseur pair de l'intervalle de quadrillage principal.
L'intervalle par défaut pour les échelles linéaires est de Type : nombre
Par défaut:1
|
hAxis.minorGridlines.minSpacing |
Espace minimal requis, en pixels, entre les lignes de quadrillage secondaires adjacentes et les lignes de quadrillage mineures et principales. La valeur par défaut est 0, 5 fois l'intervalle minimal entre les principales lignes de quadrillage pour les échelles linéaires et 1/5 minSpacing pour les échelles logarithmiques. Type : nombre
Par défaut:calculé
|
hAxis.minorGridlines.multiple |
Identique à Type:nombre
Par défaut:1
|
hAxis.minorGridlines.units |
Remplace le format par défaut pour divers aspects des types de données de date/heure/heure d'exécution lorsqu'il est utilisé avec un graphique "gridline" calculé à partir 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*/]}, } } Pour en savoir plus, consultez 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> }
Le Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
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> }
Le Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
Si la valeur est "false", les étiquettes les plus externes sont masquées au lieu d'être recadrées par le conteneur du graphique. Si la valeur est "true", cela autorise le recadrage du libellé. Type:booléen
Par défaut : false
|
hAxis.slantedText |
Si la valeur est "true", dessinez le texte de l'axe horizontal à angle droit afin de faciliter l'ajustement. Si la valeur est "false", dessinez le texte de l'axe horizontal à la verticale. Par défaut, le texte est incliné si la ligne ne peut pas être parfaitement alignée. Notez que cette option n'est disponible que lorsque la valeur de 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 du texte de l'axe sont trop encombrées, le serveur peut déplacer les étiquettes voisines vers le haut ou vers le bas pour les rapprocher. Cette valeur spécifie le nombre maximal de niveaux à utiliser. Le serveur peut utiliser moins de niveaux si les libellés peuvent être mis en place 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ées pour les libellés textuels. Les libellés peuvent s'étendre sur plusieurs lignes s'ils sont trop longs. 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, en pixels, autorisé entre deux libellés textuels adjacents. Si les libellés sont trop espacés ou s'ils sont trop longs, l'espacement peut descendre en dessous de ce seuil.Dans ce cas, l'une des mesures de désidentification des libellés est appliquée (par exemple, il est possible de tronquer les libellés ou d'en supprimer certains). Type:nombre
Par défaut:la valeur de
hAxis.textStyle.fontSize |
hAxis.showTextEvery |
Nombre d'étiquettes à afficher sur l'axe horizontal : 1 signifiant chaque étiquette, 2 signifie toutes les autres étiquettes, etc. Par défaut, nous essayons d'afficher autant d'étiquettes que possible sans chevauchement. Type:nombre
Par défaut:automatique
|
hAxis.viewWindowMode |
Indique 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:
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 basé sur zéro à la fin de la fenêtre de recadrage. Les points de données à cet indice et aux niveaux supérieurs seront tronqués. Conjointement avec Ignoré lorsque le champ " Type:nombre
Par défaut:auto
|
hAxis.viewWindow.min |
Index de ligne basé sur zéro au début de la fenêtre de recadrage. Les points de données associés à des indices inférieurs seront recadrés. Conjointement avec Ignoré lorsque le champ " Type : nombre
Par défaut:auto
|
histogramme.bucketSize |
Codez en dur la taille de chaque barre d'histogramme, plutôt que de laisser l'algorithme déterminer ce qu'il faut. Type:nombre
Par défaut : auto
|
histogramme.hideBucketItems |
Évitez les fines divisions entre les blocs de l'histogramme, ce qui en fait une série de barres continues. Type : booléen
Par défaut : false
|
histogramme.lastBucketPercentile |
Lorsque vous calculez la taille du bucket de l'histogramme, ignorez les valeurs de Type:nombre
Par défaut : 0
|
Valeur histogramme.minValue |
Élargissez la plage de buckets pour inclure cette valeur. Type : nombre
Par défaut : utiliser les données min.
|
histogramme.maxValue |
Élargissez la plage de buckets pour inclure cette valeur. Type : nombre
Par défaut:utiliser les données max.
|
histogramme.numBucketsRule |
Calculer le nombre de buckets par défaut Les valeurs possibles sont les suivantes :
Type:chaîne
Par défaut :
'sqrt' |
hauteur |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément conteneur.
|
Nulles interpolées |
Indique s'il s'agit de déterminer la valeur des points manquants. Si la valeur est "true", elle devine la valeur de toutes les données manquantes en fonction des points voisins. Si la valeur est "false", un saut de ligne est laissé au point inconnu.
Cette option n'est pas compatible avec les graphiques en aires avec l'option Type:booléen
Par défaut : false
|
empilé |
Si ce paramètre est défini sur "true", les éléments sont empilés pour toutes les séries à chaque valeur de domaine. Remarque:Dans les graphiques Colonne, Superficie et Étape 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îtra dans l'info-bulle après sa valeur réelle.
Par défaut, l'axe cible coche les valeurs en fonction de l'échelle 0-1 relative 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 de littéral d'objet, comme indiqué ci-dessous: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type:objet
Par défaut : null
|
légende.alignement |
Alignement de la légende. Les possibilités suivantes s'offrent à vous :
Le début, le centre et la fin se rapportent au style (vertical ou horizontal) de la légende. Par exemple, dans une légende "à droite", "start" et "end" sont respectivement en haut et en bas. Pour une légende "top", "start" et "end" sont respectivement situés à gauche et à droite de la zone. La valeur par défaut dépend de la position de la légende. Pour les légendes de bas de page, la valeur par défaut est "center". Les autres légendes sont définies par défaut sur "start". Type : chaîne
Par défaut : automatique
|
légende.maxLines |
Nombre maximal de lignes dans la légende. Définissez ce nombre sur un nombre supérieur à un pour ajouter des lignes à votre légende. Remarque: La logique exacte utilisée pour déterminer le nombre réel de lignes à afficher est toujours en flux. Cette option ne fonctionne actuellement que lorsque légende.position est "haut". Type : nombre
Par défaut : 1
|
légende.pageIndex |
Index de page base zéro sélectionné de la légende. Type : nombre
Par défaut : 0
|
légende.position |
Position de la légende. Les possibilités suivantes s'offrent à vous :
Type:chaîne
Par défaut : "right"
|
légende.texteStyle |
Objet spécifiant le style de légende. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
orientation |
Orientation du graphique. Lorsque ce paramètre est défini sur Type : chaîne
Par défaut : "horizontal"
|
catégories inversées |
Si cette règle est définie sur "true", les séries sont tracées de droite à gauche. Par défaut, il faut dessiner de gauche à droite. Type : booléen
Par défaut : false
|
series |
Tableau d'objets, chacun décrivant le format de la série correspondante dans le graphique. Pour utiliser les valeurs par défaut d'une série, spécifiez un objet vide {}. Si vous ne spécifiez pas de série ou de valeur, 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 spécifier un objet dans lequel chaque enfant possède une clé numérique indiquant la série à laquelle 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 (objets avec 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 de graphique ou un effet visuel spécifique. Actuellement, un seul thème est disponible:
Type : chaîne
Par défaut : null
|
title |
Texte à afficher au-dessus du graphique. Type:chaîne
Par défaut:pas de titre
|
titrePosition |
Emplacement du titre du graphique par rapport à la zone du graphique. Valeurs acceptées :
Type:chaîne
Par défaut : "out"
|
titreTexteStyle |
Objet spécifiant le style du titre. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le 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-bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {textStyle: {color: '#FF0000'}, showColorCode: true} Type:objet
Par défaut : null
|
tooltip.isHtml |
Si la valeur est "true", utilisez les info-bulles au format HTML (plutôt qu'au format 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 de la colonne d'info-bulles n'est pas compatible avec la visualisation Graphique à bulles. Type:booléen
Par défaut : false
|
tooltip.showColorCode |
Si la valeur est "true", des carrés de couleur sont affichés à côté des informations de la série dans l'info-bulle. La valeur par défaut est "true" (vrai) 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> }
Le 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"
|
Axes |
Spécifie les propriétés de chaque axe vertical, si le graphique comporte plusieurs axes verticaux.
Chaque objet enfant est un objet
Pour spécifier un graphique avec plusieurs axes verticaux, définissez d'abord 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 une collection d'objets, chacun avec un libellé numérique qui spécifie 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 style tableau suivante est identique à l'objet vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Type:tableau d'objets ou 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 de littéral d'objet, comme indiqué ci-dessous: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type : objet
Par défaut : null
|
vAxis.baseline (vaxis.baseline) |
Type : nombre
Par défaut:automatique
|
vAxis.baselineColor |
Indique la couleur de la référence pour l'axe vertical. Il peut s'agir de n'importe quelle chaîne de couleur HTML, par exemple: Type:nombre
Par défaut : "noir"
|
v.axe.direction |
Sens de croissance des valeurs le long de l'axe vertical. Par défaut, les valeurs basses figurent au bas du graphique. Spécifiez Type:1 ou -1
Par défaut : 1
|
vAxis.format |
Chaîne de format pour les libellés de l'axe numérique. Il s'agit d'un sous-ensemble de l'ensemble de modèles d'ICU.
Par exemple,
La mise en forme réellement appliquée au libellé provient des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec un paramètre régional spécifique.
Pour calculer les valeurs de graduation et les lignes de quadrillage, plusieurs combinaisons de toutes les options de quadrillage concernées seront prises en compte si les graduations de formes formatées 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 de littéral 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. Spécifiez une chaîne de couleur HTML valide. Type : chaîne
Par défaut : "#CCC"
|
v.axe.gridlines.count |
Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique.
Si vous spécifiez un nombre positif pour Type:nombre
Par défaut : -1
|
vAxis.gridlines.interval |
Tableau de tailles (sous forme de valeurs de données et non de pixels) entre les lignes adjacentes. Cette option ne concerne que les axes numériques pour le moment, mais elle est analogue aux options Type:nombre compris entre 1 et 10, à l'exception de 10.
Par défaut:calculée
|
vAxis.gridlines.minSpacing |
Espace minimal d'affichage en pixels entre les quadrillages principaux de l'axe.
La valeur par défaut pour les principales lignes de quadrillage est Type : nombre
Par défaut:calculée
|
vAxis.gridlines.multiple |
Toutes les valeurs de quadrillage et de graduation doivent être un multiple de la valeur de cette option. Notez que, contrairement aux intervalles, les puissances 10 fois supérieures au multiple ne sont pas prises en compte.
Vous pouvez donc forcer les ticks à être des entiers en spécifiant Type : nombre
Par défaut:1
|
vAxis.gridlines.units |
Remplace le format par défaut pour différents aspects des types de données de date/heure/heure de la journée lorsqu'il est utilisé avec un quadrillage calculé par 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*/]} } } Pour en savoir plus, consultez 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 du quadrillage vertical vertical dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type:chaîne
Par défaut:un mélange de quadrillages et de couleurs d'arrière-plan
|
vAxis.minorGridlines.count |
L'option minorGridlines.count est principalement obsolète, sauf pour désactiver les lignes mineures mineures en définissant le nombre sur 0. Le nombre de lignes de quadrillage mineures dépend de l'intervalle entre les lignes principales (voir vAxis.gridlines.interval) et l'espace minimal requis (voir vAxis.minorGridlines.minSpacing). Type:nombre
Par défaut:1
|
vAxis.minorGridlines.interval |
L'option minorGridlines.interval est semblable à l'option d'intervalle de quadrillage principal, mais l'intervalle choisi est toujours un diviseur pair de l'intervalle de quadrillage principal.
L'intervalle par défaut pour les échelles linéaires est de Type : nombre
Par défaut:1
|
vAxis.minorGridlines.minSpacing |
Espace minimal requis, en pixels, entre les lignes de quadrillage secondaires adjacentes et les lignes de quadrillage mineures et principales. La valeur par défaut est 0, 5 fois l'intervalle minimal entre les principales lignes de quadrillage pour les échelles linéaires et 1/5 minSpacing pour les échelles logarithmiques. Type:nombre
Par défaut:calculé
|
vAxis.minorGridlines.multiple |
Identique à Type : nombre
Par défaut:1
|
vAxis.minorGridlines.units |
Remplace le format par défaut pour divers aspects des types de données de date/heure/heure d'exécution lorsqu'il est utilisé avec un graphique "gridline" calculé à partir 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*/]}, } } Pour en savoir plus, consultez 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 (vAxis.scaleType) |
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 (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> }
Le Type : objet
Par défaut :
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Remplace les graduations générées automatiquement par l'axe Y par le tableau spécifié. Chaque élément du tableau doit être une valeur de tick valide (un nombre, une date, une date/heure ou une heure) ou un objet. S'il s'agit d'un objet, il doit posséder une propriété
La fenêtre d'affichage est automatiquement étendue pour inclure les graduations minimale et maximale, sauf si vous spécifiez une valeur pour Exemples :
Type : tableau d'éléments
Par défaut:auto
|
vAxis.title |
Type : chaîne
Par défaut : pas de 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> }
Le 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. Cette valeur est plus élevée dans la plupart des graphiques. 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
|
Valeur minimale |
Déplace la valeur minimale de l'axe vertical vers la valeur spécifiée. Cette valeur est descendante dans la plupart des graphiques. Ignoré si ce paramètre est défini 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.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 le champ " Type:nombre
Par défaut:auto
|
vAxis.viewWindow.min |
Valeur minimale des données verticales à afficher. Ignoré lorsque le champ " Type:nombre
Par défaut:auto
|
largeur |
Largeur du graphique, en pixels. Type : nombre
Par défaut : largeur de l'élément conteneur
|
Méthodes
Méthode | |
---|---|
draw(data, options) |
Dessine le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type de retour) : aucun
|
getAction(actionID) |
Renvoie l'objet d'action info-bulle avec le Return Type : objet
|
getBoundingBox(id) |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type:objet
|
getChartAreaBoundingBox() |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" dans le contenu du graphique (c'est-à-dire, à l'exclusion des libellés et de la légende):
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type:objet
|
getChartLayoutInterface() |
Renvoie un objet contenant des informations sur l'emplacement à l'écran du graphique et de ses éléments. Les méthodes suivantes peuvent être appelées sur l'objet renvoyé:
Appelez-le après le graphique. Return Type : objet
|
getHAxisValue(xPosition, optional_axis_index) |
Renvoie la valeur de données horizontale à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getImageURI() |
Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après le graphique. Consultez Imprimer des graphiques PNG. Type de retour:chaîne
|
getSelection() |
Affiche un tableau des entités de graphique sélectionnées.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi:tableau des éléments de sélection
|
getVAxisValue(yPosition, optional_axis_index) |
Renvoie la valeur de données verticales à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getXLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée X du pixel de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getYLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée Y en pixels de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
removeAction(actionID) |
Supprime l'action d'info-bulle avec le Type de retour :
none |
setAction(action) |
Définit une action d'info-bulle à exécuter lorsque l'utilisateur clique sur le texte de l'action.
La méthode
Toutes les actions de l'info-bulle doivent être définies avant d'appeler la méthode Type de retour :
none |
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Pour ce graphique, une seule entité peut être sélectionnée à la fois.
Return Type (Type de retour) : aucun
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gestion des événements et Déclenchement d'événements.
Nom | |
---|---|
animationfinish |
Déclenché lorsque l'animation de transition est terminée. Properties (Propriétés) : aucune
|
click |
Déclenché lorsque l'utilisateur clique dans le graphique Permet d'identifier le clic sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Properties (Propriétés) : targetID
|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
legendpagination |
Déclenché lorsque l'utilisateur clique sur les flèches de pagination de la légende Transmet l'index de page basé sur la légende actuelle et le nombre total de pages. Properties (Propriétés) : currentPageIndex, totalPages
|
onmouseover |
Déclenché lorsque l'utilisateur passe la souris sur une entité visuelle. Transmet les index de ligne et de colonne de l'élément du tableau de données correspondant. Une barre est associée à une cellule du tableau 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). Properties (Propriétés) : ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur d'une entité visuelle Transmet les index de ligne et de colonne de l'élément de table de données correspondant. Une barre est associée à une cellule du tableau 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). Properties (Propriétés) : ligne, colonne
|
ready |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles relatives aux données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.