Présentation
Les dimensions dans les données sont souvent affichées sur des axes, à l'horizontale et à la verticale. C'est le cas pour: Graphique en aires, Graphique à barres, Graphique en chandeliers japonais, Graphique à colonnes, Graphique combiné, Graphique en courbes, Graphique en aires en escalier et Graphique à nuage de points.
Lorsque vous créez un graphique avec des axes, vous pouvez personnaliser certaines de leurs propriétés:
- Discret ou continu
- Direction : vous pouvez personnaliser la direction à l'aide de l'option hAxis/vAxis.direction.
- Positionnement et style des libellés : vous pouvez personnaliser le positionnement et le style des libellés à l'aide des options hAxis/vAxis.textPosition et hAxis/vAxis.textStyle.
- Texte et style du titre de l'axe : vous pouvez personnaliser le texte et le style du titre de l'axe à l'aide des options hAxis/vAxis.title et hAxis/vAxis.titleTextStyle.
- Échelle d'axe : vous pouvez définir l'échelle d'un axe sur une échelle logarithmique (logistique) à l'aide des options hAxis/vAxis.logScale ou hAxis/vAxis.scaleType.
- Pour obtenir la liste complète des options de configuration des axes, reportez-vous aux options "hAxis" et "vAxis" dans la documentation de votre graphique spécifique.
Terminologie
Axe majeur/mineur:
- L'axe majeur correspond à l'orientation naturelle du graphique. Pour les graphiques en courbes, en aires, à colonnes, combinés, en aires en escalier et en chandeliers japonais, il s'agit de l'axe horizontal. Pour un graphique à barres, il s'agit du graphique vertical. Les graphiques à nuage de points et à secteurs n'ont pas de grand axe.
- L'axe mineur est l'autre.
Axe discret/continu:
- Un axe discret comporte un nombre fini de valeurs espacées uniformément, appelées catégories.
- Un axe continu a un nombre infini de valeurs possibles.
Discret ou continu
Le principal axe d'un graphique peut être soit discret, soit continu. Lorsque vous utilisez un axe discret, les points de données de chaque série sont espacés uniformément sur l'axe, en fonction de leur index de ligne. Avec un axe continu, les points de données sont positionnés en fonction de leur valeur de domaine.
L'étiquetage est également différent. Dans un axe discret, les noms des catégories (spécifiés dans la colonne de domaine des données) sont utilisés en tant qu'étiquettes. Sur un axe continu, les libellés sont générés automatiquement: le graphique affiche des lignes de grille espacées de manière régulière, où chaque ligne est étiquetée en fonction de la valeur qu'elle représente.
Les axes suivants sont toujours continus:
- Les deux axes des graphiques à bulles
- Axe secondaire.
Dans les graphiques en courbes, en aires, à barres, à colonnes et en chandeliers japonais (et les graphiques combinés contenant uniquement ces séries), vous pouvez contrôler le type du grand axe:
- Pour un axe discret, définissez le type de colonne de données sur
string. - Pour un axe continu, définissez le type de colonne de données sur
number,date,datetimeoutimeofday.
| Discrète / Continu | Type de première colonne | Exemple |
|---|---|---|
| Discret | chaîne |
|
| Continu | Nombre |
|
| Continu | date |
|
Échelle d'axe
Vous pouvez définir l'échelle d'un axe à l'aide de l'option scaleType.
Par exemple, pour définir l'échelle de l'axe vertical en fonction de l'échelle logarithmique, utilisez l'option suivante:
vAxis: {
scaleType: 'log'
}
Le graphique en courbes suivant montre la croissance de la population mondiale, à la fois à l'échelle linéaire (standard) et dans une échelle logarithmique.
Si vos données contiennent des valeurs nulles ou négatives, vous pouvez tracer les points à l'aide de l'option scaleType: 'mirrorLog'. Avec l'échelle logarithmique en miroir, la valeur tracée d'un nombre négatif est moins la logarithme de la valeur absolue du nombre. Les valeurs proches de 0 sont tracées sur une échelle linéaire.
L'exemple suivant montre les nombres de Fibonacci positifs et négatifs représentés à la fois en échelle logarithmique en miroir et en échelle linéaire.
Formats de nombre
Vous pouvez contrôler la mise en forme des numéros de libellés avec hAxis.format et vAxis.format. Par exemple, {hAxis: { format:'#,###%'} } affiche les valeurs "1 000%", "750%" et "50%" pour les valeurs 10, 7,5 et 0,5. Vous pouvez également fournir l'un des préréglages suivants:
{format: 'none'}: affiche les nombres sans mise en forme (par exemple, 8000000){format: 'decimal'}: affiche les nombres avec des séparateurs de milliers (par exemple, 8 000 000){format: 'scientific'}: affiche les nombres en notation scientifique (par exemple, 8e6).{format: 'currency'}: affiche les nombres dans la devise locale (par exemple, 8 000 000,00 $){format: 'percent'}: affiche les nombres sous forme de pourcentages (par exemple, 800 000 000%){format: 'short'}: affiche des nombres abrégés (par exemple, 8M){format: 'long'}: affiche les nombres sous forme de mots entiers (par exemple, 8 millions)
Dans le tableau ci-dessous, vous pouvez choisir parmi les préréglages:
Une page Web complète pour le graphique ci-dessus est présentée ci-dessous.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
title: 'GDP of selected countries, in US $millions',
width: 500,
height: 300,
legend: 'none',
bar: {groupWidth: '95%'},
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
document.getElementById('format-select').onchange = function() {
options['vAxis']['format'] = this.value;
chart.draw(data, options);
};
};
</script>
</head>
<body>
<select id="format-select">
<option value="">none</option>
<option value="decimal" selected>decimal</option>
<option value="scientific">scientific</option>
<option value="percent">percent</option>
<option value="currency">currency</option>
<option value="short">short</option>
<option value="long">long</option>
</select>
<div id="number_format_chart">
</body>
</html>
Lorsque vous utilisez un format qui utilise du texte (par exemple, le format long, qui affiche 8 000 000 sous la forme "8 millions", vous pouvez localiser les chaînes dans d'autres langues en spécifiant un code de langue lorsque vous chargez la bibliothèque Google Charts). Par exemple, pour remplacer "8 millions" par "8 mac" en russe, appelez la bibliothèque comme suit:
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
google.charts.setOnLoadCallback(drawMarkersMap);
</script>