Étiquettes des graphiques

Les graphiques incluent un titre, un sous-titre, des axes et une légende.

Le survol du graphique avec la souris affiche des données plus précises.

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
  • Police de 12 points

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.

Légende

  • Sauf si le graphique présente une seule valeur, inclure une légende.
  • Utiliser des étiquettes claires et concises.

Exemple

<div id="amchart1" style="width:100%;min-height:350px;page-break-inside:avoid;height:350px;"> <![if (!IE)|(gte IE 9)]><noscript><![endif]><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 download href='https://www.banqueducanada.ca/valet/observations/FXEURCAD/xml' class='ga-event' data-ga-category='Valet' data-ga-action='observations/FXEURCAD/xml'>XML</a></li><li><a download href='https://www.banqueducanada.ca/valet/observations/FXEURCAD/json' class='ga-event' data-ga-category='Valet' data-ga-action='observations/FXEURCAD/json'>JSON</a></li><li><a download href='https://www.banqueducanada.ca/valet/observations/FXEURCAD/csv' class='ga-event' data-ga-category='Valet' data-ga-action='observations/FXEURCAD/csv'>CSV</a></li></ul></div><![if (!IE)|(gte IE 9)]></noscript><![endif]></div>
<div id="amchart1-legend" class="amChartsLegend amchart-legend-div" style="overflow: hidden; position: relative; text-align: left;"></div>

Code simplifié


                [amcharts 
  id="serial"
  data-type="time"
  data-series0="FXEURCAD"
  data-series0label="Nom de la légende"
  data-chartTitle="Titre"
  data-subtitle="Sous-titre"
  data-rightAxisTitle="Titre de l’échelle de droite"
  data-height=350
]
            

Exemple

Code simplifié


                [amcharts
  id="serial"
  data-type="time"
  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-rightAxisTitle="Titre de l’échelle de droite"
  data-height=350
]