Utilizați diagrama.js pentru a transforma datele în diagrame interactive

Sep 13, 2025
să

În teorie, crearea diagramelor nu este dificilă. Manipularea trigonometriei necesare pentru o diagramă Pie este printre cele mai clasice locuri de muncă utilizate pentru programatorii de formare. Există o mulțime de biblioteci de diagrame care se luptă pentru atenția dezvoltatorilor chiar acum, dar în acest articol, ne vom concentra pe modul de utilizare a instrumentului open source.

Vom pune biblioteca prin pași, creând un set de diagrame imprimabile din datele generate la întâmplare. Chart.js este un special popular Instrumentul de design web deoarece oferă un compromis unic între ușurința utilizării și caracteristicile avansate, permițându-vă să creați diagrame interactive și angajarea Infographics .

Cu Chart.Js, puteți alege dintre opt tipuri diferite de diagrame pentru a adăuga pe site-urile dvs. cu un efort minim. Modulul de animație adăugată recent îmbogățește diagramele cu vizuale asemănătoare cu Snazzy. Crearea unui nou site pentru a vă găzdui diagramele? Ia-ti web hosting la fața locului, și asigurați-vă că încercați un top Builder de site-uri web . Bine, să începem.

Faceți clic pe pictograma din partea dreaptă sus a fiecărei imagini pentru ao mări.

01. Implementați biblioteca

Ca utilizare a Chart.Js este larg răspândită, puteți găsi versiunea sa mintificată de la diverse CDN, cum ar fi Cloudflare. Pur și simplu încărcați-l cu un & lt; script & gt; etichetă și asigurați-vă că a & lt; panza & gt; Obiect este în apropiere - Chart.js își face magia utilizând infrastructura de redare oferită în acest widget. 

 & html & gt;
& lt; head & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Chart.min.js "& gt;
& lt; / script & gt;
& lt; / head & gt;
& lt; corp & gt;
& lt; canvas id = "workarea" & gt;
& lt; / canvas & gt;
& lt; / corp & gt;
& lt; / html & gt;

02. Începeți inițializarea

First, load up the framework

În primul rând, încărcați cadrul

Când cadrul este încărcat, următorul pas implică obținerea unui mâner Canvas2D care indică la & lt; panza & gt; instanță creată în etapa precedentă. Acest lucru poate fi apoi folosit pentru a crea o nouă instanță a Diagramă() Clasa, care este responsabilă pentru manipularea, redarea și interacțiunea datelor. 

 și lt; script & gt;
(Funcție () {
var ctx = document.
GetelementByid ("Workarea"). GetContext ('2d');
var chart = Noua diagramă (CTX,
{
Tip: "Linie",
Opțiuni: {},
. . .
});
}) ();
& lt; / script & gt;

03. Adăugați o sursă de date

line chart

Pentru diagrama noastră, este necesară doar un singur set de date

Clasele diagramei iau un indicator de date care oferă una sau mai multe Setul de date obiecte care conțin informațiile reale de măsurare. În cazul diagramei noastre de linie, este nevoie de un singur set de date. Acesta vine cu elementul de date obligatoriu și câțiva parametri opționali care guvernează procesul real de afișare. 

 var chart = Noua diagramă (CTX, {
Tip: "Linie",
Opțiuni: {},
date: {
Etichete: ["ianuarie",
"Februarie", "martie", "aprilie", "mai", "iunie",
"Iulie"],
Seturi: [{{{
Etichetă: "Primul meu set de date",
culoare de fundal:
        "RGB (255, 99, 132)",
FrontColor:
"RGB (255, 99, 132)",
Date: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Opriți orice pâlpâire

Chart.js vine cu logica de redimensionare sofisticată, care, din păcate, tinde să obțină dimensiunile ecranului greșit din când în când. Limitând dimensiunea & lt; panza & gt; Element prin CSS, din păcate, nu face trucul. În schimb, atât menținerea raportului de aspect, cât și de responsabilitate trebuie dezactivate prin câmpul de opțiuni care însoțește constructorul claselor de diagrame. 

 & lt; canvas id = "Workarea" stil = "lățime: 800px;
Înălțime: 600px; "& lt; / gt; / lt; / canvas & gt;
& lt; script & gt;
(Funcție () {
var ctx = document.
GetelementByid ("Workarea"). GetContext ('2d');
var chart = Noua diagramă (CTX,
{
Tip: "Linie",

Opțiuni: {
Responsabil: FALSE, MINEASPECTRATIO:
fals},

05. Adăugați layouts.

Pentru a parafraza Andrei Tupolev: Acum că micul zboară, să aducem mai mare. Schelele arătate care însoțește această etapă "Multiplică" Diagrama noastră - În loc să lucrez cu un element de panza, acum creăm un total de patru dintre ei și să le aranjăm pe ecran într-o manieră similară unui osciloscop de lecroy. Din păcate, acest lucru nu funcționează așa cum intenționat. 

 & lt; Canvas ID = "Workarea"
Style = "Poziția: Absolut; Top: 0%; stânga: 0%;
Lățime: 49%; Înălțime: 49%; "& gt; / canvas & gt; / lt; / canvas & gt;
& lt; canvas id = "workarea2"
Style = "Poziția: Absolut; Top: 0%; stânga: 51%;
Lățime: 49%; Înălțime: 49%; "& gt; / canvas & gt; / lt; / canvas & gt;
& lt; canvas id = "workarea3"
stil = "Poziția: Absolut; Top: 51%; stânga: 0%;
Lățime: 49%; Înălțime: 49%; "& gt; / canvas & gt; / lt; / canvas & gt;
& lt; Canvas id = "Workarea4"
stil = "Poziția: Absolut; Top: 51%; stânga: 51%;
Lățime: 49%; Înălțime: 49%; "& lt; / gt; / lt; / canvas & gt;

06. îmblânzi orice erori de redare

Wrapper <div> tags enforce a structure from the outside

Wrapper & Lt; Div & Gt; Etichetele impune o structură din exterior

Cea mai sigură modalitate de a gestiona diagramele Chart.Js în machete complexe implică utilizarea ambalajului & Lt; div & gt; Etichete. Ei impune o structură din exterior, asigurându-se astfel că motorul layout-ului intern nu poate face mai mult rău decât este necesar. În acest caz, totuși, asigurați-vă să reactivați caracteristica de reactivitate. 

 "Div stil =" Poziție: absolut; Top: 0%; stânga:
0%; Lățime: 49%; Înălțime: 49%; "& GT;
& lt; canvas id = "workarea" & gt; / lt; / lt; /
Canvas & GT;
& lt; / div & gt;
& Lt; div Stil = "Poziția: Absolut; Top: 0%; stânga:
51%; Lățime: 49%; Înălțime: 49%; "& GT;
"Canvas id =" workarea2 "& gt; / lt; / lt; /
Canvas & GT;
& lt; / div & gt;
"Div stil =" poziție: absolut; top: 51%; stânga:
0%; Lățime: 49%; Înălțime: 49%; "& GT;
"Canvas id =" workarea3 "& gt; / lt; / lt; /
Canvas & GT;
& lt; / div & gt;
"Div stil =" poziție: absolut; top: 51%; stânga:
51%; Lățime: 49%; Înălțime: 49%; "& GT;
"Canvas id =" workarea4 "& gt; / lt; / lt; /
Canvas & GT;
& lt; / div & gt;
& lt; script & gt;
document.addeventlistener ("DomContentl
odată ", funcția () {
var ctx = document.
GetelementByid ("Workarea"). GetContext ('2d');
var chart = nou
Diagramă (CTX, {
tip:
'linia',
Opțiuni:
{},

07. Încercați bare.

Creating bar charts is simple

Crearea de grafice de bare este simplă

Întotdeauna prelungirea diagramelor de linie devine plictisitoare repede. Să murim lucrurile prin schimbarea proprietății de tip la bară, dând astfel diagrame de bare, cum ar fi cea prezentată în figura care însoțește această etapă. Promovăm câmpul de date în domeniul "global" pentru a elimina reutilizarea. 

 și lt; script & gt;
document.addeventlistener ("domcontentenload", funcția () {
Var Myfield = {
Etichete: ["ianuarie", "februarie", "martie", "aprilie", "mai", "iunie", "iulie"],
Seturi: [{{{
eticheta:
"Primul meu set de date",

BackgroundColor: RGB (255, 99, 132) ",

FrontColor: "RGB (255, 99, 132)",
Date: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = document.
GetelementByid ("Workarea4 '). GetContext (' 2d ');
diagrama = Noua diagramă (CTX, {
Tipul: "Bar",
Opțiuni: { },
Date: Myfield.
});
});
& lt; / script & gt;

08. Evitați piesele

pie charts taking over the screen

Piesele de plăci necesită un tratament special dacă nu doriți să vă completeze întregul ecran

În teorie, o diagramă plăcintă poate fi redată în aceleași linii. Scoateți proprietățile de culoare pentru a preveni aspectul uniform și pentru a seta proprietatea tipului la plăcintă. Din păcate, acest lucru nu funcționează prea mult - când este făcut, diagrama plăcintă va umple întregul ecran. Acest lucru este cauzat de o specialitate a Rendererului Pie, care utilizează "mai mare" dintre cele două proprietăți pentru a determina raza de plăcintă. 

 var mypie = {
Etichete: ["ianuarie", "februarie", "martie", "aprilie", "mai", "iunie", "iulie"],
Seturi: [{{{
Etichetă: "Primul meu set de date",
Date: [0, 10, 5, 2, 20, 30, 45],
}]
};
CTX = document.getelementbyid ("Workarea2 ').
getcontext ('2d');
diagramă = Noua diagramă (CTX, {
Tip: "Pie",
Opțiuni: { },
Date: Mypie.
});

09. Rezolvați problema

Deschideți fișierul "index.js" creat la pasul 1. Începeți prin specificarea tipului de grafic ca linie și adăugarea datelor care urmează să fie reprezentate vizual, după cum se arată mai jos. 

 & Lt; corp & gt;
"Div stil =" poziție: absolut; top: 0%;
stânga: 0%; Lățime: 49%; Înălțime: 49%; "& GT;
& lt; canvas id = "workarea" & gt; / lt; /
Canvas & gt; / lt; / canvas & gt;
& lt; / div & gt;
"Div stil =" poziție: absolut; top: 0%;
stânga: 51%; Lățime: 29%; Înălțime: 49%; "& GT;
& lt; canvas id = "workarea2" & gt; / lt; /
Canvas & gt; / lt; / canvas & gt;
& lt; / div & gt;

10. Lăsați diagrama de salvare a diagramei

O altă abordare de rezolvare a problemei implică re-dezactivarea MenținețiSpectratio. caracteristică.În acest fel, motorul de diagramă este lăsat să salveze diagrama, așa cum consideră că se potrivește, asigurându-se că întregul cerc apare pe ecran. 

 CTX = document.getelementbyid ("Workarea2 ').
getcontext ('2d');
diagramă = Noua diagramă (CTX, {
Tip: "Pie",
Opțiuni: {MenținereaSpecTratio: FALSE
},
Date: Mypie.
});

Pagina următoare: Finalizați crearea graficului interactiv cu Chart.Js

  • 1.
  • 2.

Pagina curenta: Folosind Chart.JS: Pași 01-10

să - Cele mai populare articole

Designer de afinitate: Cum să utilizați Pixel Persona

să Sep 13, 2025

Affinity Designer este un instrument popular de editare a vectorilor pentru Mac, Windows și Acum iPad. . Aplicaț..

vopsea un iepure răutăcios în acuarelă

să Sep 13, 2025

După ce am studiat zoologia, animalele și viața sălbatică au fost întotdeauna o mare pasiune pentru mine și nu mă obosesc niciodată de a le picta. Suntem norocoși să trăim în zon..

Creați o imagine interactivă parallax

să Sep 13, 2025

Parallax defilând nu mai este garanția Grabber-ului a fost, dar există și alte modalități de utilizare a tehnicilor paralax pentru..

Cum se creează joc de artă stilizată

să Sep 13, 2025

Stilul de artă al jocului video de supraviețuire de primă persoană Întuneric lung. poate fi înșelător difi..

Cum se creează glazuri cu acuarelă

să Sep 13, 2025

Pentru acest atelier, te voi lua pas cu pas printr-una din picturile mele - acoperind totul de la concept de schiță la ..

O introducere la testul de frontend

să Sep 13, 2025

Pagina 1 din 2: Diferite tipuri de teste de frontend (și când să le folosească) ..

Cum de a picta o scenă de pădure fantezie de vis

să Sep 13, 2025

Pictorii de rococo din secolul al XVIII-lea au folosit imaginația, paletele de vis, atmosfera romantică și perii plini de via�..

Creați haine 3D cu crestături și pliuri realiste

să Sep 13, 2025

Efectuarea de haine virtuale realiste este una dintre cele mai dificile sarcini de la inovația de animație CG. Îmbrăcămintea..

Categorii