Hodnotenia editora: Hodnotenia používateľov:[Celkovo: 0 Priemer: 0].ilfs_responsive_below_title_1 { width: 300px; } @media(min-width: 500px) {.ilfs_responsive_below_title_1 { width: 300px; } } @media(min-width: 800px) {.ilfs_responsive_below_title_1 { width: 336px; } }
Chartist je bezplatná knižnica na generovanie grafov SVG s otvoreným zdrojom, ktorú je možné použiť. Je veľmi pokročilý a podporuje generovanie množstva grafov s množstvom parametrov. Pomocou toho môžete vytvárať farebné grafy ľubovoľnej veľkosti a vkladať ich na svoj web. Podporuje dokonca animáciu pomocou CSS, a preto pomocou tejto knižnice budete môcť generovať animované tabuľky a grafy.
Pri vytváraní panelov a webových stránok na zobrazenie niektorých údajov súvisiacich so správami potrebujete grafy. Mnohokrát potrebovali byť dynamické alebo statické. Existujú na to nástroje, ale nie ako Chartist. Toto je pravdepodobne jeden svojho druhu. Dodáva sa s veľmi podrobnou dokumentáciou a veľmi dobrými príkladmi, takže sa môžete naučiť generovať grafy veľmi rýchlo.
Zoznam podporovaných typov grafov podľa Chartist:
Pruhový graf (skladaný a vodorovný vrátane) Čiarový graf Koláčový graf Plošný graf prstencový graf Mierkový graf Čiarový rozptyl Diagram Animovaný SVG Trasa bipolárneho čiarového grafu Časové série
Funkcie grafov generovaných Chartistom:
Extrémne citlivá konfigurácia. Umiestnenie štítkov Viacriadkové štítky Prekrývajúce sa pruhy pre mobil Diery v údajoch Animácia CSS Animácia SVG Pokročilé animácie SMIL Podpora zásuvných modulov
Ako používať Chartsit na generovanie grafov SVG?
Existuje viacero spôsobov použitia tejto knižnice. V závislosti od toho, aký ste vývojár frontendu, ho môžete použiť. Dodáva sa ako modul Node a tiež ako vložiteľný súbor skriptu, ktorý môžete podávať priamo v HTML cez CDN.
Pre jednoduchosť to môžete použiť v HTML dokumentoch celkom jednoducho. Tieto súbory stačí naimportovať do sekcie
svojho webu. https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsPo prepojení knižníc stačí napísať prvok
Teraz pridajte značku skriptu, ktorá skutočne vygeneruje graf v určenom kontajneri. Toto je vlastne veľmi jednoduché. Ak veľmi dobre poznáte JavaScript, môžete si prečítať dokumentáciu a zistiť, ako vygenerovať vlastný graf. Na účely ukážky môžete použiť iba nasledujúci kód. Pridajte ho tesne pod prvok
Už ste takmer hotoví. Stačí otvoriť súbor HTML v prehliadači. Graf sa vám teraz vygeneruje. Môžete sa pohrať s kódom JS a vytvoriť vlastný graf na základe rôznych údajov. Týmto spôsobom môžete vygenerovať aj iný druh grafu.
Dokumentácia na hlavnej webovej stránke Chartist je veľmi podrobná. Má veľa príkladov, ako vytvoriť animované grafy. Ako front-end vývojár budete musieť prejsť touto dokumentáciou, aby ste vygenerovali graf. A pomocou nejakého kódu ich môžete dokonca exportovať.
Záverečné myšlienky:
Musím povedať, že Chartist je klenotom nástroja pre vývojárov a dizajnérov na integráciu vlastných grafov do inscenácia ako aj webová stránka vo výrobe. Je to veľmi jednoduché a v skutočnosti nemusíte písať veľmi dlhý kusový kód, pokiaľ nevytvárate nejaký skutočne zložitý. Úložisko GitHub už má viac ako 10 000 hviezdičiek, čo je samo o sebe obrovský úspech.
