Toimittajan arviot: Käyttäjäarviot:[Yhteensä: 0 Keskiarvo: 0].ilfs_responsive_below_title_1 { leveys: 300px; } @media(min-width: 500px) {.ilfs_responsive_below_title_1 { leveys: 300px; } } @media(min-leveys: 800px) {.ilfs_responsive_below_title_1 { leveys: 336px; } }

Chartist on ilmainen avoimen lähdekoodin SVG-kaavioiden luontikirjasto, jota voidaan käyttää. Se on erittäin edistynyt ja tukee monien kaavioiden luomista monilla parametreilla. Tämän avulla voit luoda kaikenkokoisia värikkäitä kaavioita ja laittaa ne verkkosivustollesi. Se tukee jopa CSS-animaatiota, joten tämän kirjaston avulla voit luoda animoituja kaavioita ja kaavioita.

Kun luot koontipaneeleja ja verkkosivuja näyttämään jonkinlaisia ​​raportteihin liittyviä tietoja, tarvitset kaavioita. Usein niiden piti olla dynaamisia tai staattisia. Siihen on olemassa työkaluja, mutta ei Chartistin kaltaisia. Tämä on luultavasti yksi laatuaan. Sen mukana tulee erittäin yksityiskohtainen dokumentaatio ja erittäin hyviä esimerkkejä, joten voit oppia luomaan kaavioita melko nopeasti.

Luettelo tuetuista kaaviotyypeistä kaavion mukaan:

Pylväskaavio (pinottu ja vaakasuora mukaan lukien) Viivakaavio Ympyräkartta-aluekaavio Donitsikartta Mittarikaavio Viivan hajontakaavio Animoitu SVG-polku Kaksinapainen viivakaavio Aikasarjat

Karttojen luomien kaavioiden ominaisuudet:

Äärimmäisen reagoiva kokoonpano. Tarran sijoitus Moniriviset tarrat Päällekkäiset palkit mobiililaitteille Reikiä tiedoissa CSS-animaatio SVG-animaatio Kehittynyt SMIL-animaatiolaajennukset tukevat

Kuinka Chartsitin avulla luodaan SVG-kaavioita?

Tätä kirjastoa voi käyttää useilla tavoilla. Voit käyttää sitä riippuen siitä, millainen käyttöliittymän kehittäjä olet. Se tulee Node-moduulina sekä upotettavana komentosarjatiedostona, jota voit käyttää suoraan HTML:ssä CDN:n kautta.

Yksinkertaisuuden vuoksi voit käyttää tätä HTML-dokumenteissa melko helposti. Sinun tarvitsee vain tuoda nämä tiedostot verkkosivustosi -osioon.

https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js

Kirjastoiden linkittämisen jälkeen sinun tarvitsee vain kirjoittaa

-elementti määrittääksesi kaavioalueen sivuilla. Voit halutessasi asettaa sille mukautetun leveyden. Säiliön korkeus ja leveys riippuvat yksittäisistä käyttötapauksista.

Lisää nyt komentosarjatunniste, joka todella luo kaavion määritettyyn säilöön. Tämä on itse asiassa hyvin yksinkertaista. Jos tunnet JavaScriptin erittäin hyvin, voit käyttää dokumentaatiota nähdäksesi kuinka luodaan mukautettu kartoittaa. Demotarkoituksiin voit käyttää vain seuraavaa koodia. Lisää se jo luomasi

-elementin alle.

Olet melkein valmis. Avaa vain HTML-tiedosto selaimessa. Kaavio luodaan nyt sinulle. Voit pelata JS-koodilla luodaksesi mukautetun kaavion erilaisiin tietoihin perustuen. Voit myös luoda toisenlaisen kaavion tällä tavalla.

Chartistin pääsivuston dokumentaatio on erittäin yksityiskohtainen. Siinä on monia esimerkkejä jopa animoitujen kaavioiden luomisesta. Käyttöliittymäkehittäjänä sinun on käytävä läpi tämä dokumentaatio luodaksesi kaavion. Ja jollain koodilla voit jopa tehdä niistä myös vientikelpoisia.

Loppuajatuksia:

Minun on sanottava, että Chartist on työkalu, jonka avulla kehittäjät ja suunnittelijat voivat integroida mukautettuja kaavioita lavastus sekä verkkosivut tuotannossa. Se on hyvin yksinkertaista, eikä sinun tarvitse kirjoittaa kovin pitkää koodia, ellet ole luomassa todella monimutkaista. GitHub-arkistossa on jo yli 10 000 tähteä, mikä on sinänsä valtava saavutus.

Categories: IT Info