Ganttov grafikon je zgodan tip trakasti grafikona koji se koristi u upravljanju projektima za prikazivanje rasporeda zadataka. Ovaj grafikon vizualno prikazuje aktivnosti projekta kao kaskadne vodoravne trake, a širina prikazuje trajanje projekta.
Kao web dizajner ili programer, možete koristiti Gantt ljestvice za upravljanje projektima i povećanje produktivnosti u vašem timu.
U ovom članku pokazat ću vam kako stvoriti jednostavnu Ganttovu shemu pomoću CSS Grid Layout sustava - bez vanjskih knjižnica ili drugog puha, samo čisti CSS.
Možete se pozvati na ovaj vodič da biste razumjeli kako koristiti sustav izgleda za primjenu CSS pravila.
Grafikon će prikazati tipičan proces životnog ciklusa razvoja softvera, od siječnja do prosinca.
Evo snimke zaslona kako će Ganttov grafikon izgledati na kraju ovog vodiča:
Započnimo!
Korak 1: Stvorite div
Počnimo s izradom div elementa spremnika za Gantt Chart:
Dodajmo mu CSS stil:
.container { max-width: 1200px; min-width: 650px; margin: 0 auto; padding: 50px; }Korak 2: Stvorite div grafikona
Stvorimo div unutar sveobuhvatnog spremnikai nazovite ga grafikon. Ovdje će se odvijati sve preostale akcije.
Dodajmo mu CSS stil:
.chart { display: grid; border: 2px solid #000; position: relative; overflow: hidden; } Obavijest da sam postaviti prikaz imovine klase u mrežu. Slijedom toga, sva njegova izravna djeca automatski će postati stavke mreže .
Korak 3: Stvorite redove grafikona
Krenimo s izradom prvog retka, koji će biti naslov Ganttovog grafikona.
JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember Primijetite da sam osigurao 12 rasponskih elemenata koji će poprečno prelaziti cijeli redak, prikazujući mjesece trajanja projekta - od siječnja do prosinca.
Evo njegovog CSS-a:
.chart-row { display: grid; grid-template-columns: 50px 1fr; background-color: #DCDCDC; }.chart-period { color: #fff; background-color: #708090 !important; border-bottom: 2px solid #000; grid-template-columns: 50px repeat(12, 1fr); } .chart-period > span { text-align: center; font-size: 13px; align-self: center; font-weight: bold; padding: 15px 0; }Primijetite da sam koristio svojstvo grid-template-columns da odredim širinu i broj stupaca u rasporedu mreže.
Pogledajmo kako to do sada izgleda u pregledniku:
Dalje, dodajmo retke koji će se prikazivati na cijelom grafikonu u stilu u obliku okvira, što pomaže prikazati trajanje svakog projekta.
Također sam koristio 12 elemenata raspona za stvaranje linija.
Evo njegovog CSS-a:
.chart-lines { position: absolute; height: 100%; width: 100%; background-color: transparent; grid-template-columns: 50px repeat(12, 1fr);} .chart-lines > span { display: block; border-right: 1px solid rgba(0, 0, 0, 0.3); }Pogledajmo izlaz u pregledniku:
Korak 4: Dodajte stavke unosa
Na kraju, dodajmo stavke koje ilustriraju jednogodišnji proces stvaranja nekog softvera.
Na primjer, evo kako sam dodao prvu stavku unosa:
1 - Planning
Dopustite mi da opišem što se događa u gornjem kodu:
- Prvo, obuhvaćajući div element ima klasu redaka grafikona , što sam prethodno ilustrirao.
- Div s klasi karta-red-točke koristi se za numeriranje ulaznih stavki na gantograma. Evo njegovog CSS-a:
.chart-row-item { background-color: #808080; border: 1px solid #000; border-top: 0; border-left: 0; padding: 20px 0; font-size: 15px; font-weight: bold; text-align: center; }- Da bih prikazao zadatke na Ganttovom grafikonu, stvorio sam neuređeni popis i oblikovao ga tako da prikazuje vodoravnu traku, a njegova duljina pokazuje trajanje zadatka.
Evo CSS stila za klasu stupci redaka grafikona :
.chart-row-bars { list-style: none; display: grid; padding: 15px 0; margin: 0; grid-template-columns: repeat(12, 1fr); grid-gap: 10px 0; border-bottom: 1px solid #000; }- Stavka unosa definirana je u oznaci li . Evo njegovog CSS stila:
li { font-weight: 450; text-align: left; font-size: 15px; min-height: 15px; background-color: #708090; padding: 5px 15px; color: #fff; overflow: hidden; position: relative; cursor: pointer; border-radius: 15px; } ul .chart-li-one { grid-column: 1/2; background-color: #588BAE; }Primijetite da sam koristio svojstvo grid-column da odredim trajanje projekta.
Na primjer, svojstvo grid-column: 3/9; poput unosa "Razvoj", obuhvaća zadatak preko mreže od ožujka do kolovoza.
Evo kako izgleda prva stavka u pregledniku:
Ostale unose na grafikon dodao sam slijedeći isti postupak kao i prvi unos. U konačnici je rezultirao lijepim Ganttovim grafikonom, baš kao i slika koju sam ranije pokazao.
Završavati
To je to! Na CodePenu možete pogledati cijeli kôd ovog vodiča:
Kao što ste vidjeli, stvaranje Ganttovog grafikona pomoću CSS Grid-a nije komplicirano. Pomoću ove vrste grafikona možete učinkovito upravljati projektima web razvoja i osigurati da su svi na putu prema postizanju zadanih ciljeva.
Furthermore, Gantt charts can also be used in other industries to manage projects. For example, if you are selling composting toilets, you can use Gantt charts to showcase the number of sales made over a period of time.
Of course, I’ve just scratched the surface about the things you can achieve with Gantt charts.
There are several other tweaks you can make to Gantt charts to suit your specific requirements and project’s goals. For example, you can use them to show the relationship between various tasks and how the completion of one relies on another, show how resources can be allocated for the success of projects, and show clear project requirements that ensure everyone is on the same page.
Do you have any questions or comments?
Please get in touch via Twitter below and I’ll do my best to respond.