Chartist.js, O librarie JS pentru chart-uri Responsive
Stefanescu Mihai 3 years ago iNoobIn acest articol am sa va vorbesc despre o librarie JS de charturi responsive si anume despre chartist.js. Aceasta librarie a fost dezvoltate pentur a crea chart-uri responsive intr-un mod cat se poate de simplu. Chiar daca exista o multime de librarii de chart-uri ce fac o treaba excelenta eu nu am gasit nici-una pe care sa o folosesc la fel de simplu ca pe aceasta.
In acest articol nu doar am sa va prezint libraria ci am sa va si arat cum poate fi folosita, am sa va arat cateva concepte cheie, dar si cateva functii mai avansate.
Instalarea
Chartist poate fi integrat in proiectul tau in mai mult moduri. Poate fi luat atat cu Bower si NPM cat si direct dintr-un CDN, dar bineinteles ca exista mai multe moduri de instalare.
BOWER
Pentur a instala Chartist ca si dependenta front-end folosind Bower executati urmatoarea comanda in folder-ul proiectului vostru:
bower install chartist --save
NPM
Daca preferi chartist ca repository NPM sau daca folosesti un bundler CommonJS precum Browserify sau webpack, atunci sigur o sa doresti sa instalezi Chartist folosind NPM:
npm install chartist --save
CDN
Un mod rapid de a te apuca de treaba cu Chartist este folosirea unui CDN. Cei de la jsDelivr fac o treaba grozava cu pastrarea multor librarii updatate si cel mai important, o fac pe gratis. Pentru a folosi Chartist in acest mod nu trebuie decat sa copiati acest cod in HTML-ul vostru:
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
Primul Chart
O data ce ai gasit tipul de chart potrivit pentru proiectul tau te poti apuca de treaba. In acest articol am sa folosesc JSBin pentur a crea chart-uri.
Pentru inceput hai sa facem un line chart simplu. Primul lucru ce trebuie facut este adaugarea unui container in elementul body cu clasa ct-chart:
<!DOCTYPE html> <html> <head> <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" /> <meta charset="utf-8"> <title>Primul Chart</title> </head> <body> <div class="ct-chart"></div> </body> </html>
Acum, cu doar cateva linii de javascript putem initializa un chart in acest element. Hai sa facem un chart cu 4 linii cu cate 6 valori fiecare. Vom seta si un set de label-uri pentru acest chart. Ca un al doilea argument, constructorul clasei Chartist.Line accepta un obiect cu optiuni In care putem seta o inaltime si o latime fixa pentru chart.
new Chartist.Line('.ct-chart', {
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6'],
series: [
[4, 2.5, 1, 6, 0.5],
[0, 3, 3, 1.2, 6],
[6, 1, 1.5, 2, 1],
[4, 5, 2, 1, 0, 5]
]
}, {
width: 500,
height: 300
});
Iata rezultatul pe JSBin: http://jsbin.com/woqeba/edit?html,js,output
Container Responsive
In exemplul de mai sus am folosit o inaltime si o latime fixa pentru chart, lucru ce nu este dorit in multe cazuri, mai ales cand vorbim despre un design responsive.
Pentru a pastra aspect ratio (tehnica folosita si in pastrarea aspect ratio la video-uri) o sa folosim una dintre clasele chartist predefinite si mai exact ct-golden-section, dar puteti folosi ce clasa doriti din aceasta lista:http://gionkunz.github.io/chartist-js/getting-started.html#creating-a-chart-using-aspect-ratios
<body> <div class="ct-chart ct-golden-section"></div> </body>
Iar acesta va fi codul nostru js:
new Chartist.Line('.ct-chart', {
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6'],
series: [
[4, 2.5, 1, 6, 0.5],
[0, 3, 3, 1.2, 6],
[6, 1, 1.5, 2, 1],
[4, 5, 2, 1, 0, 5]
]
});
Acum avem un chart responsive.
Configurari avansate
Pentru a usura discutia pe aceasta tema am sa fac un bar chart cu ajutorul caruia am sa va arat anumite lucruri
new Chartist.Bar('.ct-chart', {
labels: ['Luni', 'Marti', 'Miercuri', 'Joi', 'Vineri', 'Sambata', 'Duminica'],
series: [
[3, 9, 1, 3, 5, 8, 10],
[4, 2, 6, 7, 6, 3, 10]
]
}, {
seriesBarDistance: 30,
axisX: {
showGrid: false
}
});
In optiunile de mai sus am setatdistanta barelor si am anuntat Chartist ca nu trebuie sa randeze grilele pe axa x.
In mod standard, label-urile de pe axa x sunt aliniate la stanga. Pentru a le centra avem nevoie de un stil CSS, si de asemenea dorim sa setam latimea barelor la 20 pixeli.
.ct-chart .ct-bar {
stroke-width: 20px;
}
.ct-chart .ct-label.ct-horizontal {
text-align: center;
}
Suprascrierea configurarilor responsive
Exemplul de mai sus functioneaza perfect pe monitoarele de desktop, dar nu si pe dispozitivele cu o rezolutie redusa. Barele sunt prea largi, label-urile sunt prea largi, iar label-urile contin prea mult text pentru a mai putea fi citit bine si bineinteles distanta dintre bare va fi prea mare.
Unele dintre aceste schimbari pot fi efectuate din CSS, schimband latimea barelor in media query, dar cum putem aplica asemena schimbari si pentru codul javascript? Chartist vine cu un mecanism numit responsive configuration override ce ne va usura viata.
Hai sa aruncam o privire la exemplul precendent si sa il rescriem gandindu-ne la o abordare mobile-first. Vom optimiza media query-urile pentru continutul cu care lucram si vom crea breakpoint-uri la 300px si la 600px.
ct-chart .ct-label.ct-horizontal {
text-align: center;
}
.ct-chart .ct-bar {
stroke-width: 5px;
}
@media screen and (min-width: 300px) {
.ct-chart .ct-bar {
stroke-width: 10px;
}
}
@media screen and (min-width: 600px) {
.ct-chart .ct-bar {
stroke-width: 20px;
}
}
In urmatorul exemplu folosim labelInterpolationFnc pentru a pasao functie ce foloseste interpolarea sau chiar inlocuieste valoarea originala a label-ului pentru o axa data. Asta inseamna ca putem controla modul in care zilele sunt afisate pe axa x.
new Chartist.Bar('.ct-chart', {
labels: ['Luni', 'Marti', 'Miercuri', 'Joi', 'Vineri', 'Sambata', 'Duminica'],
series: [
[3, 9, 1, 3, 5, 8, 10],
[4, 2, 6, 7, 6, 3, 10]
]
}, {
seriesBarDistance: 6,
axisX: {
showGrid: false,
// returneaza doar prima litera a zilei
labelInterpolationFnc: function(value) {
return value[0];
}
}
}, [
// Pe display-urile de peste 300px, schimbam distanta barelor si afisam doar primele 3 litere din label-uri
['screen and (min-width: 300px)', {
seriesBarDistance: 15,
axisX: {
labelInterpolationFnc: function(value) {
return value.slice(0, 3);
}
}
}],
// Pe display-urile de peste 600px, schimbam distanta barelor si afisam label-urile complet
['screen and (min-width: 600px)', {
seriesBarDistance: 30,
axisX: {
labelInterpolationFnc: function(value) { return value; }
}
}]
]);
Modificarea SVG folosind CSS
Trebuie sa va spun ca la acest capitol am avut parte de multe batai de cap si sper ca acest articol (sau cel putin aceasta parte de articol) sa va ajute.
Modificarea SVG-ului cu CSS este relativ simpla si eficienta pentru ca probabil aveti nevoie de un anumit stil pe care il veti refolosi. Puteti include clase CSS ce definesc aspectul si feel-ul charturilor, dar in acelasi timp tin logica separata de modul de afisare.
Iata o lista de proprietati CSS ce ne ajuta la definirea stilurilor SVG-urilor:
fill
Seteaza culoarea unei forme. Recomand folosirea RGBa.stroke
Seteaza culoarea outline-ului din jurul unei forme.stroke-width
Seteaza latimea outline-ului.stroke-dasharray
Specifica un stroke dasked (linie intrerupta) pentru outline.stroke-linecap
Seteaza un storke line-cap pentru outline. Poate fi setat laround,buttsausquare.
Animatii CSS
Chiar daca nu esti un mare fan al animatiilor cu siguranta te vei intalni cu o situatie in care vei fi nevoit sa le implementezi. InAcest articol voi exagera putin cu animatiile pentru ca majoritatea browserelor suporta tot felul de animatii, ba chiar ne permit folosirea proprietatilor stroke-dasharray si stroke-dashoffset.
Folosind un CSS3 putem obtine un efect uimitor pentru chart-ul nostru.
@keyframes width-pulse {
0% {
stroke-width: 6px
}
50% {
stroke-width: 14px;
}
100% {
stroke-width: 6px;
}
}
@keyframes dashoffset-seven {
0% {
stroke-dashoffset: 7px;
}
100% {
stroke-dashoffset: 0px;
}
}
@keyframes dasharray-craziness {
0% {
stroke-dasharray: 7px 2px;
}
80% {
stroke-dasharray: 7px 100px;
stroke-width: 10px
}
100% {
stroke-dasharray: 7px 2px;
}
}
.ct-chart .ct-label.ct-vertical,
.ct-chart .ct-label.ct-horizontal {
color: rgba(255, 255, 255, 0.5);
}
.ct-chart .ct-grid.ct-vertical,
.ct-chart .ct-grid.ct-horizontal {
stroke: rgba(255, 255, 255, 0.1);
stroke-dasharray: 2px;
shape-rendering: crispEdges;
}
.ct-chart .ct-series.ct-series-a .ct-line {
stroke: #4ECDC4;
stroke-width: 10px;
stroke-linecap: round;
animation: width-pulse 2s infinite;
}
.ct-chart .ct-series.ct-series-b .ct-line {
stroke: #C7F464;
stroke-width: 2px;
stroke-dasharray: 5px 2px;
animation: dashoffset-seven 200ms infinite linear;
}
.ct-chart .ct-series.ct-series-c .ct-line {
stroke: #FF6B6B;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 30px 5px;
animation: dasharray-craziness 10s infinite linear;
}
Extensibilitatea
Pentur ca Chartist foloseste SVG inline in DOM, extinderea functionalitatii este destul de simpla.
In acest exemplu am sa va arat cum sa adaugati tooltip-uri folosind jQuery. Cand utilizatorul pune mouse-ul deasupra unui anumit punct apare un tooltip care ii afiseaza o anumita valoare.
var $tooltip = $('<div class="tooltip tooltip-hidden"></div>').appendTo($('.ct-chart'));
$(document).on('mouseenter', '.ct-point', function() {
var seriesName = $(this).closest('.ct-series').attr('ct:series-name'),
value = $(this).attr('ct:value');
$tooltip.text(seriesName + ': ' + value);
$tooltip.removeClass('tooltip-hidden');
});
$(document).on('mouseleave', '.ct-point', function() {
$tooltip.addClass('tooltip-hidden');
});
$(document).on('mousemove', '.ct-point', function(event) {
$tooltip.css({
left: event.offsetX - $tooltip.width() / 2,
top: event.offsetY - $tooltip.height() - 20
});
});
In exemplul de mai sus am folosit evenimente normale din DOM pentur a adauga tooltip-uri simple. Poate ati observat ca folosesc atributul ct:value din line chart si atributul ct:series-name din series group. Chartist vine cu propriul namespace XML ce este folosit pentur a transmite anumite informatii catre SVG.
Resurse
- “Documentatie API” O multie de informatii despre libraria Chartist.
- “Exemple,” O multime de exemple.
Concluzie
Sper ca acest articol v-a fost catusi de putin folositor si daca tot aveti nelamuriri in legatura cu ChartistJS puteti sa ma contactati si am sa icnerc sa va ajut cat de repede pot.
