Brug Chart.js til at dreje data til interaktive diagrammer

Sep 14, 2025
hvordan

I teorien er skabende diagrammer ikke svært. Håndtering af trigonometrien, der kræves til et pieoversigt, er blandt de mest klassiske job, der bruges til træningsprogrammer. Der er mange diagrammende biblioteker, der viger for udviklernes opmærksomhed lige nu, men i denne artikel skal vi fokusere på, hvordan du bruger Open Source Tool Chart.js.

Vi vil sætte biblioteket gennem sine skridt, hvilket skaber et sæt udskrivbare diagrammer fra tilfældigt genererede data. Chart.js er en særlig populær Web Design Tool. Fordi det giver en unik afvejning mellem brugervenlighed og avancerede funktioner, så du kan oprette interaktive diagrammer og engagerende infographics. .

Med Chart.js kan du vælge mellem otte forskellige diagramtyper for at tilføje til dine hjemmesider med minimal indsats. Det nyligt tilføjede animationsmodul beriger diagrammerne med snazzy-looking visuals. Oprettelse af et nyt websted for at huse dine diagrammer? Få din Web Hosting. stedet på, og sørg for at prøve en top Website Builder. . Okay, lad os komme i gang.

Klik på ikonet øverst til højre for hvert billede for at forstørre det.

01. Implementer biblioteket

Som brug af chart.js er udbredt, kan du finde sin minificerede version fra forskellige CDN'er som Cloudflare. Du skal blot lægge det med en & lt; script & gt; tag, og sørg for at en & lt; lærred & gt; Objekt er nærliggende - Chart.js gør sin magi ved at bruge den gengivende infrastruktur, der leveres i denne widget. 

 & lt; html & gt;
& lt; hoved & 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; body & gt;
& lt; lærred ID = "Workarea" & GT;
& lt; / Canvas & GT;
& lt; / body & gt;
& lt; / html & gt;

02. Start initialisering

First, load up the framework

Først skal du indlæse rammen

Når rammen er lastet, involverer det næste trin at få et lærred2d-håndtag, der peger på & lt; lærred & gt; instans oprettet i det foregående trin. Dette kan så bruges til at skabe en ny forekomst af Diagram() klasse, som er ansvarlig for datahåndtering, gengivelse og interaktion. 

 & lt; script & gt;
(funktion () {
VAR CTX = DOCUMENT.
getelementbyid ('Workarea'). GetContext ('2D');
var diagram = nyt diagram (CTX,
{
Type: 'linje',
muligheder: {},
. . .
});
}) ();
& lt; / script & gt;

03. Tilføj en datakilde

line chart

For vores linjediagram er kun ét datasæt påkrævet

Diagramklasser tager en datakarkør, der giver en eller flere Datasæt objekter indeholdende den faktiske måleinformation. I tilfælde af vores linjediagram er der kun brug for et datasæt. Den leveres med det obligatoriske dataelement og et par valgfrie parametre, der styrer den faktiske displayproces. 

 var diagram = nyt diagram (CTX, {
Type: 'linje',
muligheder: {},
data: {
Etiketter: ["januar",
"Februar", "marts", "april", "maj", "juni",
"Juli"],
DATASETS: [{
Etiket: "Min første datasæt",
baggrundsfarve:
        'RGB (255, 99, 132)',
BorderColor:
'RGB (255, 99, 132)',
Data: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Stop eventuelle flimrende

Chart.js leveres med sofistikeret resizing logik, som desværre - har tendens til at få skærmstørrelser forkert fra tid til anden. Begrænser størrelsen af & lt; lærred & gt; element via CSS, desværre gør ikke tricket. I stedet skal både vedligeholdelse af billedforhold og responsivitet være deaktiveret via valgfeltet, der ledsager diagramklassen konstruktør. 

 & lt; lærred ID = "Workarea" stil = "Bredde: 800px;
Højde: 600px; "& GT; & LT; / Canvas & GT; & LT; / Canvas & GT;
& lt; script & gt;
(funktion () {
VAR CTX = DOCUMENT.
getelementbyid ('Workarea'). GetContext ('2D');
var diagram = nyt diagram (CTX,
{
Type: 'linje',

muligheder: {
Responsive: False, CaidedaspectRatio:
FALSE},

05. Tilføj layouts.

For at omskrive Andrei Tupolev: Nu hvor den lille flyver, lad os få det større. Stilladset viste ledsaget af dette trin 'multiplicerer' vores diagram - i stedet for at arbejde med et lærredelement skaber vi nu i alt fire af dem og arrangerer dem på skærmen på en måde svarende til et lecroyoscilloskop. Desværre fungerer det ikke helt som beregnet. 

 & lt; lærred ID = "Workarea"
Style = "Position: Absolut; Top: 0%; Venstre: 0%;
Bredde: 49%; Højde: 49%; "& GT; & LT; / Canvas & GT; & LT; / Canvas & GT;
& lt; lærred ID = "Workarea2"
Style = "Position: Absolut; Top: 0%; Venstre: 51%;
Bredde: 49%; Højde: 49%; "& GT; & LT; / Canvas & GT; & LT; / Canvas & GT;
& lt; lærred ID = "Workarea3"
Style = "Position: Absolut; Top: 51%; Venstre: 0%;
Bredde: 49%; Højde: 49%; "& GT; & LT; / Canvas & GT; & LT; / Canvas & GT;
& lt; lærred ID = "Workarea4"
Style = "Position: Absolut; Top: 51%; Venstre: 51%;
Bredde: 49%; Højde: 49%; "& GT; & LT; / Canvas & GT; & LT; / Canvas & GT;

06. TAMME ALLE GENNEMFØRELSER

Wrapper <div> tags enforce a structure from the outside

Wrapper & lt; div & gt; Tags håndhæver en struktur udefra

Den sikreste måde at håndtere Chart.js diagrammer i komplekse layouter indebærer at bruge wrapper & lt; div & gt; tags. De håndhæver en struktur udefra og derved sikrer, at den interne layoutmotor ikke kan gøre mere skade end nødvendigt. I dette tilfælde sikrer dog at genaktivere funktionsfunktionen. 

 & lt; div stil = "position: absolut; top: 0%; venstre:
0%; Bredde: 49%; Højde: 49%; "& GT;
& lt; lærred ID = "Workarea" & GT; & LT; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; div stil = "position: absolut; top: 0%; venstre:
51%; Bredde: 49%; Højde: 49%; "& GT;
& lt; lærred ID = "Workarea2" & GT; & LT; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; div stil = "position: absolut; top: 51%; venstre:
0%; Bredde: 49%; Højde: 49%; "& GT;
& lt; lærred ID = "Workarea3" & GT; & lt; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; div stil = "position: absolut; top: 51%; venstre:
51%; Bredde: 49%; Højde: 49%; "& GT;
& lt; lærred ID = "Workarea4" & GT; & LT; / Canvas & GT; & lt; /
Canvas & GT;
& lt; / div & gt;
& lt; script & gt;
DOCUMENT.ADDEVENTLISTENER ("DOMCONTENTL
Oaded ", funktion () {
VAR CTX = DOCUMENT.
getelementbyid ('Workarea'). GetContext ('2D');
var diagram = ny
Diagram (CTX, {
type:
'linje',
muligheder:
{},

07. Prøv BARS.

Creating bar charts is simple

Oprettelse af bar diagrammer er simpelt

Altid rendering linjer diagrammer bliver kedeligt hurtigt. Lad os spruce ting op ved at ændre typen Ejendom til bar, hvorved der gives stangdiagrammer som den, der er vist i figuren, der ledsager dette trin. Vi fremmer datafeltet til 'globalt' omfang for at eliminere genbrug. 

 & lt; script & gt;
DOCUMENT.ADDEVENTLISTENER ("DOMCONTENTLOASE", FUNKTION () {
var myfield = {
Etiketter: ["januar", "februar", "marts", "april", "maj", "juni", "juli"],
DATASETS: [{
etiket:
"Mit første datasæt",

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

BorderColor: 'RGB (255, 99, 132)',
Data: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = DOCUMENT.
getelementbyid ('Workarea4'). GetContext ('2D');
diagram = nyt diagram (CTX, {
Type: 'Bar',
muligheder: { },
Data: MyField.
});
});
& lt; / script & gt;

08. Undgå tærter

pie charts taking over the screen

PIE-diagrammer kræver særlig behandling, hvis du ikke vil have dem til at fylde hele din skærm

I teorien kan et cirkeldiagram gengives i samme retning. Fjern farveegenskaberne for at forhindre ensartet udseende, og indstil typegenskaben til tærte. Desværre træner dette ikke helt ud - når det er gjort, vil PIE-diagrammet udfylde hele skærmen. Dette skyldes en specialitet i den cirkelgenderer, der bruger 'Større' af de to egenskaber for at bestemme Pie Radius. 

 var mypie = {
Etiketter: ["januar", "februar", "marts", "april", "maj", "juni", "juli"],
DATASETS: [{
Etiket: "Min første datasæt",
Data: [0, 10, 5, 2, 20, 30, 45],
}]
};
CTX = Document.GetelementById ('Workarea2').
getcontext ('2d');
diagram = nyt diagram (CTX, {
Type: 'Pie',
muligheder: { },
Data: MyPIE.
});

09. Løs problemet

Åbn "INDEX.JS" -filen, der er oprettet i trin 1. Begynd ved at angive graftypen som linje og tilføje de data, der skal vises visuelt som vist nedenfor. 

 & lt; body & gt;
& lt; div stil = "position: absolut; top: 0%;
Venstre: 0%; Bredde: 49%; Højde: 49%; "& GT;
& lt; lærred ID = "Workarea" & GT; & lt; /
Canvas & GT; & LT; / Canvas & GT;
& lt; / div & gt;
& lt; div stil = "position: absolut; top: 0%;
Venstre: 51%; Bredde: 29%; Højde: 49%; "& GT;
& lt; lærred ID = "Workarea2" & GT; & lt; /
Canvas & GT; & LT; / Canvas & GT;
& lt; / div & gt;

10. Lad chart.js redde diagrammet

En anden tilgang til at løse problemet indebærer at genaktivere vedligeholdelsesratio. funktion.På denne måde får diagrammemotoren lov til at genoptage diagrammet, da det ser pasform, hvilket sikrer, at hele cirklen vises på skærmen. 

 CTX = Document.GetelementById ('Workarea2').
getcontext ('2d');
diagram = nyt diagram (CTX, {
Type: 'Pie',
Valg: {VedligeholdelseAspectRatio: FALSE
},
Data: MyPIE.
});

Næste side: Afslut oprettelse af dit interaktive diagram med diagram.js

  • 1
  • 2.

Nuværende side: Brug af Chart.js: trin 01-10

hvordan - Mest populære artikler

Sådan oprettes og optimerer din Smugmug Storefront

hvordan Sep 14, 2025

(Billedkredit: Andre Furtado på Pexels) En simpel hjemmesidebygger, der også virker som en af ​​de Beds..

Kom godt i gang med Artrage

hvordan Sep 14, 2025

(Billedkredit: Steve Goad) Kom godt i gang med Artrage 01. Få opstillet i Artrage..

21 trin til Super Speedy JavaScript

hvordan Sep 14, 2025

(Billedkredit: Pexels.com) Ved første øjekast lyder parallelbehandling som en invitation til gratis frokost - at ku..

Sådan oprettes en 3D-varulv i Unreal Engine

hvordan Sep 14, 2025

Konceptet, model, tekstur og materialeopsætning til dette grusomme billede af en varulv - som blev oprettet for Kunoichi, et stealth-orienteret spil i en fantasy verden - blev fuldført helt..

Sådan maler du et bybillede med farveblokke

hvordan Sep 14, 2025

Storslået udsigt, fantastiske skyliner og smukke bybilleder gør gode fotografier, men kan være ret skræmmende fra kunstnerens..

Sådan flyttes mellem Daz Studio og Cinema 4D

hvordan Sep 14, 2025

Flytning mellem programmer kan være forvirrende. Jeg har tendens til at holde sig til fire fødevaregrupper - Cinema 4D, Zbrush,..

Sådan opretter du et animeret webbanner i Photoshop

hvordan Sep 14, 2025

At skabe webbannere er ikke de mest glamourøse job i verden, men det er noget, som hver designer vil blive forpligtet til at gøre på et tidspunkt i deres karriere, sandsynligvis mange gang..

Sådan kombineres skulpturerede og malede forskydningskort

hvordan Sep 14, 2025

Nogle gange er det mere effektivt at kombinere forskellige forskydningskort på Render tid, snarere end at skulpturere dem alle. ..

Kategorier