Les graphiques incluent un titre, un sous-titre, des axes et une légende.
Voir les règles de style de la Banque (ressource en anglais et accessible au personnel de la Banque seulement) pour des directives de rédaction. À noter que les pratiques peuvent être différentes en français. Les règles s’appliquent également aux étiquettes suivantes :
- nota
- sources
- dernières observations
Le survol du graphique avec la souris affiche des données plus précises. Les unités ne sont pas incluses dans ces éléments puisqu’elles sont indiquées avec les axes.
Titre
- Décrire le récit du graphique avec un titre concis et clair.
- Formuler une phrase complète pour faciliter la lecture.
Typographie
- Texte en gras
- La police de 14 points est la taille de caractères par défaut pour les graphiques ordinaires.
- La police de 18 points est la taille de caractères utilisée pour les graphiques pleine largeur.
Sous-titre
- Utiliser un sous-titre concis et clair pour mettre le titre en contexte.
- Formuler une phrase complète pour faciliter la lecture.
Typographie
- Texte normal
- La police de 12 points est la taille de caractères par défaut pour les graphiques ordinaires.
- La police de 14 points est la taille de caractères utilisée pour les graphiques pleine largeur.
Axes
- Identifier les axes avec des étiquettes claires et concises.
- Placer les étiquettes à l’extérieur de la zone de données du graphique.
- Centrer les étiquettes de texte.
- Inclure les unités ($ ou %) avec chaque chiffre de l’axe plutôt que sur l’axe lui-même (en français, le symbole est placé après le chiffre et séparé par une espace insécable).
Légende
- Sauf si le graphique présente une seule valeur, inclure une légende.
- Utiliser des étiquettes claires et concises.
Exemple : taille par défaut
[amcharts
id="serial4"
data-series0="FXEURCAD"
data-series0label="Nom de la légende"
data-chartTitle="Titre"
data-subtitle="Sous-titre"
data-leftAxisTitle="Titre de l’échelle de gauche"
data-height=350
]
<div id="amchart1p" class="visible-print" aria-hidden="true"></div>
<div id="amchart1-interactive" class="bocss-interactive-div"></div>
<div id="amchart1-titles" class="hidden-print amchart-part"></div>
<div id="amchart1" class="hidden-print amchart-chart" style="min-height:350px;height:350px;"><boc-loading-indicator/><noscript><div class="alert alert-warning"><p class="lead">A modern browser with javascript enabled is required to view our charts.</p><p>Alternatively, the data is available for download in:</p><ul><li><a href='https://www.banqueducanada.ca/valet/observations/FXEURCAD/xml' class='ga-event' data-ga-category='Valet' data-ga-action='download_xml' data-ga-label='observations/FXEURCAD/xml'>XML</a></li><li><a href='https://www.banqueducanada.ca/valet/observations/FXEURCAD/json' class='ga-event' data-ga-category='Valet' data-ga-action='download_json' data-ga-label='observations/FXEURCAD/json'>JSON</a></li><li><a href='https://www.banqueducanada.ca/valet/observations/FXEURCAD/csv' class='ga-event' data-ga-category='Valet' data-ga-action='download_csv' data-ga-label='observations/FXEURCAD/csv'>CSV</a></li></ul></div></noscript></div>
<div id="amchart1-legend" class="bocss-margin-bottom-small hidden-print amchart-part"></div>
<div id="amchart1-notes" class="bocss-margin-bottom-medium hidden-print amchart-part"></div>
<style>
@media screen {
.amchart-chart {
min-height:400px;
height:400px;
}
}
</style>Exemple : pleine largeur
[amcharts
id="serial4"
data-series0="FXUSDCAD"
data-series0label="Nom de la légende"
data-titleStyle="big"
data-chartTitle="Titre"
data-subtitle="Sous-titre"
data-categoryscrollbar=true
data-datezoom=1Y
data-leftAxisTitle="Titre de l’échelle de gauche"
data-height=350
]