Visualisation: Graphique à bulles

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

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.

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.

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.

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.

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

Largeur de la bordure, en pixels.

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

Objet avec des membres permettant de configurer les propriétés visuelles des bulles.

Opacité des bulles, où 0 correspond à une transparence totale et 1 à une opacité totale.

Couleur du trait des bulles.

Objet qui spécifie le style du texte en bulle. L'objet a le format suivant:

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

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

Distance à partir de la bordure gauche du graphique

Distance à partir de la bordure supérieure du graphique

Largeur de la zone du graphique.

Hauteur de la zone de graphique.

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

Objet qui spécifie une correspondance entre les valeurs des colonnes de couleur et les couleurs, ou une échelle de dégradé. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

Si ce champ est présent, il indique une valeur minimale pour les données de couleur du graphique. Les valeurs de données de couleur de cette valeur et des valeurs inférieures seront affichées en tant que première couleur dans la plage colorAxis.colors.

S'il est présent, spécifie une valeur maximale pour les données de couleur du graphique. Les valeurs de données de couleur supérieures ou égales à cette valeur seront affichées en tant que dernière couleur de la plage colorAxis.colors.

Le cas échéant, contrôle la manière dont les valeurs sont associées aux couleurs. Chaque valeur est associée à la couleur correspondante dans le tableau colorAxis.colors. Ces valeurs s'appliquent aux données de couleur du graphique. La coloration est effectuée selon un dégradé des valeurs spécifiées ici. Si vous ne spécifiez pas de valeur pour cette option, cela équivaut à spécifier [minValue, maxValue].

Couleurs à attribuer aux valeurs de la visualisation. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: colorAxis: {colors:['red','#004411']}. Vous devez définir au moins deux valeurs. Le dégradé inclura toutes vos valeurs, ainsi que les valeurs intermédiaires calculées, la première couleur étant la plus petite valeur et la dernière couleur la plus élevée.

Objet qui spécifie le style de la légende de la couleur de dégradé.

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

• "top" : au-dessus du graphique.
• "bottom" : sous le graphique.
• 'in' : dans la partie supérieure du graphique.
• "none" : aucune légende ne s'affiche.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

Chaîne de format pour les étiquettes numériques. Il s'agit d'un sous-ensemble de l' ensemble de modèles ICU . Par exemple, {numberFormat:'.##'} affiche les valeurs "10.66", "10.6" et "10.0" pour les valeurs 10.666, 10.6 et 10.

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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

Base de l'axe horizontal.

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

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

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.

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}

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

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.

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.

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.

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

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

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.

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

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

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

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

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.

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

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

Exemples :

• hAxis: { ticks: [5,10,15,20] }
• hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
• hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
• hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

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

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.

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

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

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.

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

Valeur maximale des données horizontales à afficher.

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

Valeur minimale des données horizontales à afficher.

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

Hauteur du graphique, en pixels.

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

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

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

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

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.

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.

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

Objet d'objets, où les clés sont des noms de séries (valeurs de la colonne "Couleur") et où chaque objet décrit le format de la série correspondante dans le graphique. Si aucune série ou valeur n'est spécifiée, la valeur globale est 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.
• 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".

series: {'Europe': {color: 'green'}}

Objet avec des membres permettant de configurer la manière dont les valeurs sont associées à la taille des bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous:

 {minValue: 0,  maxSize: 20}

Rayon maximal de la bulle la plus grande possible (en pixels).

Valeur de taille (telle qu'affichée dans les données du graphique) à mapper avec sizeAxis.maxSize. Les valeurs supérieures seront recadrées pour atteindre cette valeur.

Rayon minimal de la bulle la plus petite possible (en pixels).

Valeur de taille (telle qu'affichée dans les données du graphique) à mapper avec sizeAxis.minSize. Les valeurs inférieures seront recadrées à cette valeur.

Si la valeur est "true", les bulles sont triées par taille afin que les plus petites apparaissent au-dessus des plus grandes. Si la valeur est "false", les bulles sont triées en fonction de leur ordre dans le tableau de données.

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

Texte à afficher au-dessus du graphique.

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.

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.

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}

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.

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.

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

• "sélectionner" : l'info-bulle s'affiche lorsque l'utilisateur pointe sur l'élément.
• "none" : l'info-bulle ne s'affiche pas.
• "selection" : l'info-bulle s'affiche lorsque l'utilisateur sélectionne l'élément.

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

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.

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

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.

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.

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}

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

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.

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.

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

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

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

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.

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

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.

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

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.

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

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

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.

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

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

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.

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

Valeur maximale des données verticales à afficher.

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

Valeur minimale des données verticales à afficher.

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

Largeur du graphique, en pixels.

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.

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

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

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

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

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

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.

Renvoie un tableau des entités de graphique sélectionnées. Les entités sélectionnables sont des bulles. Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

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

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

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

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

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 :

Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente. Les entités sélectionnables sont des bulles. Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois. Extended description .

Efface le graphique et libère toutes les ressources allouées.

Déclenché lorsque l'animation de transition est terminée.

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.

Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique.

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.

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 bulle correspond à une ligne de la table de données (l'index de colonne est nul).

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 bulle correspond à une ligne de la table de données (l'index de colonne est nul).

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.

Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez getSelection().