Présentation
Les graphiques à barres Google sont affichés dans le navigateur à l'aide des fichiers SVG ou VML, selon ce qui convient au navigateur de l'utilisateur. Comme tous les graphiques Google, les graphiques à barres affichent des info-bulles lorsque l'utilisateur passe la souris sur les données. Pour obtenir une version verticale de ce graphique, consultez le graphique à colonnes.
Exemples
Barres de couleur
Examinons les densités de quatre métaux précieux:
Au-dessus, toutes les couleurs sont affichées en bleu par défaut. car ils font tous partie de la même série. S'il y avait une deuxième série, celle-ci aurait été rouge. Vous pouvez personnaliser ces couleurs avec le rôle de style:
Il existe trois façons de choisir les couleurs. Notre tableau de données les présente toutes: valeurs RVB, noms de couleurs en anglais et 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 de la barre avec des déclarations de type CSS:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Nous vous recommandons de ne pas mélanger les styles trop librement au sein d'un graphique. Choisissez un style et conservez-le, mais voici un exemple pour illustrer tous les attributs de style:
Les deux premières barres utilisent chacune une valeur color
spécifique (la première avec un nom anglais, la seconde avec une valeur RVB). Aucune valeur opacity
n'a été choisie. La valeur par défaut de 1, 0 (entièrement opaque) est donc utilisée. C'est pourquoi la deuxième barre masque la ligne de grille derrière elle. Dans la troisième barre, un opacity
de 0,2 est utilisé, ce qui révèle le quadrillage. 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 pour la bordure et le 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 comportent plusieurs types de libellés, tels que les graduations, les légendes et les libellés dans les info-bulles. Dans cette section, nous allons voir comment placer des libellés à l'intérieur (ou à proximité) des barres dans un graphique à barres.
Imaginons que nous voulions annoter chaque barre avec le symbole chimique approprié. Pour ce faire, vous pouvez utiliser le rôle annotation:
Dans notre tableau de données, nous définissons une nouvelle colonne avec { role:
'annotation' }
pour contenir nos étiquettes 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 passer la souris sur les barres pour afficher les valeurs de données, vous pouvez les inclure dans les barres elles-mêmes:
C'est un peu plus compliqué qu'il ne devrait l'être, car nous créons une DataView
pour spécifier l'annotation de 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 vous souhaitez formater la valeur différemment, vous pouvez définir un formateur et l'encapsuler dans une fonction comme celle-ci:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Nous pourrions alors l'appeler avec calc: getValueAt.bind(undefined, 1)
.
Si le libellé est trop grand pour tenir entièrement dans la barre, il s'affiche à l'extérieur:
Graphiques à barres empilées
Un graphique à barres empilées est un graphique à barres qui affiche les valeurs associées les unes au-dessus des autres. Si des valeurs négatives sont indiquées, 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 de livres hypothétiques, divisées par genre et comparées au fil du temps:
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 %, où les piles d'éléments de chaque valeur de domaine sont redimensionnées de manière à atteindre un total de 100%. Pour ce faire, vous disposez des options suivantes : isStacked: 'percent'
, qui met en forme chaque valeur sous la forme d'un 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'
, fonctionnellement équivalente à isStacked: true
.
Notez que dans le graphique empilé 100% à droite, les valeurs de tick sont basées sur l'échelle relative 0-1 en tant que fractions de 1, mais les valeurs de l'axe sont affichées en pourcentage. En effet, les graduations des axes en pourcentage sont le résultat de l'application d'un format "#.## %" aux valeurs relatives de l'échelle 0-1. Lorsque vous utilisez isStacked: 'percent'
, veillez à spécifier tous les ticks en utilisant l'échelle relative 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é l'introduction de consignes destinées à offrir un aspect général pour les propriétés et applications (telles que les applications Android) qui s'exécutent sur les plates-formes Google. C'est ce que nous appelons le Material Design. Nous vous fournirons des versions "Material" de tous nos graphiques principaux. N'hésitez pas à les utiliser si vous les appréciez.
La création d'un graphique à barres Material est semblable à la création d'un graphique à barres "classique". Vous allez charger l'API Google Visualization (bien qu'avec le package 'bar'
au lieu du package 'corechart'
), définir votre table de données, puis créer un objet (mais avec la classe google.charts.Bar
au lieu de google.visualization.BarChart
).
Remarque : Les Material Charts ne fonctionnent pas dans les anciennes versions d'Internet Explorer. (IE8 et les versions antérieures ne sont pas compatibles avec le format SVG, ce qui est requis par Material Charts).
Les histogrammes Material présentent de nombreuses petites améliorations par rapport aux graphiques à barres classiques, y compris une palette de couleurs améliorée, des angles arrondis, une mise en forme plus claire des libellés, un espacement par défaut plus serré entre les séries, des lignes plus nettes et des titres (ainsi que 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 Material Charts sont disponibles 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 la liste des options qui ne sont pas encore disponibles dans ce problème.
Par ailleurs, la façon dont les options sont déclarées n'est pas définitive. Par conséquent, si vous utilisez l'une des options classiques, vous devez les convertir en options "Material" en remplaçant la ligne suivante :
chart.draw(data, options);
... par ceci :
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
.
Deux graphiques X
Remarque : Les axes Dual-X ne sont disponibles que pour les graphiques Material (ceux comportant le package bar
).
Vous souhaiterez peut-être 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 nos deux axes X sont étiquetés différemment ("parsecs" et "apparent magnitude") et qu'ils ont leurs propres échelles et quadrillages indépendants. Si vous souhaitez personnaliser ce comportement, utilisez les options hAxis.gridlines
.
Dans le code ci-dessous, les options axes
et series
indiquent l'apparence bi-x du graphique. L'option series
spécifie l'axe à utiliser pour chaque valeur ('distance'
et 'brightness'
. Ils n'ont pas besoin de lien avec les noms de colonnes du tableau de données). L'option axes
transforme ensuite ce graphique en un double graphique 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>
Top X
Remarque : Les axes X ne sont disponibles que pour les graphiques Material (ceux comportant le package bar
).
Si vous souhaitez ajouter 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 Design 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 de ce groupe | |
Type de données: | number (nombre) | … | number (nombre) | |
Rôle : | domaine | données | … | données |
Rôles de colonne facultatifs : | … |
Options de configuration
Nom | |
---|---|
durée.animation |
Durée de l'animation, en millisecondes. Pour en savoir plus, consultez la documentation sur les animations. Type:nombre
Par défaut:0
|
animation.easing |
Fonction de lissage de vitesse appliquée à l'animation. Les options suivantes sont disponibles :
Type : chaîne
Par défaut : "linear"
|
animation.startup |
Détermine si le graphique doit s'animer lors du tracé initial. Si la valeur est Type:booléen
Valeur par défaut : false
|
annotations.alwaysOutside |
Dans les graphiques à barres et à colonnes, si la valeur est Type : booléen
Par défaut:false
|
annotations.datum |
Pour les graphiques compatibles avec les annotations, l'objet
annotations.datum vous permet de remplacer 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 dans 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 "noir" ; la longueur est de 12 ; le style est "point".
|
annotations.domain |
Pour les graphiques compatibles avec les annotations, l'objet
annotations.domain vous permet de remplacer le choix de Google Charts pour les annotations fournies pour un domaine (l'axe principal du graphique, tel que l'axe X sur un graphique en courbes typique). 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 "noir" ; la longueur est de 5 ; 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 compatible avec les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Elle n'est pas compatible avec le graphique d'annotations. Type : objet
Par défaut : null
|
annotations.highContrast |
Pour les graphiques compatibles avec les annotations, la valeur booléenne
annotations.highContrast vous permet de remplacer la couleur d'annotation choisie par Google Charts. Par défaut, annotations.highContrast est vrai, ce qui permet aux graphiques de sélectionner une couleur d'annotation avec un bon contraste: les couleurs claires sur les fonds sombres et les couleurs sombres sur le thème clair. 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
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 de la 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 tige n'a aucun effet sur les annotations de style 'line' : pour les annotations de base de données 'line' , la longueur de la tige est toujours identique au texte, et pour les annotations de domaine 'line' , la tige s'étend sur tout le graphique.
Type : objet
Par défaut : la couleur est "noire" ; la longueur est de 5 pour les annotations de domaine et de 12 pour les annotations de référence.
|
annotations.style |
Pour les graphiques compatibles avec les annotations, l'option
annotations.style vous permet de remplacer le type d'annotation choisi par Google Charts. Il peut s'agir de 'line' ou '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 compatible avec les graphiques en aires, à barres, à colonnes, combinés, en courbes et à nuage de points. Elle n'est pas compatible avec le graphique d'annotations. Type : objet
Par défaut:null
|
Position de l'axe |
Emplacement des titres des axes par rapport à la zone du graphique. Valeurs acceptées :
Type:chaîne
Par défaut : "out"
|
backgroundColor |
Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir d'une simple chaîne de couleur HTML, par exemple Type : chaîne ou objet
Par défaut : "blanc"
|
backgroundColor.stroke |
Couleur de la bordure du graphique, sous forme de chaîne de couleur HTML. Type : chaîne
Par défaut : "#666"
|
backgroundColor.strokeWidth |
Largeur de la bordure, en pixels. Type : nombre
Par défaut:0
|
backgroundColor.fill |
Couleur de remplissage du graphique, sous forme de chaîne de couleur HTML. Type:chaîne
Par défaut : "blanc"
|
Largeur du groupe |
Largeur d'un groupe de barres, spécifiée dans l'un des formats suivants:
Type : nombre ou chaîne
Par défaut : taux d'or (environ 61,8 %).
|
bars |
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"
|
zone du graphique |
Objet avec des membres permettant de configurer l'emplacement et la taille de la zone du graphique (à l'endroit où le graphique est dessiné, à l'exclusion de l'axe et des légendes) Deux formats sont acceptés: un nombre, ou un nombre suivi du pourcentage. Un nombre simple est une valeur en pixels ; un nombre suivi de % est un pourcentage. Exemple : Type:objet
Par défaut : null
|
chartArea.backgroundColor |
Couleur d'arrière-plan de la zone de graphique. Lorsqu'une chaîne est utilisée, il peut s'agir d'une chaîne hexadécimale (par exemple, "#fdc") ou un nom de couleur anglais. Lorsqu'un objet est utilisé, les propriétés suivantes peuvent être fournies:
Type : chaîne ou objet
Par défaut : "blanc"
|
chartArea.gauche |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure de gauche Type : nombre ou chaîne
Par défaut:auto
|
chartArea.top |
La distance à laquelle vous souhaitez dessiner le graphique à partir de la bordure supérieure. Type:nombre ou chaîne
Par défaut:auto
|
chartArea.width |
Largeur de la zone du graphique. Type:nombre ou chaîne
Par défaut:auto
|
chartArea.height |
Hauteur de la zone de graphique Type : nombre ou chaîne
Par défaut:auto
|
chart.subtitle |
Pour les graphiques Material, cette option spécifie le sous-titre. Seuls les Material Charts sont compatibles avec les sous-titres. Type:chaîne
Par défaut : null
|
chart.title [titre] |
Pour les graphiques Material, cette option spécifie le titre. Type:chaîne
Par défaut : null
|
couleurs |
Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes, où chaque élément est une chaîne de couleur HTML (par exemple, Type:tableau de chaînes
Par défaut:couleurs par défaut
|
opacité des données |
Transparence des points de données, 1.0 étant complètement opaque et 0.0 complètement transparente. Dans les graphiques à nuage de points, d'histogrammes, à barres et à colonnes, il s'agit des données visibles: les points dans le graphique à nuage de points et les rectangles dans les autres. Dans les graphiques où la sélection des données crée un point, tel que les graphiques en courbes et en aires, il s'agit des cercles qui apparaissent lors du survol ou de la sélection. Le graphique combiné présente les deux comportements, et cette option n'a aucun effet sur les autres graphiques. Pour modifier l'opacité d'une courbe de tendance, consultez la section Opacité de la courbe de tendance. Type:nombre
Par défaut:1.0
|
ActiverInteractivité |
Indique si le graphique génère des événements utilisateur ou réagit aux interactions des utilisateurs. Si la valeur est "false", le graphique ne génère pas de "sélection" ni d'autres événements basés sur les interactions (mais lancera des événements prêts ou d'erreur). Il n'affichera pas de texte au passage de la souris ni ne changera d'une autre manière selon l'entrée utilisateur. Type:booléen
Par défaut:true
|
explorer |
L'option Cette fonctionnalité est en phase de test et est susceptible de changer 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
|
explorateur.actions |
L'explorateur de graphiques Google accepte trois actions:
Type:tableau de chaînes
Par défaut : ['dragToPan', 'rightClickToReset']
|
explorateur.axe |
Par défaut, les utilisateurs peuvent faire un panoramique horizontalement ou verticalement lorsque l'option Type:chaîne
Par défaut : panoramiques horizontal et vertical
|
Explorer.keepInBounds |
Par défaut, les utilisateurs peuvent faire des panoramiques, 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 |
Quantité maximale que l'explorateur peut zoomer. Par défaut, les utilisateurs peuvent faire un zoom avant suffisant pour ne voir que 25% de la vue d'origine. Le fait de définir Type : nombre
Par défaut:0,25
|
explorer.maxZoomOut |
Valeurs maximales pour le zoom arrière dans l'explorateur. Par défaut, les utilisateurs peuvent effectuer un zoom arrière de sorte 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
Par défaut : 1.5
|
cible |
Type d'entité qui reçoit le curseur de la souris. Affecte également l'entité sélectionnée par clic de la souris et l'élément du tableau de données associé aux événements. Il peut s'agir de l'un des éléments suivants:
Dans "targetTarget", la catégorie "target" contient toutes les valeurs de la catégorie. Cela peut être utile pour comparer les valeurs de différentes séries. Type:chaîne
Par défaut : "datum"
|
Taille de police |
Taille de police par défaut, en pixels, de tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type : nombre
Par défaut:automatique
|
Nom de la police |
Police par défaut pour tout le texte du graphique. Vous pouvez remplacer ce paramètre en utilisant des propriétés pour des éléments de graphique spécifiques. Type:chaîne
Par défaut : "Arial"
|
Forcer le cadre iFrame |
Dessine le graphique dans un cadre intégré. (Notez que dans IE8, cette option est ignorée. Tous les graphiques IE8 sont dessinés dans des cadres iFrame.) Type:booléen
Par défaut:false
|
Haches |
Spécifie les propriétés pour chaque axe horizontal, si le graphique comporte plusieurs axes horizontaux. Chaque objet enfant est un objet
Pour spécifier un graphique avec plusieurs axes horizontaux, définissez d'abord un nouvel axe à l'aide de
Cette propriété peut être un objet ou un tableau. L'objet est une collection d'objets, chacun avec un libellé numérique qui spécifie l'axe qu'il définit (il s'agit du format indiqué ci-dessus). Le tableau est un tableau d'objets (un par axe). Par exemple, la notation de style tableau suivante est identique à l'objet hAxes: { {}, // Nothing specified for axis 0 { title:'Losses', textStyle: { color: 'red' } } // Axis 1 Type : tableau d'objets ou objet avec des objets enfants
Par défaut : null
|
Axe |
Objet avec des membres permettant de configurer divers éléments de l'axe horizontal. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Type : objet
Par défaut:null
|
hAxis.baseline |
La référence pour l'axe horizontal. Type : nombre
Par défaut:automatique
|
hAxis.baselineColor |
Couleur de la référence pour l'axe horizontal. Il peut s'agir de n'importe quelle chaîne de couleur HTML, par exemple Type:nombre
Par défaut : "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 de l'axe numérique. Il s'agit d'un sous-ensemble de l'ensemble de modèles d'ICU. Par exemple,
La mise en forme réellement appliquée au libellé provient des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec un paramètre régional spécifique.
Pour calculer les valeurs de graduation et les lignes de quadrillage, plusieurs combinaisons de toutes les options de quadrillage concernées seront prises en compte si les graduations de formes formatées sont dupliquées ou se chevauchent.
Vous pouvez donc spécifier Type:chaîne
Par défaut:auto
|
hAxis.gridlines |
Objet avec des propriétés permettant de configurer le quadrillage sur l'axe horizontal. Notez que le quadrillage de l'axe horizontal est dessiné verticalement. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {color: '#333', minSpacing: 20} Type : objet
Par défaut : null
|
hAxis.gridlines.color |
Couleur du quadrillage horizontal dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type:chaîne
Par défaut : "#CCC"
|
hAxis.gridlines.count |
Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique.
Si vous spécifiez un nombre positif pour Type:nombre
Par défaut : -1
|
hAxis.gridlines.units |
Remplace le format par défaut pour différents aspects des types de données de date/heure/heure de la journée lorsqu'il est utilisé avec un quadrillage calculé par graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Pour en savoir plus, consultez Dates et heures. Type : objet
Par défaut : null
|
hAxis.minorGridlines |
Objet avec des membres permettant de configurer le quadrillage mineur sur l'axe horizontal, semblable à l'option hAxis.gridlines. Type : objet
Par défaut:null
|
hAxis.minorGridlines.color |
Couleur du quadrillage mineur horizontal dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type : chaîne
Par défaut : un mélange de quadrillages et de couleurs d'arrière-plan
|
hAxis.minorGridlines.count |
L'option Type:nombre
Par défaut:1
|
hAxis.minorGridlines.units |
Remplace le format par défaut pour divers aspects des types de données de date/heure/heure d'exécution lorsqu'il est utilisé avec un graphique "gridline" calculé à partir de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Pour en savoir plus, consultez Dates et heures. Type:objet
Par défaut:null
|
hAxis.logScale |
Type : booléen
Par défaut:false
|
hAxis.scaleType |
Type:chaîne
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> }
Le 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 générées automatiquement par l'axe X par le tableau spécifié. Chaque élément du tableau doit être une valeur de tick valide (un nombre, une date, une date/heure ou une heure) ou un objet. S'il s'agit d'un objet, il doit posséder une propriété
La fenêtre d'affichage est automatiquement étendue pour inclure les graduations minimale et maximale, sauf si vous spécifiez une valeur pour Exemples :
Type:tableau d'éléments
Par défaut : auto
|
hAxis.title |
Type : chaîne
Par défaut : null
|
hAxis.titleTextStyle |
Objet spécifiant le style de texte du titre de l'axe horizontal. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type : objet
Par défaut :
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Valeur maximale de hAxis |
Déplace la valeur maximale de l'axe horizontal vers la valeur spécifiée. Cette valeur se trouvera 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
|
Valeur min. |
Déplace la valeur minimale de l'axe horizontal vers la valeur spécifiée. Cette valeur sera gauche dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur supérieure à la valeur x minimale des données.
Type:nombre
Par défaut : automatique
|
hAxis.viewWindowMode |
Indique comment mettre à l'échelle l'axe horizontal pour afficher les valeurs dans la zone du graphique. Les valeurs de chaîne suivantes sont acceptées:
Type : chaîne
Par défaut : équivaut à "pretty", mais
haxis.viewWindow.min et haxis.viewWindow.max sont prioritaires s'ils sont utilisés.
|
hAxis.viewWindow |
Spécifie la plage de recadrage de l'axe horizontal. Type:objet
Par défaut:null
|
hAxis.viewWindow.max |
Valeur maximale de données horizontales à afficher. Ignoré lorsque le champ " Type : nombre
Par défaut:auto
|
hAxis.viewWindow.min |
Valeur minimale des données horizontales à afficher. Ignoré lorsque le champ " Type : nombre
Par défaut:auto
|
hauteur |
Hauteur du graphique, en pixels. Type:nombre
Par défaut:hauteur de l'élément conteneur.
|
empilé |
Si ce paramètre est défini sur "true", les éléments sont empilés pour toutes les séries à chaque valeur de domaine. Remarque:Dans les graphiques Colonne, Superficie et Étape Cela ne s'applique pas aux graphiques à barres.
L'option Les options pour
Pour un empilement à 100 %, la valeur calculée pour chaque élément apparaîtra dans l'info-bulle après sa valeur réelle.
Par défaut, l'axe cible coche les valeurs en fonction de l'échelle 0-1 relative sous forme de fractions de 1 pour
L'empilement à 100% n'accepte que les valeurs de données de type Type : booléen/chaîne
Par défaut : false
|
légende |
Objet avec des membres permettant de configurer divers aspects de la légende. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type:objet
Par défaut : null
|
légende.pageIndex |
Index de page base zéro sélectionné de la légende. Type : nombre
Par défaut:0
|
légende.position |
Position de la légende. Les possibilités suivantes s'offrent à vous :
Type : chaîne
Par défaut : "right"
|
légende.alignement |
Alignement de la légende. Les possibilités suivantes s'offrent à vous :
Le début, le centre et la fin se rapportent au style (vertical ou horizontal) de la légende. Par exemple, dans une légende "à droite", "start" et "end" sont respectivement en haut et en bas. Pour une légende "top", "start" et "end" sont respectivement situés à gauche et à droite de la zone. La valeur par défaut dépend de la position de la légende. Pour les légendes de bas de page, la valeur par défaut est "center". Les autres légendes sont définies par défaut sur "start". Type:chaîne
Par défaut : automatique
|
légende.texteStyle |
Objet spécifiant le style de légende. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type : objet
Par défaut :
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
catégories inversées |
Si cette règle est définie sur "true", les séries sont dessinées de bas en haut. Par défaut, le dessin s'effectue de haut en bas. Type : booléen
Par défaut:false
|
orientation |
Orientation du graphique. Lorsque ce paramètre est défini sur Type:chaîne
Par défaut : "horizontal"
|
series |
Tableau d'objets, chacun décrivant le format de la série correspondante dans le graphique. Pour utiliser les valeurs par défaut d'une série, spécifiez un objet vide {}. Si vous ne spécifiez pas de série ou de valeur, la valeur globale sera utilisée. Chaque objet accepte les propriétés suivantes:
Vous pouvez spécifier un tableau d'objets, chacun s'appliquant à la série dans l'ordre indiqué, ou spécifier un objet dans lequel chaque enfant possède une clé numérique indiquant la série à laquelle il s'applique. Par exemple, les deux déclarations suivantes sont identiques et déclarent la première série comme noire et absente de la légende, et la quatrième comme rouge et absente de la légende: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Type:tableau d'objets (objets avec objets imbriqués)
Par défaut : {}
|
thème |
Un thème est un ensemble de valeurs d'options prédéfinies qui fonctionnent ensemble pour obtenir un comportement de graphique ou un effet visuel spécifique. Actuellement, un seul thème est disponible:
Type : chaîne
Par défaut:null
|
title |
Texte à afficher au-dessus du graphique. Type : chaîne
Par défaut:pas de titre
|
titrePosition |
Emplacement du titre du graphique par rapport à la zone du graphique. Valeurs acceptées :
Type:chaîne
Par défaut : "out"
|
titreTexteStyle |
Objet spécifiant le style du titre. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type:objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
info-bulle |
Objet avec des membres permettant de configurer divers éléments d'info-bulles. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation de littéral d'objet, comme indiqué ci-dessous: {textStyle: {color: '#FF0000'}, showColorCode: true} Type : objet
Par défaut:null
|
tooltip.ignoreBounds |
Si la valeur est définie sur 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 recadré. Pour en savoir plus, consultez Personnaliser le contenu des info-bulles. Type : booléen
Par défaut:false
|
tooltip.isHtml |
Si la valeur est "true", utilisez les info-bulles au format HTML (plutôt qu'au format SVG). Pour en savoir plus, consultez Personnaliser le contenu des info-bulles. Remarque:La personnalisation du contenu de l'info-bulle HTML via le rôle de données de la colonne d'info-bulles n'est pas compatible avec la visualisation Graphique à bulles. Type : booléen
Par défaut:false
|
tooltip.showColorCode |
Si la valeur est "true", des carrés de couleur sont affichés à côté des informations de la série dans l'info-bulle. La valeur par défaut est "true" (vrai) lorsque Type:booléen
Par défaut : automatique
|
tooltip.textStyle |
Objet spécifiant le style de texte de l'info-bulle. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type : objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
Interaction de l'utilisateur qui entraîne l'affichage de l'info-bulle:
Type:chaîne
Par défaut : "focus"
|
courbes de tendance |
Affiche des lignes de tendance sur les graphiques correspondants. Par défaut, les courbes de tendance linéaires sont utilisées, mais elles peuvent être personnalisées avec l'option
Les courbes de tendance étant spécifiées par série, vos options se présentent la plupart du temps 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
|
tendanceslignes.n.couleur |
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
|
tendances.degrés.n |
Pour les lignes de tendance de Type : nombre
Par défaut:3
|
Trendslines.n.labelInLegend |
Si elle est définie, la ligne de tendance apparaît dans la légende sous la forme de cette chaîne. Type:chaîne
Par défaut:null
|
tendanceslignes.n.largeurLargeur |
Largeur de ligne de la ligne de tendance, en pixels. Type : nombre
Par défaut:2
|
tendanceslignes.n.opacité |
Transparence de la ligne de tendance, comprise entre 0 (transparent) et 1 (opaque). Type : nombre
Par défaut:1.0
|
Trendslines.n.pointSize |
Les courbes de tendance sont constituées d'un groupe de points correspondant à un graphique. Cette option rarement nécessaire vous permet de personnaliser la taille des points. L'option Type:nombre
Par défaut:1
|
Trendslines.n.pointsVisible. |
Les lignes de tendance sont composées d'un groupe de points figurant sur le graphique. L'option Type:booléen
Par défaut : true
|
Trendslines.n.showR2 |
Indique si le coefficient de détermination doit être affiché dans l'info-bulle relative à la légende ou à la courbe de tendance. Type : booléen
Par défaut : false
|
tendances.n.type |
Indique si les lignes de tendance sont Type : chaîne
Par défaut:linéaire
|
tendances.n.visibleInLégende |
Indique si l'équation de la ligne de tendance apparaît ou non dans la légende. Elle 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 de littéral d'objet, comme indiqué ci-dessous: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Type:objet
Par défaut:null
|
vAxis.baseline (vaxis.baseline) |
Cette option n'est disponible que pour l'axe Type:nombre
Par défaut : automatique
|
vAxis.baselineColor |
Indique la couleur de la référence pour l'axe vertical. Il peut s'agir de n'importe quelle chaîne de couleur HTML, par exemple :
Cette option n'est disponible que pour l'axe Type:nombre
Par défaut : "noir"
|
v.axe.direction |
Sens de croissance des valeurs le long de l'axe vertical. Par défaut, les valeurs basses figurent au bas du graphique. Spécifiez Type : 1 ou -1
Par défaut:1
|
vAxis.format |
Chaîne de format pour les libellés d'axes numériques ou de date.
Pour les étiquettes d'axe numérique, il s'agit d'un sous-ensemble de l'ensemble de modèles de soins intensifs avec mise en forme décimale.
Par exemple,
Pour les étiquettes de l'axe des dates, il s'agit d'un sous-ensemble de l'ensemble de modèles de soins intensifs de mise en forme de la date.
Par exemple, La mise en forme réellement appliquée au libellé provient des paramètres régionaux avec lesquels l'API a été chargée. Pour en savoir plus, consultez Charger des graphiques avec un paramètre régional spécifique.
Pour calculer les valeurs de graduation et les lignes de quadrillage, plusieurs combinaisons de toutes les options de quadrillage concernées seront prises en compte si les graduations de formes formatées sont dupliquées ou se chevauchent.
Vous pouvez donc spécifier
Cette option n'est disponible que pour l'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 de littéral d'objet, comme indiqué ci-dessous: {color: '#333', minSpacing: 20}
Cette option n'est disponible que pour l'axe Type : objet
Par défaut:null
|
vAxis.gridlines.color |
Couleur du quadrillage vertical dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type : chaîne
Par défaut : "#CCC"
|
v.axe.gridlines.count |
Nombre approximatif de lignes de quadrillage horizontales dans la zone du graphique.
Si vous spécifiez un nombre positif pour Type:nombre
Par défaut : -1
|
vAxis.gridlines.units |
Remplace le format par défaut pour différents aspects des types de données de date/heure/heure de la journée lorsqu'il est utilisé avec un quadrillage calculé par graphique. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Pour en savoir plus, consultez Dates et heures. Type : objet
Par défaut : null
|
vAxis.minorGridlines |
Objet avec des membres permettant de configurer le quadrillage mineur sur l'axe vertical, semblable à l'option vAxis.gridlines.
Cette option n'est disponible que pour l'axe Type : objet
Par défaut:null
|
vAxis.minorGridlines.color |
Couleur du quadrillage vertical vertical dans la zone du graphique. Spécifiez une chaîne de couleur HTML valide. Type : chaîne
Par défaut : un mélange de quadrillages et de couleurs d'arrière-plan
|
vAxis.minorGridlines.count |
L'option minorGridlines.count est principalement obsolète, sauf pour désactiver les lignes mineures mineures en définissant le nombre sur 0. Le nombre de lignes de quadrillage mineures dépend de l'intervalle entre les lignes principales (voir vAxis.gridlines.interval) et l'espace minimal requis (voir vAxis.minorGridlines.minSpacing). Type:nombre
Par défaut:1
|
vAxis.minorGridlines.units |
Remplace le format par défaut pour divers aspects des types de données de date/heure/heure d'exécution lorsqu'il est utilisé avec un graphique "gridline" calculé à partir de graphiques. Permet de mettre en forme des années, des mois, des jours, des heures, des minutes, des secondes et des millisecondes. Le format général est le suivant: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Pour en savoir plus, consultez Dates et heures. Type : objet
Par défaut:null
|
vAxis.logScale |
Si la valeur est "true", l'axe vertical devient une échelle logarithmique. Remarque: Toutes les valeurs doivent être positives.
Cette option n'est disponible que pour l'axe Type:booléen
Par défaut : false
|
vAxis.scaleType (vAxis.scaleType) |
Type:chaîne
Par défaut:null
|
vAxis.textPosition |
Position du texte de l'axe vertical par rapport à la zone du graphique. Valeurs acceptées : 'out', 'in', 'none'. Type:chaîne
Par défaut : "out"
|
vAxis.textStyle (vAxis.textStyle) |
Objet spécifiant le style de texte de l'axe vertical. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type : objet
Par défaut :
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Remplace les graduations générées automatiquement par l'axe Y par le tableau spécifié. Chaque élément du tableau doit être une valeur de tick valide (un nombre, une date, une date/heure ou une heure) ou un objet. S'il s'agit d'un objet, il doit posséder une propriété
La fenêtre d'affichage est automatiquement étendue pour inclure les graduations minimale et maximale, sauf si vous spécifiez une valeur pour Exemples :
Cette option n'est disponible que pour l'axe Type : tableau d'éléments
Par défaut : auto
|
vAxis.title |
Type : chaîne
Par défaut:pas de titre
|
vAxis.titleTextStyle |
Objet spécifiant le style de texte du titre de l'axe vertical. L'objet a le format suivant: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Le Type : objet
Par défaut:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Déplace la valeur maximale de l'axe vertical vers la valeur spécifiée. Cette valeur est plus élevée dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur inférieure à la valeur y maximale des données.
Cette option n'est disponible que pour l'axe Type:nombre
Par défaut:automatique
|
Valeur minimale |
Déplace la valeur minimale de l'axe vertical vers la valeur spécifiée. Cette valeur est descendante dans la plupart des graphiques. Ignoré si ce paramètre est défini sur une valeur supérieure à la valeur y minimale des données.
Cette option n'est disponible que pour l'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 l'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 le champ " Type:nombre
Par défaut:auto
|
vAxis.viewWindow.min |
Ignoré lorsque le champ " Type:nombre
Par défaut : auto
|
largeur |
Largeur du graphique, en pixels. Type:nombre
Par défaut:largeur de l'élément conteneur
|
Méthodes
Méthode | |
---|---|
draw(data, options) |
Dessine le graphique. Le graphique n'accepte d'autres appels de méthode qu'après le déclenchement de l'événement Return Type (Type de retour) : aucun
|
getAction(actionID) |
Renvoie l'objet d'action info-bulle avec le Return Type:objet
|
getBoundingBox(id) |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" de l'élément de graphique
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type:objet
|
getChartAreaBoundingBox() |
Renvoie un objet contenant les éléments "left", "top", "width" et "height" dans le contenu du graphique (c'est-à-dire, à l'exclusion des libellés et de la légende):
Les valeurs sont relatives au conteneur du graphique. Appelez-le après le graphique. Return Type:objet
|
getChartLayoutInterface() |
Renvoie un objet contenant des informations sur l'emplacement à l'écran du graphique et de ses éléments. Les méthodes suivantes peuvent être appelées sur l'objet renvoyé:
Appelez-le après le graphique. Return Type : objet
|
getHAxisValue(xPosition, optional_axis_index) |
Renvoie la valeur de données horizontale à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getImageURI() |
Renvoie le graphique sérialisé en tant qu'URI d'image. Appelez-le après le graphique. Consultez Imprimer des graphiques PNG. Type de retour : chaîne
|
getSelection() |
Affiche un tableau des entités de graphique sélectionnées.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Pour ce graphique, une seule entité peut être sélectionnée à un moment donné.
Type de renvoi : tableau des éléments de sélection
|
getVAxisValue(yPosition, optional_axis_index) |
Renvoie la valeur de données verticales à Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getXLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée X du pixel de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
getYLocation(dataValue, optional_axis_index) |
Renvoie la coordonnée Y en pixels de Exemple : Appelez-le après le graphique. Return Type (Type de retour) : nombre
|
removeAction(actionID) |
Supprime l'action d'info-bulle avec le Type de retour:
none |
setAction(action) |
Définit une action d'info-bulle à exécuter lorsque l'utilisateur clique sur le texte de l'action.
La méthode
Toutes les actions de l'info-bulle doivent être définies avant d'appeler la méthode Type de retour:
none |
setSelection() |
Sélectionne les entités de graphique spécifiées. Annule toute sélection précédente.
Vous pouvez sélectionner les barres, les entrées de légende et les catégories.
Pour ce graphique, une seule entité peut être sélectionnée à la fois.
Return Type (Type de retour) : aucun
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
Pour en savoir plus sur l'utilisation de ces événements, consultez les sections Interactivité de base, Gestion des événements et Déclenchement d'événements.
Nom | |
---|---|
animationfinish |
Déclenché lorsque l'animation de transition est terminée. Properties (Propriétés) : aucune
|
click |
Déclenché lorsque l'utilisateur clique dans le graphique Permet d'identifier le clic sur le titre, les éléments de données, les entrées de légende, les axes, le quadrillage ou les libellés. Properties (Propriétés) : targetID
|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique Properties (Propriétés) : id, message
|
legendpagination |
Déclenché lorsque l'utilisateur clique sur les flèches de pagination de la légende Transmet l'index de page basé sur la légende actuelle et le nombre total de pages. Properties (Propriétés) : currentPageIndex, totalPages
|
onmouseover |
Déclenché lorsque l'utilisateur passe la souris sur une entité visuelle. Transmet les index de ligne et de colonne de l'élément du tableau de données correspondant. Une barre est associée à une cellule du tableau de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie d'une ligne (l'index de colonne est nul). Properties (Propriétés) : ligne, colonne
|
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur d'une entité visuelle Transmet les index de ligne et de colonne de l'élément de table de données correspondant. Une barre est associée à une cellule du tableau de données, à une entrée de légende dans une colonne (l'index de ligne est nul) et à une catégorie d'une ligne (l'index de colonne est nul). Properties (Propriétés) : ligne, colonne
|
ready |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles concernant les données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.