Présentation
Les graphiques à barres Google sont affichés dans le navigateur à l'aide du format SVG ou VML, en fonction du navigateur de l'utilisateur. Comme tous les graphiques Google, les graphiques à barres affichent des info-bulles lorsque l'utilisateur pointe sur les données. Pour obtenir une version verticale de ce graphique, consultez le graphique à colonnes.
Exemples
Colorer des barres
Modifions les densités de quatre métaux précieux:
Ci-dessus, toutes les couleurs sont le bleu par défaut. En effet, tous ces éléments font partie de la même série. S'il existait une deuxième série, elle aurait été colorée en rouge. Nous pouvons personnaliser ces couleurs avec le rôle de style:
Il existe trois façons différentes de choisir les couleurs, qui sont toutes présentées dans notre tableau de données: les valeurs RVB, les noms de couleurs en anglais et une déclaration de type CSS:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Styles de barre
Le rôle de style vous permet de contrôler plusieurs aspects de l'apparence des barres à l'aide de déclarations de type CSS:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Nous vous déconseillons de mélanger trop librement les styles dans un graphique. Choisissez-en un et respectez-le. Toutefois, pour illustrer tous les attributs de style, voici un exemple:
Les deux premières barres utilisent chacune un color
spécifique (la première avec un nom en anglais, la seconde avec une valeur RVB). Aucun élément opacity
n'a été choisi. Par conséquent, la valeur par défaut 1.0 (entièrement opaque) est utilisée. C'est pourquoi la deuxième barre masque la grille derrière. Dans la troisième barre, un opacity
de 0,2 est utilisé, révélant la ligne de la grille. Dans la quatrième barre, trois attributs de style sont utilisés: stroke-color
et stroke-width
pour dessiner la bordure, et fill-color
pour spécifier la couleur du rectangle à l'intérieur. La barre la plus à droite utilise également stroke-opacity
et fill-opacity
pour choisir les opacités de la bordure et du remplissage:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Barres d'étiquetage
Les graphiques ont plusieurs types de libellés, tels que les libellés de coches, de légende et les libellés dans les info-bulles. Dans cette section, nous verrons comment placer des étiquettes à l'intérieur (ou à proximité) des barres d'un graphique à barres.
Supposons que nous voulions annoter chaque barre avec le symbole chimique approprié. Pour ce faire, nous pouvons utiliser le rôle annotation:
Dans la table de données, nous définissons une nouvelle colonne avec { role:
'annotation' }
pour contenir nos libellés de barre:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Bien que les utilisateurs puissent pointer sur les barres pour afficher les valeurs de données, vous pouvez les inclure dans les barres elles-mêmes:
Ceci est un peu plus compliqué qu'il ne devrait l'être, car nous créons un DataView
pour spécifier l'annotation pour chaque barre.
<script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } </script> <div id="barchart_values" style="width: 900px; height: 300px;"></div>
Si nous voulons mettre en forme la valeur différemment, nous pourrions définir un formateur et l'encapsuler dans une fonction comme celle-ci:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Ensuite, nous pouvons l'appeler avec calc: getValueAt.bind(undefined, 1)
.
Si le libellé est trop grand pour tenir entièrement à l'intérieur de la barre, il s'affiche à l'extérieur:
Graphiques à barres empilées
Un graphique à barres empilées est un graphique à barres qui place des valeurs associées les unes au-dessus des autres. S'il existe des valeurs négatives, elles sont empilées dans l'ordre inverse sous la référence de l'axe du graphique. Les graphiques à barres empilées sont généralement utilisés lorsqu'une catégorie se divise naturellement en composants. Par exemple, considérons des ventes hypothétiques de livres, divisées par genre et comparées sur la durée:
Pour créer un graphique à barres empilées, définissez l'option isStacked
sur true
:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true };
Les graphiques à barres empilées sont également compatibles avec l'empilement à 100 %, c'est-à-dire que les piles d'éléments pour chaque valeur de domaine sont redimensionnées de manière à atteindre un total de 100%. Pour cela, les options sont isStacked: 'percent'
, qui met en forme chaque valeur en tant que pourcentage de 100%, et isStacked: 'relative'
, qui met en forme chaque valeur sous la forme d'une fraction de 1. Il existe également une option isStacked: 'absolute'
, qui est fonctionnellement équivalente à isStacked: true
.
Notez que dans le graphique empilé à 100% de droite, les valeurs des graduations sont basées sur l'échelle relative 0-1 sous forme de fractions de 1, mais les valeurs des axes sont affichées sous forme de pourcentages. En effet, les graduations de l'axe en pourcentage sont le résultat de l'application d'un format de "#.##%" aux valeurs d'échelle relatives 0-1. Lorsque vous utilisez isStacked: 'percent'
, veillez à spécifier toutes les graduations à l'aide de l'échelle relative de 0 à 1.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Créer des graphiques à barres Material
En 2014, Google a annoncé des consignes destinées à assurer une apparence commune à toutes ses propriétés et applications (telles que les applications Android) exécutées sur les plates-formes Google. Nous appelons cette initiative Material Design. Nous fournissons des versions "matériel" de tous nos graphiques principaux ; vous pouvez les utiliser si vous aimez leur apparence.
La création d'un graphique à barres Material est semblable à la création d'un graphique à barres "classique". Vous chargez l'API Google Visualization (bien qu'avec le package 'bar'
au lieu du package 'corechart'
), définissez votre table de données, puis créez un objet (mais avec la classe google.charts.Bar
au lieu de google.visualization.BarChart
).
Remarque:Les graphiques Material ne fonctionnent pas dans les anciennes versions d'Internet Explorer. (IE8 et les versions antérieures ne sont pas compatibles avec SVG, ce qui est nécessaire avec les graphiques Material).
Les graphiques à barres Material offrent de nombreuses améliorations mineures par rapport aux graphiques à barres classiques, y compris une palette de couleurs améliorée, des angles arrondis, une mise en forme des libellés plus claire, un espacement par défaut plus serré entre les séries, des lignes de grille et des titres plus souples (et l'ajout de sous-titres).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="barchart_material" style="width: 900px; height: 500px;"></div> </body> </html>
Les graphiques Material Charts sont en version bêta. L'apparence et l'interactivité sont en grande partie définitives, mais de nombreuses options disponibles dans les graphiques classiques ne sont pas encore disponibles. Vous trouverez une liste des options qui ne sont pas encore prises en charge dans ce problème.
De plus, la façon dont les options sont déclarées n'est pas finalisée. Par conséquent, si vous utilisez l'une des options classiques, vous devez la convertir en options Material en remplaçant la ligne suivante :
chart.draw(data, options);
...par ce qui suit :
chart.draw(data, google.charts.Bar.convertOptions(options));
L'utilisation de google.charts.Bar.convertOptions()
vous permet de bénéficier de certaines fonctionnalités, telles que les options prédéfinies hAxis/vAxis.format
.
Graphiques Dual-X
Remarque:Les axes doubles X ne sont disponibles que pour les graphiques Material (c'est-à-dire ceux avec le package bar
).
Parfois, vous pouvez afficher deux séries dans un graphique à barres, avec deux axes x indépendants: un axe supérieur pour une série et un axe inférieur pour une autre:
Notez que non seulement nos deux axes x sont étiquetés différemment ("parsecs" et "magnitude apparente"), mais qu'ils ont chacun leurs propres échelles et lignes de quadrillage indépendantes. Si vous souhaitez personnaliser ce comportement, utilisez les options hAxis.gridlines
.
Dans le code ci-dessous, les options axes
et series
spécifient l'apparence double X du graphique. L'option series
spécifie l'axe à utiliser pour chacun ('distance'
et 'brightness'
; ils ne doivent pas nécessairement avoir de relation avec les noms des colonnes dans le tableau de données). L'option axes
transforme ensuite ce graphique en graphique double X, en plaçant l'axe 'apparent magnitude'
en haut et l'axe 'parsecs'
en bas.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Classements des X premiers
Remarque:Les axes X supérieurs ne sont disponibles que pour les graphiques Material (c'est-à-dire ceux avec le package bar
).
Si vous souhaitez placer les libellés et le titre de l'axe X en haut de votre graphique plutôt qu'en bas, vous pouvez le faire dans les graphiques Material avec l'option axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="top_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
Chargement...
Le nom du package google.charts.load
est "corechart"
.
Le nom de classe de la visualisation est google.visualization.BarChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
Pour les graphiques à barres Material, le nom du package google.charts.load
est "bar"
.
Le nom de classe de la visualisation est google.charts.Bar
.
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Format des données
Lignes:chaque ligne du tableau représente un groupe de barres.
Columns:
Colonne 0 | Colonne 1 | ... | Colonne N | |
---|---|---|---|---|
Objectif : |
|
Valeurs de la barre 1 dans ce groupe | ... | Barre N valeurs dans ce groupe |
Type de données : | Nombre | ... | Nombre | |
Rôle : | domaine | Données | ... | Données |
Rôles de colonne facultatifs: | ... |
Options de configuration
Nom | |
---|---|
animation.duration |
Durée de l'animation, en millisecondes. Pour en savoir plus, consultez la documentation sur les animations. Type:nombre
Par défaut:0
|
animation.easing |
Fonction de lissage de vitesse appliquée à l'animation. Les options suivantes sont disponibles :
Type:chaîne
Par défaut : "linear" (linéaire).
|
animation.startup |
Détermine si le graphique doit s'animer lors du dessin initial. Si la valeur est Type:booléen
Valeur par défaut "false"
|
annotations.alwaysOutside |
Dans les graphiques à barres et
à colonnes, si la valeur est définie sur Type:booléen
Par défaut : "false"
|
annotations.datum |
Pour les graphiques compatibles avec les annotations, l'objet
annotations.datum vous permet d'ignorer le choix de Google Charts pour les annotations fournies pour des éléments de données individuels (comme les valeurs affichées avec chaque barre d'un graphique à barres). Vous pouvez contrôler la couleur avec annotations.datum.stem.color , la longueur de la tige avec annotations.datum.stem.length et le style avec annotations.datum.style .
Type:objet
Par défaut:la couleur est "black", la longueur est de 12 et le style est "point".
|
annotations.domain |
Pour les graphiques compatibles avec les annotations, l'objet
annotations.domain vous permet d'ignorer le choix de Google Charts pour les annotations fournies pour un domaine (l'axe principal du graphique, comme l'axe X d'un graphique en courbes classique). Vous pouvez contrôler la couleur avec annotations.domain.stem.color , la longueur de la tige avec annotations.domain.stem.length et le style avec annotations.domain.style .
Type:objet
Par défaut:la couleur est "black", la longueur est de 5 et le style est "point".
|
annotations.boxStyle |
Pour les graphiques compatibles avec les annotations, l'objet var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Cette option est actuellement disponible pour les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Il n'est pas compatible avec le graphique sur les annotations. Type:objet
Par défaut:null
|
annotations.highContrast |
Pour les graphiques compatibles avec les annotations, la valeur booléenne
annotations.highContrast vous permet d'ignorer le choix de la couleur d'annotation par Google Charts. Par défaut, annotations.highContrast est défini sur "true". Les graphiques sélectionnent donc une couleur d'annotation offrant un bon contraste: couleurs claires sur les fonds sombres et foncées sur les fonds clairs. Si vous définissez annotations.highContrast sur "false" et ne spécifiez pas votre propre couleur d'annotation, Google Charts utilise la couleur de série par défaut pour l'annotation:
Type:booléen
Valeur par défaut : "true"
|
annotations.stem |
Pour les graphiques compatibles avec les annotations, l'objet
annotations.stem vous permet d'ignorer le choix de Google Charts pour le style racine. Vous pouvez contrôler la couleur avec annotations.stem.color et la longueur de la tige avec annotations.stem.length . Notez que l'option de longueur de la tige n'a aucun effet sur les annotations avec le style 'line' : pour les annotations de plan de référence 'line' , la longueur de la tige est toujours identique à celle du texte. Pour les annotations de domaine 'line' , la longueur du pied s'étend sur l'ensemble du graphique.
Type:objet
Par défaut:la couleur est "black". La longueur est de 5 pour les annotations de domaine et de 12 pour les annotations de plans de référence.
|
annotations.style |
Pour les graphiques compatibles avec les annotations, l'option
annotations.style vous permet d'ignorer le type d'annotation choisi par Google Charts. Il peut s'agir de 'line' ou de 'point' .
Type:chaîne
Par défaut : "point"
|
annotations.textStyle |
Pour les graphiques compatibles avec les annotations, l'objet
annotations.textStyle contrôle l'apparence du texte de l'annotation:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Cette option est actuellement disponible pour les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Il n'est pas compatible avec le graphique d'annotations . Type:objet
Par défaut:null
|
axisTitlesPosition |
l'emplacement des titres des axes par rapport à la zone du graphique ; Valeurs acceptées :
Type:chaîne
Par défaut : "out"
|
backgroundColor |
Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une simple chaîne de couleur HTML, par exemple Type:chaîne ou objet
Par défaut : "white" (blanc).
|
backgroundColor.stroke |
Couleur de la bordure du graphique, sous forme de chaîne de couleur HTML. Type:chaîne
Par défaut : "#666"
|
backgroundColor.strokeWidth |
Largeur de la bordure, en pixels. Type:nombre
Par défaut:0
|
backgroundColor.fill |
Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML. Type:chaîne
Par défaut : "white" (blanc).
|
bar.groupWidth |
Largeur d'un groupe de barres, spécifiée dans l'un des formats suivants:
Type:nombre ou chaîne
Par défaut:golden ratio, environ "61,8%".
|
barres |
Indique si les barres d'un graphique à barres Material sont verticales ou horizontales. Cette option n'a aucun effet sur les graphiques à barres classiques ni sur les graphiques à colonnes classiques. Type : "horizontal" ou "vertical"
Par défaut : "vertical"
|
chartArea |
Objet avec des membres permettant de configurer l'emplacement et la taille de la zone de graphique (où le graphique est dessiné, à l'exception des axes et des légendes). Deux formats sont acceptés: un nombre ou un nombre suivi de %. Un nombre simple est une valeur en pixels. Un nombre suivi de % est un pourcentage. Exemple : Type:objet
Par défaut:null
|
chartArea.backgroundColor |
Couleur d'arrière-plan de la zone de graphique Lorsqu'une chaîne est utilisée, il peut s'agir d'une chaîne hexadécimale (par exemple, "#fdc") ou d'un nom de couleur anglais. Lorsqu'un objet est utilisé, les propriétés suivantes peuvent être fournies:
Type:chaîne ou objet
Par défaut : "white" (blanc).
|
chartArea.left |
Distance à partir de la bordure gauche du graphique Type:nombre ou chaîne
Par défaut:auto
|
chartArea.top |
Distance à partir de la bordure supérieure du graphique Type:nombre ou chaîne
Par défaut:auto
|
chartArea.width |
Largeur de la zone du graphique. Type:nombre ou chaîne
Par défaut:auto
|
chartArea.height |
Hauteur de la zone de graphique. Type:nombre ou chaîne
Par défaut:auto
|
chart.subtitle |
Pour les graphiques Material, cette option spécifie le sous-titre. Seuls les graphiques Material Charts sont compatibles avec les sous-titres. Type:chaîne
Par défaut:null
|
chart.title |
Pour les graphiques Material, cette option indique le titre. Type:chaîne
Par défaut:null
|
colors |
Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML, par exemple: Type:tableau de chaînes
Par défaut:couleurs par défaut
|
dataOpacity |
Transparence des points de données, 1,0 étant complètement opaque et 0,0 totalement transparent. Dans les graphiques à nuage de points, les histogrammes, les barres et les colonnes, cela fait référence aux données visibles: points dans le graphique à nuage de points et rectangles dans les autres. Dans les graphiques où la sélection de données crée un point (comme les graphiques en courbes et en aires), il s'agit des cercles qui s'affichent lorsque l'utilisateur pointe dessus ou sélectionne un élément. Le graphique combiné présente les deux comportements, et cette option n'a aucun effet sur les autres graphiques. Pour modifier l'opacité d'une ligne de tendance, consultez Opacité de la ligne de tendance . Type:nombre
Par défaut:1.0
|
enableInteractivity |
Indique si le graphique génère des événements basés sur l'utilisateur ou réagit à une interaction utilisateur. Si la valeur est définie sur "false", le graphique ne génère pas d'événements de type "select" ou d'autres événements basés sur une interaction (mais génère des événements "prêts" ou d'erreur), et n'affiche pas le texte de l'info-bulle ni ne change en fonction de l'entrée utilisateur. Type:booléen
Valeur par défaut : "true"
|
explorer |
L'option 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). Type:objet
Par défaut:null
|
explorer.actions |
L'explorateur de graphiques Google permet d'effectuer trois actions:
Type:tableau de chaînes
Par défaut : ['dragToPan', 'rightClickToReset']
|
explorer.axis |
Par défaut, les utilisateurs peuvent effectuer un panoramique à la fois horizontalement et verticalement lorsque l'option Type:chaîne
Par défaut:panoramique horizontal et vertical
|
explorer.keepInBounds |
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 Type:booléen
Par défaut : "false"
|
explorer.maxZoomIn |
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 Type:nombre
Par défaut:0,25
|
explorer.maxZoomOut |
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 Type:nombre
Par défaut:4
|
explorer.zoomDelta |
Lorsque les utilisateurs font un zoom avant ou arrière, Type:nombre
Valeur par défaut:1,5
|
focusTarget |
Type de l'entité sélectionnée au passage de la souris. Affecte également l'entité sélectionnée par un clic de souris et l'élément de tableau de données associé à des événements. Il peut s'agir de l'un des éléments suivants:
Dans "category" dans focusTarget, l'info-bulle affiche toutes les valeurs de catégorie. Cela peut être utile pour comparer les valeurs de différentes séries. Type:chaîne
Par défaut : "datum"
|
fontSize |
Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique. Type:nombre
Par défaut:automatique
|
fontName |
Type de police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre à l'aide des propriétés de certains éléments du graphique. Type:chaîne
Par défaut : "Arial"
|
forceIFrame |
Dessine le graphique dans un cadre intégré. Notez que dans IE8, cette option est ignorée, car tous les graphiques IE8 sont dessinés dans des i-frames. Type:booléen
Par défaut : "false"
|
hAxes |
Spécifie les propriétés des axes horizontaux individuels, si le graphique comporte plusieurs axes horizontaux. Chaque objet enfant est un objet
Pour spécifier un graphique comportant plusieurs axes horizontaux, commencez par définir un nouvel axe à l'aide de
Cette propriété peut être un objet ou un tableau. L'objet est un ensemble d'objets, chacun associé à un libellé numérique spécifiant l'axe qu'il définit. Il s'agit du format indiqué ci-dessus. Le tableau est un tableau d'objets, un par axe. Par exemple, la notation de tableau suivante est identique à l'objet hAxes: { {}, // Nothing specified for axis 0 { title:'Losses', textStyle: { color: 'red' } } // Axis 1 Type:tableau d'objet ou d'objet avec des objets enfants
Par défaut:null
|
hAxis |
Objet avec des membres permettant de configurer divers éléments de l'axe horizontal. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Type:objet
Par défaut:null
|
hAxis.baseline |
Base de l'axe horizontal. Type:nombre
Par défaut:automatique
|
hAxis.baselineColor |
Couleur de la référence de l'axe horizontal. Peut correspondre à n'importe quelle chaîne de couleur HTML, par exemple : Type:nombre
Par défaut : "black" (noir)
|
hAxis.direction |
Sens de croissance des valeurs le long de l'axe horizontal. Spécifiez Type:1 ou -1
Par défaut : 1
|
hAxis.format |
Chaîne de format pour les libellés numériques des axes. Il s'agit d'un sous-ensemble de l'
ensemble de modèles ICU
. Par exemple,
La mise en forme réelle appliquée au libellé est dérivée des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec des paramètres régionaux spécifiques .
Lors du calcul des valeurs de graduation et des lignes de quadrillage, plusieurs combinaisons alternatives de toutes les options de graduation pertinentes sont prises en compte, et les alternatives sont rejetées si les étiquettes de graduation mises en forme sont dupliquées ou se chevauchent.
Vous pouvez donc spécifier Type:chaîne
Par défaut:auto
|
hAxis.gridlines |
Objet avec des propriétés permettant de configurer le quadrillage sur l'axe horizontal. Notez que le quadrillage de l'axe horizontal est dessiné verticalement. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: {color: '#333', minSpacing: 20} Type:objet
Par défaut:null
|
hAxis.gridlines.color |
Couleur des lignes de quadrillage horizontales dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type:chaîne
Par défaut : "#CCC"
|
hAxis.gridlines.count |
Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique.
Si vous spécifiez un nombre positif pour Type:nombre
Valeur par défaut : -1
|
hAxis.gridlines.units |
Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec le quadrillage calculé de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Des informations supplémentaires sont disponibles dans Dates et heures. Type:objet
Par défaut:null
|
hAxis.minorGridlines |
Objet avec des membres permettant de configurer les lignes de quadrillage mineures sur l'axe horizontal, de la même manière que l'option hAxis.gridlines. Type:objet
Par défaut:null
|
hAxis.minorGridlines.color |
Couleur des lignes de quadrillage mineures horizontales dans la zone de graphique. Spécifiez une chaîne de couleur HTML valide. Type:chaîne
Par défaut:mélange des couleurs du quadrillage et de l'arrière-plan
|
hAxis.minorGridlines.count |
L'option Type:nombre
Par défaut:1
|
hAxis.minorGridlines.units |
Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec les minorGridlines calculés dans un graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Des informations supplémentaires sont disponibles dans Dates et heures. Type:objet
Par défaut:null
|
hAxis.logScale |
Propriété Type:booléen
Par défaut : "false"
|
hAxis.scaleType |
Propriété
Type:chaîne
Valeur par défaut: null
|
hAxis.textStyle |
Objet spécifiant le style de texte de l'axe horizontal. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.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.ticks |
Remplace les graduations automatiques de l'axe X par le tableau spécifié. Chaque élément du tableau doit être une valeur de graduation valide (comme un nombre, une date, une date et une heure ou une heure de la journée) ou un objet. S'il s'agit d'un objet, il doit comporter une propriété
La fenêtre viewWindow est automatiquement développée pour inclure les graduations minimale et maximale, sauf si vous spécifiez un Exemples :
Type:tableau d'éléments
Par défaut:auto
|
hAxis.title |
Type:chaîne
Par défaut:null
|
hAxis.titleTextStyle |
Objet spécifiant le style de texte du titre de l'axe horizontal. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
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.
Type:nombre
Par défaut:automatique
|
hAxis.minValue |
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.
Type:nombre
Par défaut:automatique
|
hAxis.viewWindowMode |
Spécifie comment mettre à l'échelle l'axe horizontal pour afficher les valeurs dans la zone du graphique. Les valeurs de chaîne suivantes sont acceptées:
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 |
Valeur maximale des données horizontales à afficher. Ignoré lorsque Type:nombre
Par défaut:auto
|
hAxis.viewWindow.min |
Valeur minimale des données horizontales à afficher. Ignoré lorsque Type:nombre
Par défaut:auto
|
taille |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément parent
|
isStacked |
Si la valeur est définie sur "true", les éléments sont empilés pour toutes les séries à chaque valeur de domaine. Remarque:Dans les graphiques Column, Area et SteppedArea, Google Charts inverse l'ordre des éléments de légende pour mieux correspondre à l'empilement des éléments de la série (par exemple, la série 0 sera l'élément de légende le plus bas). Cela ne s'applique pas aux graphiques à barres.
L'option Les options pour
Pour un empilement à 100 %, la valeur calculée pour chaque élément apparaît dans l'info-bulle après sa valeur réelle.
L'axe cible utilise par défaut les valeurs de graduation basées sur l'échelle relative de 0 à 1 sous forme de fractions de 1 pour
L'empilement à 100% n'accepte que les valeurs de données de type Type:booléen/chaîne
Par défaut : "false"
|
légende |
Objet avec des membres permettant de configurer divers aspects de la légende. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type:objet
Par défaut:null
|
legend.pageIndex |
Index de page basé sur zéro initial sélectionné pour la légende. Type:nombre
Par défaut:0
|
legend.position |
Position de la légende. Les possibilités suivantes s'offrent à vous :
Type:chaîne
Par défaut : "right" (droite)
|
legend.alignment |
Alignement de la légende. Les possibilités suivantes s'offrent à vous :
Le début, le centre et la fin dépendent du style (vertical ou horizontal) de la légende. Par exemple, dans une légende "droite", "début" et "fin" se trouvent respectivement en haut et en bas. Pour une légende "haut", "début" et "fin" se trouvent respectivement à gauche et à droite de la zone. La valeur par défaut dépend de la position de la légende. Pour les légendes "bas", la valeur par défaut est "center" ; les autres légendes sont "start" (début). Type:chaîne
Par défaut:automatique
|
legend.textStyle |
Objet qui spécifie le style du texte de la légende. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
reverseCategories |
Si cette règle est définie sur "True", la série est dessinée de bas en haut. Par défaut, le tracé est de haut en bas. Type:booléen
Par défaut : "false"
|
orientation |
Orientation du graphique. Si la valeur est Type:chaîne
Par défaut : "horizontal"
|
séries |
Tableau d'objets, chacun décrivant le format de la série correspondante dans le graphique. Si vous souhaitez utiliser des valeurs par défaut pour une série, spécifiez un objet vide {}. Si aucune série ou valeur n'est spécifiée, la valeur globale sera utilisée. Chaque objet accepte les propriétés suivantes:
Vous pouvez spécifier un tableau d'objets, chacun s'appliquant à la série dans l'ordre indiqué, ou un objet dans lequel chaque enfant possède une clé numérique indiquant à quelle série il s'applique. Par exemple, les deux déclarations suivantes sont identiques et déclarent la première série comme noire et absente de la légende, et la quatrième comme rouge et absente de la légende: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Type:tableau d'objets ou objet avec des objets imbriqués
Par défaut : {}
|
thème |
Un thème est un ensemble de valeurs d'options prédéfinies qui fonctionnent ensemble pour obtenir un comportement ou un effet visuel spécifique dans un graphique. Actuellement, un seul thème est disponible:
Type:chaîne
Par défaut:null
|
titre |
Texte à afficher au-dessus du graphique. Type:chaîne
Par défaut:aucun titre
|
titlePosition |
Emplacement du titre du graphique par rapport à la zone du graphique. Valeurs acceptées :
Type:chaîne
Par défaut : "out"
|
titleTextStyle |
Objet spécifiant le style du texte du titre. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Info-bulle |
Objet avec des membres permettant de configurer divers éléments d'info-bulle. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: {textStyle: {color: '#FF0000'}, showColorCode: true} Type:objet
Par défaut:null
|
tooltip.ignoreBounds |
Si la valeur est Remarque:Cela ne s'applique qu'aux info-bulles HTML. Si cette option est activée avec les info-bulles SVG, tout dépassement en dehors des limites du graphique sera rogné. Pour en savoir plus, consultez Personnaliser le contenu des info-bulles. Type:booléen
Par défaut : "false"
|
tooltip.isHtml |
Si elle est définie sur "True", utilisez les info-bulles affichées en HTML (plutôt que SVG). Pour en savoir plus, consultez Personnaliser le contenu des info-bulles. Remarque:La personnalisation du contenu de l'info-bulle HTML via le rôle de données des colonnes d'info-bulles n'est pas disponible pour la visualisation Graphique à bulles. Type:booléen
Par défaut : "false"
|
tooltip.showColorCode |
Si la valeur est "true", des carrés de couleur s'affichent à côté des informations sur la série dans l'info-bulle. La valeur par défaut est "true" lorsque Type:booléen
Par défaut:automatique
|
tooltip.textStyle |
Objet spécifiant le style de texte de l'info-bulle. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:
Type:chaîne
Par défaut : "focus"
|
courbes de tendance |
Affiche les
lignes de tendance
sur les graphiques compatibles. Par défaut, les courbes de tendance linéaires sont utilisées, mais vous pouvez les personnaliser avec l'option
Les courbes de tendance sont spécifiées par série. Par conséquent, la plupart du temps, les options se présentent comme suit: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Type:objet
Par défaut:null
|
trendlines.n.color |
Couleur de la ligne de tendance , exprimée sous la forme d'un nom de couleur anglais ou d'une chaîne hexadécimale. Type:chaîne
Par défaut:couleur de la série par défaut
|
trendlines.n.degree |
Pour les
lignes de tendance
de Type:nombre
Par défaut:3
|
trendlines.n.labelInLegend |
Si elle est définie, la ligne de tendance apparaît dans la légende en tant que chaîne. Type:chaîne
Par défaut:null
|
trendlines.n.lineWidth |
Épaisseur de la ligne de tendance , en pixels. Type:nombre
Par défaut:2
|
trendlines.n.opacity |
Transparence de la ligne de tendance , qui passe de 0,0 (transparent) à 1,0 (opaque). Type:nombre
Par défaut:1.0
|
trendlines.n.pointSize |
Les
lignes de tendance
sont composées de plusieurs points sur le graphique. Cette option rarement nécessaire vous permet de personnaliser la taille des points. L'option Type:nombre
Par défaut : 1
|
trendlines.n.pointsVisible |
Les
lignes de tendance
sont composées de plusieurs points sur le graphique. L'option Type:booléen
Valeur par défaut : "true"
|
trendlines.n.showR2 |
Indique si le coefficient de détermination doit s'afficher dans l'info-bulle de la légende ou de la courbe de tendance. Type:booléen
Par défaut : "false"
|
trendlines.n.type |
Indique si les
lignes de tendance
sont définies sur Type:chaîne
Par défaut : "linear" (linéaire).
|
trendlines.n.visibleInLegend |
Indique si l'équation de la ligne de tendance apparaît dans la légende. Il apparaîtra dans l'info-bulle de la courbe de tendance. Type:booléen
Par défaut : "false"
|
vAxis |
Objet avec des membres permettant de configurer divers éléments de l'axe vertical. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type:objet
Par défaut:null
|
vAxis.baseline |
Cette option n'est disponible que pour un axe Type:nombre
Par défaut:automatique
|
vAxis.baselineColor |
Spécifie la couleur de la référence de l'axe vertical. Peut correspondre à n'importe quelle chaîne de couleur HTML, par exemple:
Cette option n'est disponible que pour un axe Type:nombre
Par défaut : "black" (noir)
|
vAxis.direction |
Sens de croissance des valeurs le long de l'axe vertical. Par défaut, les valeurs faibles se trouvent en bas du graphique. Spécifiez Type:1 ou -1
Par défaut : 1
|
vAxis.format |
Chaîne de format pour les libellés d'axe de date ou numériques.
Pour les libellés des axes numériques, il s'agit d'un sous-ensemble de l'
ensemble de modèles de la bibliothèque ICU
de mise en forme décimale.
Par exemple,
Pour les libellés de l'axe de date, il s'agit d'un sous-ensemble de l'
ensemble de modèles ICU
de mise en forme de la date.
Par exemple, La mise en forme réelle appliquée au libellé est dérivée des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec des paramètres régionaux spécifiques .
Lors du calcul des valeurs de graduation et des lignes de quadrillage, plusieurs combinaisons alternatives de toutes les options de graduation pertinentes sont prises en compte, et les alternatives sont rejetées si les étiquettes de graduation mises en forme sont dupliquées ou se chevauchent.
Vous pouvez donc spécifier
Cette option n'est disponible que pour un axe Type:chaîne
Par défaut:auto
|
vAxis.gridlines |
Objet avec des membres permettant de configurer le quadrillage sur l'axe vertical. Notez que le quadrillage de l'axe vertical est dessiné horizontalement. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet, comme indiqué ci-dessous: {color: '#333', minSpacing: 20}
Cette option n'est disponible que pour un axe Type:objet
Par défaut:null
|
vAxis.gridlines.color |
Couleur du quadrillage vertical dans la zone du graphique. Indiquez une chaîne de couleur HTML valide. Type:chaîne
Par défaut : "#CCC"
|
vAxis.gridlines.count |
Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique.
Si vous spécifiez un nombre positif pour Type:nombre
Valeur par défaut : -1
|
vAxis.gridlines.units |
Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec le quadrillage calculé de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Des informations supplémentaires sont disponibles dans Dates et heures. Type:objet
Par défaut:null
|
vAxis.minorGridlines |
Objet avec des membres permettant de configurer le quadrillage mineur sur l'axe vertical, semblable à l'option vAxis.gridlines.
Cette option n'est disponible que pour un axe Type:objet
Par défaut:null
|
vAxis.minorGridlines.color |
Couleur des lignes de quadrillage mineures verticales dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type:chaîne
Par défaut:mélange des couleurs du quadrillage et de l'arrière-plan
|
vAxis.minorGridlines.count |
L'option mineurGridlines.count est presque obsolète, à l'exception de la désactivation des lignes de quadrillage mineures en définissant le nombre sur 0. Le nombre de lignes de quadrillage mineures dépend de l'intervalle entre les principaux quadrillages (voir vAxis.gridlines.interval) et l'espace minimal requis (voir vAxis.minorGridlines.minSpacing). Type:nombre
Par défaut : 1
|
vAxis.minorGridlines.units |
Remplace le format par défaut pour divers aspects des types de données date/datetime/timeofday lorsqu'ils sont utilisés avec les minorGridlines calculés dans un graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Des informations supplémentaires sont disponibles dans Dates et heures. Type:objet
Par défaut:null
|
vAxis.logScale |
Si la valeur est "true", l'axe vertical devient une échelle logarithmique. Remarque: Toutes les valeurs doivent être positives.
Cette option n'est disponible que pour un axe Type:booléen
Par défaut : "false"
|
vAxis.scaleType |
Propriété
Type:chaîne
Par défaut:null
|
vAxis.textPosition |
Position du texte de l'axe vertical par rapport à la zone du graphique. Valeurs acceptées: "out", "in", "none". Type:chaîne
Par défaut : "out"
|
vAxis.textStyle |
Objet spécifiant le style de texte de l'axe vertical. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Remplace les graduations de l'axe Y générées automatiquement par le tableau spécifié. Chaque élément du tableau doit être une valeur de graduation valide (comme un nombre, une date, une date et une heure ou une heure de la journée) ou un objet. S'il s'agit d'un objet, il doit comporter une propriété
La fenêtre viewWindow est automatiquement développée pour inclure les graduations minimale et maximale, sauf si vous spécifiez un Exemples :
Cette option n'est disponible que pour un axe Type:tableau d'éléments
Par défaut:auto
|
vAxis.title |
Type:chaîne
Par défaut:aucun titre
|
vAxis.titleTextStyle |
Objet spécifiant le style de texte du titre de l'axe vertical. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Déplace la valeur maximale de l'axe vertical vers la valeur spécifiée. Dans la plupart des graphiques, cette valeur est augmentée vers le haut. Ignoré si ce paramètre est défini sur une valeur inférieure à la valeur y maximale des données.
Cette option n'est disponible que pour un axe Type:nombre
Par défaut:automatique
|
vAxis.minValue |
Déplace la valeur minimale de l'axe vertical vers la valeur spécifiée. Elle est alors vers le bas dans la plupart des graphiques. Ignoré si cette valeur est définie sur une valeur supérieure à la valeur y minimale des données.
Cette option n'est disponible que pour un axe 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:
Cette option n'est disponible que pour un axe 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 |
Ignoré lorsque Type:nombre
Par défaut:auto
|
vAxis.viewWindow.min |
Ignoré lorsque Type:nombre
Par défaut:auto
|
largeur |
Largeur du graphique, en pixels. Type:nombre
Par défaut:largeur de l'élément parent
|
Méthodes
Méthode | |
---|---|
draw(data, options) |
Permet de dessiner le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type renvoyé) : aucun
|
getAction(actionID) |
Renvoie l'objet d'action d'info-bulle avec l'élément Type renvoyé:objet
|
getBoundingBox(id) |
Renvoie un objet contenant les valeurs gauche, supérieure, largeur et hauteur de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé:objet
|
getChartAreaBoundingBox() |
Renvoie un objet contenant les valeurs de gauche, de haut, de largeur et de hauteur du contenu du graphique (à l'exclusion des libellés et des légendes):
Les valeurs sont relatives au conteneur du graphique. Appelez-le après que le graphique est dessiné. Type renvoyé:objet
|
getChartLayoutInterface() |
Renvoie un objet contenant des informations sur l'emplacement à l'écran du graphique et de ses éléments. Les méthodes suivantes peuvent être appelées sur l'objet renvoyé:
Appelez-le après que le graphique est dessiné. Type renvoyé:objet
|
getHAxisValue(xPosition, optional_axis_index) |
Renvoie la valeur de données horizontales à Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
getImageURI() |
Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après que le graphique est dessiné. Consultez la page Imprimer des graphiques PNG. Type renvoyé:chaîne
|
getSelection() |
Renvoie un tableau des entités de graphique sélectionnées.
Les entités sélectionnables sont les barres, les entrées de légende et les catégories.
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Type renvoyé:tableau d'éléments de sélection
|
getVAxisValue(yPosition, optional_axis_index) |
Renvoie la valeur de données verticales à Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
getXLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée X en pixels de Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
getYLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée Y en pixels de Exemple : Appelez-le après que le graphique est dessiné. Type renvoyé:nombre
|
removeAction(actionID) |
Supprime l'action d'info-bulle avec l'élément Type renvoyé:
none |
setAction(action) |
Définit une action d'info-bulle à exécuter lorsque l'utilisateur clique sur le texte de l'action.
La méthode
Toutes les actions d'info-bulle doivent être définies avant d'appeler la méthode Type renvoyé:
none |
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Les entités sélectionnables sont les barres, les entrées de légende et les catégories.
Pour ce graphique, vous ne pouvez sélectionner qu'une seule entité à la fois.
Return Type (Type renvoyé) : aucun
|
clearChart() |
Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun
|
Événements
Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gérer les événements et Déclencher des événements.
Nom | |
---|---|
animationfinish |
Déclenché lorsque l'animation de transition est terminée. Propriétés:aucune
|
click |
Déclenché lorsque l'utilisateur clique dans le graphique. Permet de déterminer quand un utilisateur clique sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Propriétés:targetID
|
error |
Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. Propriétés:id, message
|
legendpagination |
Déclenché lorsque l'utilisateur clique sur les flèches de pagination de la légende. Renvoie l'index de page basé sur zéro actuel de la légende et le nombre total de pages. Properties (Propriétés) : currentPageIndex, totalPages
|
onmouseover |
Déclenché lorsque l'utilisateur pointe sur une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une barre correspond à une cellule de la table de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Propriétés:ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur de la souris d'une entité visuelle. Renvoie les index de ligne et de colonne de l'élément correspondant du tableau de données. Une barre correspond à une cellule de la table de données, une entrée de légende à une colonne (l'index de ligne est nul) et une catégorie à une ligne (l'index de colonne est nul). Propriétés:ligne, colonne
|
ready |
Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Propriétés:aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Propriétés:aucune
|
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.