L’API GoogleCharts évènements et options de configuration

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

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

La largeur de la bordure, en pixels.

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

Un objet avec des membres pour configurer le placement et la taille de la zone de graphique (où le graphique lui-même est dessiné, à l’exclusion des axes et des légendes). Deux formats sont pris en charge : 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: la couleur, fournie sous forme de chaîne hexadécimale ou de nom de couleur en anglais.
• strokeWidth: si fourni, dessine une bordure autour de la zone du graphique de la largeur donnée (et avec la couleur de stroke).

Jusqu’où dessiner le graphique à partir de la bordure gauche.

Jusqu’où dessiner le graphique à partir de la bordure supérieure.

Largeur de la zone graphique.

Hauteur de la zone graphique.

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

Si le graphique lance des événements basés sur l’utilisateur ou réagit à l’interaction de l’utilisateur. Si false, le graphique ne lancera pas d’événements “select” ou d’autres événements basés sur l’interaction (mais lancera des événements prêts ou d’erreur), et n’affichera pas de texte de survol ou ne changera pas en fonction de l’entrée de l’utilisateur.

La taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer cela en utilisant les propriétés d’éléments de graphique spécifiques.

La police par défaut pour tout le texte du graphique. Vous pouvez remplacer cela en utilisant les propriétés d’éléments de graphique spécifiques.

Dessine le graphique à l’intérieur d’un cadre en ligne. (Notez que sur IE8, cette option est ignorée ; tous les graphiques IE8 sont dessinés dans des i-frames.)

Hauteur du graphique, en pixels.

Si vrai, affiche un graphique en trois dimensions.

Un objet avec des membres pour 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 illustré ici :

Alignement de la légende. Il peut s’agir de l’un des éléments suivants :

• ‘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 sont relatifs au style (vertical ou horizontal) de la légende. Par exemple, dans une légende « droite », « début » et « fin » sont respectivement en haut et en bas ; pour une légende “haut”, “début” et “fin” seraient 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 “centre” ; les autres légendes sont par défaut ‘start’.

Position de la légende. Il peut s’agir de l’un des éléments suivants :

• ‘bottom’ – Affiche la légende sous le graphique.
• ‘labelled’ – Dessine des lignes reliant les tranches à leurs valeurs de données.
• ‘left’ – Affiche la légende à gauche du graphique.
• ‘none’ – N’affiche aucune légende.
• ‘right’ – Affiche la légende à droite du graphique.
• ‘top’ – Affiche la légende au-dessus du graphique.

Nombre maximum de lignes dans la légende. Réglez-le 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 rendues est toujours en évolution.

Cette option ne fonctionne actuellement que lorsque legend.position est ‘top’.

Objet qui spécifie le style de texte de la légende. L’objet a ce format :

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

Il colorpeut s’agir de n’importe quelle chaîne de couleur HTML, par exemple : 'red'ou
'#00cc00'. Voir aussi fontNameet fontSize.

Si entre 0 et 1, affiche un graphique en anneau. Le trou a un rayon égal à
numberfois le rayon du graphique.

La couleur des bordures de la tranche. Applicable uniquement lorsque le graphique est en deux dimensions.

Le contenu du texte affiché sur la tranche. Il peut s’agir de l’un des éléments suivants :

• ‘percentage’ – Le pourcentage de la taille de la tranche par rapport au total.
• ‘value’ – La valeur quantitative de la tranche.
• ‘label’ – Le nom de la tranche.
• ‘none’ – Aucun texte n’est affiché.

Objet qui spécifie le style de texte de tranche. L’objet a ce format :

Il colorpeut s’agir de n’importe quelle chaîne de couleur HTML, par exemple : 'red'ou
'#00cc00'. Voir aussi fontNameet fontSize.

Angle, en degrés, de rotation du graphique. La valeur par défaut de 0orientera le bord le plus à gauche de la première tranche directement vers le haut.

Si vrai, dessine des tranches dans le sens antihoraire. La valeur par défaut est de dessiner dans le sens des aiguilles d’une montre.

Couleur de la tranche de combinaison qui contient toutes les tranches en dessous
de sliceVisibilityThreshold.

Une étiquette pour la tranche de combinaison qui contient toutes les tranches en dessous
de sliceVisibilityThreshold .

Un tableau d’objets, chacun décrivant le format de la tranche correspondante dans le graphique. Pour utiliser les valeurs par défaut d’une tranche, spécifiez un objet vide (c’est-à-dire {}). Si une tranche ou une valeur n’est pas spécifiée, la valeur globale sera utilisée. Chaque objet prend en charge les propriétés suivantes :

• color– La couleur à utiliser pour cette tranche. Spécifiez une chaîne de couleur HTML valide.
• offset – À quelle distance séparer la tranche du reste du gâteau, de 0,0 (pas du tout) à 1,0 (le rayon du gâteau).
• textStyle– Remplace le global pieSliceTextStylepour cette tranche.

Vous pouvez spécifier soit un tableau d’objets, dont chacun s’applique à la tranche dans l’ordre indiqué, soit vous pouvez spécifier un objet où chaque enfant a une clé numérique indiquant à quelle tranche il s’applique. Par exemple, les deux déclarations suivantes sont identiques et déclarent la première tranche en noir et la quatrième en rouge :

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
    slices: {0: {color: 'black'}, 3: {color: 'red'}}
          

La valeur fractionnaire du camembert, en dessous de laquelle une tranche ne s’affichera pas individuellement. Toutes les tranches qui n’ont pas dépassé ce seuil seront combinées en une seule tranche “Autre”, dont la taille est la somme de toutes leurs tailles. La valeur par défaut est de ne pas afficher individuellement les tranches inférieures à un demi-degré.

// combined into an “Other” slice.
sliceVisibilityThreshold: .25

Texte à afficher au-dessus du graphique.

Objet qui spécifie le style de texte du titre. L’objet a ce format :

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

Il colorpeut s’agir de n’importe quelle chaîne de couleur HTML, par exemple : 'red'ou
'#00cc00'. Voir aussi fontNameet fontSize.

Un objet avec des membres pour 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 illustré ici :

{textStyle: {color: '#FF0000'}, showColorCode: true}

S’il est défini sur true, permet au dessin des info-bulles de s’écouler en dehors des limites du graphique sur tous les côtés.

Remarque : Cela ne s’applique qu’aux info-bulles HTML. Si cette option est activée avec les info-bulles SVG, tout débordement en dehors des limites du graphique sera rogné. Voir
Personnalisation du contenu des info-bulles
pour plus de détails.

Si défini sur true, utilisez les info-bulles au format HTML (plutôt qu’au format SVG). Voir
Personnalisation du contenu des info-bulles
pour plus de détails.

Remarque : la personnalisation du contenu de l’info-bulle HTML via le
rôle de données de colonne d’info -bulle
n’est pas prise en charge par la
visualisation
dugraphique à bulles .

Si vrai, affiche des carrés de couleur à côté des informations sur la tranche dans l’info-bulle.

Quelles informations afficher lorsque l’utilisateur survole un secteur. Les valeurs suivantes sont prises en charge :

• ‘both’ – [ Default ] Affiche à la fois la valeur absolue de la tranche et le pourcentage de l’ensemble.
• ‘value’ – Affiche uniquement la valeur absolue de la tranche.
• ‘percentage’ – Affiche uniquement le pourcentage de l’ensemble représenté par la tranche.

Un objet qui spécifie le style de texte de l’info-bulle. L’objet a ce format :

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

Il colorpeut s’agir de n’importe quelle chaîne de couleur HTML, par exemple : 'red'ou
'#00cc00'. Voir aussi fontNameet fontSize.

L’interaction de l’utilisateur qui provoque l’affichage de l’info-bulle :

• ‘focus’ – L’info-bulle s’affiche lorsque l’utilisateur survole l’élément.
• ‘none’ – L’info-bulle ne sera pas affichée.
• ‘selection’ – L’info-bulle s’affiche lorsque l’utilisateur sélectionne l’élément.

Largeur du graphique, en pixels.

Fired when transition animation is complete.

Déclenché lorsque l’utilisateur clique à l’intérieur du graphique. Peut être utilisé pour identifier quand le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les étiquettes sont cliqués.

Lancé lorsqu’une erreur se produit lors de la tentative de rendu du graphique.

Déclenché lorsque l’utilisateur passe la souris sur une entité visuelle. Repasse les indices de ligne et de colonne de l’élément de table de données correspondant. Une entrée de tranche ou de légende correspond à une ligne dans la table de données (l’index de colonne est nul).

Déclenché lorsque l’utilisateur s’éloigne d’une entité visuelle. Repasse les indices de ligne et de colonne de l’élément de table de données correspondant. Une entrée de tranche ou de légende correspond à une ligne dans la table de données (l’index de colonne est nul).

Le graphique est prêt pour les appels de méthodes 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 drawméthode et 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().