L'extrême légèreté de cette library (40 Ko) est son principal
atout.
apexChart offre plus de fonctionnalités, mais est 12 fois plus lourde ...
De plus, en permettant l'affichage de line, bar and pie (+ donut, gauge)
chart, cette library est suffisante dans la majorité des cas.
Enfin, un graphique peut facilement être personnalisé.
Code HTML : (test.htm)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="chartist.min.css" />
<script src="chartist.min.js"></script>
<title>Test</title>
</head>
<body>
<div class="ct-major-tenth" id="chart1"></div>
<script src="test.js"></script>
</body>
</html>
Code JS : (test.js)
var data = {
/* A labels array that can contain any sort of values */
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
/* Our series array that contains series objects or in this case series data arrays */
series: [
[5, 2, 4, 2, 7]
]
};
var options = {
}
/* Create a new line chart object where as first parameter we pass in a selector
that is resolving to our chart container element. The Second parameter
is the actual data object. */
new Chartist.Line('#chart1', data, options);
Pour placer différents charts :
new Chartist.Line('#chart1', data, options)
new Chartist.Line('#chart2', data, options)
Dans ce mini-cours, n'est pas abordé ce type d'instruction :
new Chartist.Line('#chart3', data, options,
plugins). Dans ce cas,
-
Votre code pourrait aussi appeler le fichier chartist-plugin-tooltip.js
qui donc doit être également présent dans le dossier contenant le fichier HTML.Or, le fichier
chartist-plugin-tooltip.jsappelle le fichier chartist-plugin-tooltip.css
qui donc doit être également présent dans le dossier contenant le fichier HTML. -
Votre code pourrait aussi appeler le fichier chartist-plugin-accessibility.js
Ratio
Ce ratio est un rapport entre la largeur et la hauteur.
Un rapport "1" signifie que la hauteur sera égale à la largeur de la balise qui contient le graphique.
Un rapport "2:5" signifie que la hauteur sera égale à 40 % de la largeur de la balise qui contient le graphique.
Avec le rapport "9:16" (.ct-minor-seventh), l'image sera trop haute pour un écran 9/16 ... car le navigateur utilise d'une partie de la hauteur pour afficher sa barre de menu. Toutefois, le designer peut décider que le graphique n'occupera pas toute la largeur de l'écran. Il choisira alors le ratio parmi les suivants :
Container class Ratio .ct-square 1 1.0000 .ct-minor-second 15:16 0.9375 .ct-major-second 8:9 0.8889 .ct-minor-third 5:6 0.8333 .ct-major-third 4:5 0.8000 .ct-perfect-fourth 3:4 0.7500 .ct-perfect-fifth 2:3 0.6667 .ct-minor-sixth 5:8 0.6250 .ct-golden-section 1:1.618 0,6180 .ct-major-sixth 3:5 0.6000 .ct-minor-seventh 9:16 0.5625 .ct-major-seventh 8:15 0,5333 .ct-octave 1:2 0.5000 .ct-major-tenth 2:5 0.4000 *** .ct-major-eleventh 3:8 0.3750 .ct-major-twelfth 1:3 0.3333 .ct-double-octave 1:4 0.2500
Data
label:
Cette clé permet d'afficher des étiquettes sur l'axe des x.
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
series:
Cette clé permet d'afficher une ou plusieurs séries de données (lignes).
Il est possible d'afficher plusieurs lignes.
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
Une série peut être nommée.
series: [
{
name: 'series-1',
data: [5, 2, -4, 2, 0, -2, 5, -3]
}
]
Ce qui est utile pour coloriser différentes lignes.
Options
Les options permettent de modifier l'apparence.
Le constructeur admet un troisième paramètre. Un objet (graphique) peut être créé en écrivant :
new Chartist.Line('.ct-chart', data, options);
Comme la variable data, la variable options est une variable
objet de type clé:valeur.
Les variables data et options doivent être déclarées et
initialisées avant d'être utilisées dans le constructeur.
Les variable data doit être déclarée et initialisée avant la variable
options, si elle contient des valeurs qui seront utilisées dans la variable
options, tel que le nom d'une série.
var options = {
/* If high is specified then the axis will display values explicitly up to this value
and the computed maximum from the data is ignored */
high: 100,
/* If low is specified then the axis will display values explicitly down to this value
and the computed minimum from the data is ignored */
low: 0,
/* This option will be used when finding the right scale division settings.
The amount of ticks on the scale will be determined so that as many ticks as possible
will be displayed, while not violating this minimum required space (in pixel). */
scaleMinSpace: 20,
/* Can be set to true or false. If set to true, the scale will be generated with
whole numbers only. */
onlyInteger: true,
/* The reference value can be used to make sure that this value will always be on the chart.
This is especially useful on bipolar charts where the bipolar center always needs
to be part of the chart. */
referenceValue: 5
/* If specified then the value range determined from minimum to maximum (or low and high)
will be divided by this number and ticks will be generated at those division points.
The default divisor is 1. */
divisor: 4,
/* If ticks is explicitly set, then the axis will not compute the ticks with the divisor,
but directly use the data in ticks to determine at what points on the axis a tick need
to be generated. */
ticks: [1, 10, 20, 30]
/* Don't draw the line chart points */
showPoint: false
/* Disable line smoothing */
lineSmooth: false
/* X-Axis specific configuration */
axisX: {
/* We can disable the grid for this axis */
showGrid: false
/* and also don't show the label */
showLabel: false
}
/* Y-Axis specific configuration */
axisY: {
/* Lets offset the chart a bit from the labels */
offset: 60
/* The label interpolation function enables you to modify the values
used for the labels on each axis. Here we are converting the
values into million pound. */
labelInterpolationFnc: function(value) {
return '$' + value + 'm';
}
}
};
fullWidth:
En l'absence de cette clé, toutes les données ne sont pas affichées sur toute la largeur. Le bord droit ne correspond pas à une donnée.
Cette clé permet d'afficher toutes les données sur toute la largeur,
si sa valeur est true.
showPoint:
En l'absence de cette clé, les points sont affichés.
Cette clé permet d'afficher les points,
si sa valeur est true.
low:
En l'absence de cette clé, le bas du graphique est lié à la donnée la plus basse.
Cette clé permet d'indiquer sa préférence pour le bas du graphique.
In fine, le programme le fixe.
La valeur de cette clé est un nombre (qui peut être négatif et/ou décimal)
high:
En l'absence de cette clé, le bas du graphique est lié à la donnée la plus haute.
Cette clé permet d'indiquer sa préférence pour le haut du graphique.
In fine, le programme le fixe.
La valeur de cette clé est un nombre (qui peut être négatif et/ou décimal)
showArea:
En l'absence de cette clé, une aire sous la courbe n'est pas affichée.
Cette clé permet d'afficher une aire sous la courbe,
si sa valeur est true.
Personnaliser l'apparence
Pour personnaliser l'apparence, dans le code HTML (dans le head), il suffit
d'ajouter un appel vers un fichier CSS (par exemple, chartistMy.css) après l'appel du fichier CSS chartist.min.css.
<link rel="stylesheet" href="chartist.min.css" />
<link rel="stylesheet" href="chartistMy.css">
Pour que ce fichier soit listé sous chartist.min.css son nom débute par
chartist.
Line chart
chartistMy.css :
/* Use this selector to override the line style on a given series */
.ct-series-a .ct-line {
/* Set the colour of this series line */
stroke: blue;
/* Control the thikness of your lines */
stroke-width: 2px;
/* Create a dashed line with a pattern */
stroke-dasharray: 10px 20px;
}
/* This selector overrides the points style on line charts.
Points on line charts are actually just very short strokes.
This allows you to customize even the point size in CSS */
.ct-series-a .ct-point {
/* Colour of your points */
stroke: red;
/* Size of your points */
stroke-width: 5px;
/* Make your points appear as squares */
stroke-linecap: square;
}
Pour styliser la seconde ligne, dans ce fichier CSS, il suffit de recopier le style dédié
à la première ligne (.ct-series-a), de remplacer "a" par "b",
puis d'y modifier les définitions de style.
.ct-series-a .ct-line {
stroke: blue;
stroke-width: 2px;
}
.ct-series-a .ct-point {
stroke: blue;
stroke-width: 5px;
}
/* Seconde ligne */
.ct-series-b .ct-line {
stroke: red;
stroke-width: 2px;
}
.ct-series-b .ct-point {
stroke: red;
stroke-width: 5px;
}
La troisième ligne est suffixée par c.
La quatrième ligne est suffixée par d.
...
La quinzième ligne est suffixée par o.
Pour styliser davantage de lignes, il faudra modifier le code de cette library.