A chart.js felhasználása az adatok interaktív diagramokká történő bekapcsolásához

Sep 11, 2025
kézikönyv

Elméletileg a diagramok létrehozása nem nehéz. A kördiagramhoz szükséges trigonometria kezelése a képzési programozók számára használt legklasszikusabb munkahelyek közé tartozik. Rengeteg diagramming könyvtárak vannak a fejlesztők véleményeiről, de ebben a cikkben a nyílt forráskódú eszköz diagram.js használatára összpontosítunk.

A könyvtárat a lépéseien keresztül helyezzük el, létrehozva egy nyomtatható diagramokat véletlenszerűen generált adatokból. A chart.js különösen népszerű Web Design Tool Mivel egyedülálló kompromisszumot kínál a könnyű használat és a fejlett funkciók között, lehetővé téve az interaktív diagramok létrehozását és bevonását infographics .

A chart.js segítségével nyolc különböző diagramtípust választhat a webhelyek hozzáadásához, minimális erőfeszítéssel. A közelmúltban hozzáadott animációk modul gazdagítja a diagramokat snazzy-kinézetű látványokkal. Új webhely létrehozása a diagramok házához? Szerezd meg web hosting helyszínen, és győződjön meg róla, hogy megpróbálja a csúcsot weboldal építője . Oké, kezdjünk el.

Kattintson az ikonok jobb felső sarkában lévő ikonra a nagyításhoz.

01. A könyvtár telepítése

A chart.js használatakor széles körben elterjedt, megtalálhatja a különböző CDN-k, például a CloudFlare minimális verzióját. Egyszerűen töltse be a & lt; script & gt; címke, és győződjön meg arról, hogy a & lt; vászon & gt; Az objektum a közelben van - A chart.js a mágiáját a widgetben megadott renderelő infrastruktúra segítségével használja. 

 & lt; 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; test & gt;
& lt; vászonazonosító = "Workarea" & gt;
& lt; / vászon & gt;
& lt; / test & gt;
& lt; / html & gt;

02. Indítsa el az inicializációt

First, load up the framework

Először töltse fel a keretet

Amikor a keret betöltődik, a következő lépés magában foglalja a vászon2D fogantyújának megszerzését & lt; vászon & gt; példa az előző lépésben. Ezután felhasználható egy új példány létrehozására Diagram() Osztály, amely felelős az adatkezeléshez, a rendereléshez és az interakcióért. 

 & lt; script & gt;
(funkció () {
var ctx = dokumentum.
GetElementbyid ("Workarea"). GetContext ('2D');
VAR chart = új diagram (CTX,
{
Típus: 'Line',
lehetőségek: {},
. . .
});
}) ();
& lt; / script & gt;

03. Adja meg az adatforrást

line chart

A vonalrajzunkhoz csak egy adatkészlet szükséges

A diagramosztályok olyan adatmutatót készítenek, amely egy vagy több Adatlap a tényleges mérési információt tartalmazó objektumok. A vonalrajzunk esetében csak egy adatkészlet szükséges. A kötelező adatelem és néhány opcionális paraméterrel rendelkezik, amely a tényleges megjelenítési folyamatot szabályozza. 

 VAR chart = új diagram (CTX, {
Típus: 'Line',
lehetőségek: {},
Adatok: {
Címkék: ["január",
"Február", "Március", "Április", "május", "június",
"Július"],
Adatkészletek: [{
Címke: "Az első adatkészletem",
háttérszín:
        "RGB (255, 99, 132)",
BorderColor:
"RGB (255, 99, 132)",
Adatok: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Állítsa le a villogást

A chart.js kifinomult átméretező logikával rendelkezik, amely - sajnos - az időről időre rossz méretméreteket kap. Korlátozza a & lt; vászon & gt; Element CSS-en keresztül, sajnos, nem teszi meg a trükköt. Ehelyett mindkét képarány karbantartást és érzékenységet kell letiltani a diagramosztályt kísérő opciós mezőn keresztül. 

 & lt; vászonazonosító = "Workarea" style = "Width: 800px;
Magasság: 600px; "& gt; & lt; / vászon & gt; canvas & gt;
& lt; script & gt;
(funkció () {
var ctx = dokumentum.
GetElementbyid ("Workarea"). GetContext ('2D');
VAR chart = új diagram (CTX,
{
Típus: 'Line',

lehetőségek: {
Érzékeny: hamis, karbantartomány:
FALSE},

05. Az elrendezések hozzáadása

Andrei Tupolev parafrázisához: Most, hogy a kicsi repül, hozza fel a nagyobbat. Az állványzat látható kísérő ezt a lépést „szoroz” mi diagram - a munka helyett egy Canvas elem, most létre, összesen négyen, és gondoskodik azok a képernyőn hasonló módon egy LeCroy oszcilloszkóp. Sajnos, ez nem egészen a tervezett módon működik. 

 & lt; vászonazonosító = "Workarea"
Stílus = "Pozíció: abszolút; Top: 0%, balra: 0%;
Szélesség: 49%; Magasság: 49%; "& gt; & lt; / vászon & gt; canvas & gt;
& lt; vászonazonosító = "Workarea2"
Stílus = "Pozíció: abszolút; Top: 0%, balra: 51%;
Szélesség: 49%; Magasság: 49%; "& gt; & lt; / vászon & gt; canvas & gt;
& lt; vászonazonosító = "Workarea3"
Stílus = "Pozíció: abszolút; Top: 51%, balra: 0%;
Szélesség: 49%; Magasság: 49%; "& gt; & lt; / vászon & gt; canvas & gt;
& lt; vászonazonosító = "Workarea4"
Stílus = "Pozíció: abszolút; Top: 51%, balra: 51%;
Szélesség: 49%; Magasság: 49%; "& gt; & lt; / vászon & gt;> vászon & gt;

06. Minden renderelési hibát

Wrapper <div> tags enforce a structure from the outside

Wrapper & lt; div & gt; A címkék külső szerkezetet érvényesítenek

A CHART.JS diagramok komplex elrendezésének legbiztonságosabb módja a wrapper használatával jár & lt; div & gt; Címkék. Elengedve egy szerkezetet kívülről, ezáltal biztosítva, hogy a belső elrendezés motor ne tegyen több kárt, mint a szükséges. Ebben az esetben azonban biztosítani kell, hogy újra engedélyezze a felelősséget. 

 & lt; div style = "Pozíció: abszolút; Top: 0%, balra:
0%; Szélesség: 49%; Magasság: 49%; "& gt;
& lt; vászonazonosító = "Workarea" & gt; & lt; / vászon & gt;
vászon & gt;
& lt; / div & gt;
& lt; div style = "Pozíció: abszolút; Top: 0%, balra:
51%; Szélesség: 49%; Magasság: 49%; "& gt;
& lt; vászonazonosító = "Workarea2" & gt; & lt; / vászon & gt;
vászon & gt;
& lt; / div & gt;
& lt; div style = "Pozíció: abszolút; Top: 51%, balra:
0%; Szélesség: 49%; Magasság: 49%; "& gt;
& lt; vászonazonosító = "Workarea3" & gt; & lt; / vászon & gt;
vászon & gt;
& lt; / div & gt;
& lt; div style = "Pozíció: abszolút; Top: 51%, balra:
51%; Szélesség: 49%; Magasság: 49%; "& gt;
& lt; vászonazonosító = "Workarea4" & gt; & lt; / vászon & gt;
vászon & gt;
& lt; / div & gt;
& lt; script & gt;
document.addeventlistener ("domcontentl
Oaded ", funkció () {
var ctx = dokumentum.
GetElementbyid ("Workarea"). GetContext ('2D');
var chart = új
Diagram (CTX, {
típus:
'vonal',
lehetőségek:
{},

07. Próbálja ki a rácsokat

Creating bar charts is simple

A sávdiagramok létrehozása egyszerű

A vonaldiagramok mindig gyorsan megjelennek. Legyen a dolgokat, ha megváltoztatja a típusú tulajdonságot a sávra, ezáltal rámutamú rajzdiagramokat, például a lépést kísérő ábrán látható. Az adatmezőt "globális" hatókörre támasztjuk elő az újrafelhasználás megszüntetése érdekében. 

 & lt; script & gt;
Document.addeventlistener ("DOMCONTENTOMED", funkció () {
var myfield = {
Címkék: ["január", "február", "március", "április", "május", "június", "július"],
Adatkészletek: [{
címke:
"Az első adatkészletem",

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

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

. . .
CTX = dokumentum.
GetElementbyid ("Workarea4"). GetContext ('2D');
Chart = Új diagram (CTX, {
Típus: 'Bar',
lehetőségek: { },
Adatok: Myfield
});
});
& lt; / script & gt;

08. Kerülje el a pite-t

pie charts taking over the screen

A kördiagramok különleges kezelést igényelnek, ha nem szeretné, hogy töltse ki az egész képernyőt

Elméletileg egy kördiagramot lehet ugyanazon vonalak mentén. Távolítsa el a szín tulajdonságait, hogy megakadályozza az egységes megjelenést, és állítsa be a típusú tulajdonságot a pite-hez. Sajnos, ez nem egészen működik - amikor kész, a kördiagram kitölti a teljes képernyőt. Ezt a pite-renderer specialitása okozza, amely a két tulajdonság "nagyobb" -t használja a pite sugár meghatározásához. 

 var mypie = {
Címkék: ["január", "február", "március", "április", "május", "június", "július"],
Adatkészletek: [{
Címke: "Az első adatkészletem",
Adatok: [0, 10, 5, 2, 20, 30, 45],
}]
};
CTX = Document.getElementbyid ('Workarea2').
getcontext ("2d");
Chart = Új diagram (CTX, {
Típus: "Pie",
lehetőségek: { },
Adatok: Mypie
});

09. A probléma megoldása

Nyissa meg az "index.js" fájlt az 1. lépésben létrehozott "index.js" fájlt. Kezdje el a grafikon típusát, és adja hozzá az adatokat az alábbiak szerint. 

 & lt; test & gt;
& lt; div style = "pozíció: abszolút; Top: 0%;
Bal: 0%; Szélesség: 49%; Magasság: 49%; "& gt;
& lt; vászonazonosító = "Workarea" & gt;
vászon & gt; & lt; canvas & gt;
& lt; / div & gt;
& lt; div style = "pozíció: abszolút; Top: 0%;
Bal: 51%; Szélesség: 29%; Magasság: 49%; "& gt;
& lt; vászonazonosító = "Workarea2" & gt;
vászon & gt; & lt; canvas & gt;
& lt; / div & gt;

10. Legyen chart.js Rescale a diagram

A probléma megoldásának másik megközelítése magában foglalja a karbantartomány funkció.Így a diagrammotor engedélyezheti a diagramot, ahogy úgy látja, hogy illeszkedik, biztosítva, hogy az egész kör megjelenjen a képernyőn. 

 CTX = Document.getElementbyid ('Workarea2').
getcontext ("2d");
Chart = Új diagram (CTX, {
Típus: "Pie",
Opciók: {karbantartomány: FALSE
},
Adatok: Mypie
});

Következő oldal: Befejezés Az interaktív diagram létrehozása a chart.js-vel

  • 1
  • 2

Aktuális oldal: A chart.js használatával: 01-10 lépések

kézikönyv - Most Popular Articles

Instagram Reels Tutorial: A kezdő útmutató

kézikönyv Sep 11, 2025

(Kép hitel: Facebook) Ez az Instagram Reels bemutatója használja a videó funkciót, mint egy profi. Biztosan lát..

Lino printmaking: bevezetés

kézikönyv Sep 11, 2025

(Kép hitel: Meg Buick) Lino sokszorosított grafika egy olyan módszer, dombornyomás, ami magában foglalja faragá..

Hogyan rajzoljon egy karaktert a tollban és a tintában

kézikönyv Sep 11, 2025

Művészként egy játékstúdióban elfelejtettem a legtöbb hagyományos médiumot, de a tinta mindig visszahívok hozzám. Egy..

Szétszóró fák v-ray-vel

kézikönyv Sep 11, 2025

Részletek hozzáadása a jelenet mindig az a mód, hogy menjen, ha szeretné elérni a realizmust az Önben 3D Art ..

Koncepció tervezési tippek a művészek számára

kézikönyv Sep 11, 2025

Page 1 of 2: 1 oldal 1 oldal 2. oldal A fő feladata a vizuális fe..

Festeni egy eredeti tarot kártyát

kézikönyv Sep 11, 2025

Amikor megkaptam az első Tarot fedélzetemet, a gyönyörű műalkotások és az összes kártyát kísérő történeteket elvo..

Epikus New York-i jelenet festése

kézikönyv Sep 11, 2025

Ehhez a műhelyhez festem az egyik kedvenc témámat: egy New York-i híd. A Brooklyn hídot sokszor különböző fényben festettem, így a projekt a Manhattan-hídot választottam. ..

Hogyan lehet javítani az e-kereskedelmi webhelyek teljesítményét

kézikönyv Sep 11, 2025

Tammy Everts előadást ad a tervezés, a teljesítmény és a konverziós arányok között ..

Kategóriák