Πώς να δημιουργήσετε ένα απλό γράφημα Gantt χρησιμοποιώντας CSS Grid

Το γράφημα Gantt είναι ένας εύχρηστος τύπος γραφήματος ράβδων που χρησιμοποιείται στη διαχείριση έργων για την προβολή χρονοδιαγράμματος εργασιών. Αυτό το γράφημα απεικονίζει τις δραστηριότητες του έργου ως διαδοχικές οριζόντιες ράβδους, με πλάτος που απεικονίζει τη διάρκεια του έργου.

Ως σχεδιαστής ιστοσελίδων ή προγραμματιστής, μπορείτε να χρησιμοποιήσετε γραφήματα Gantt για να διαχειριστείτε έργα και να βελτιώσετε την παραγωγικότητα εντός της ομάδας σας.

Σε αυτό το άρθρο, θα σας δείξω πώς να δημιουργήσετε ένα απλό γράφημα Gantt χρησιμοποιώντας το σύστημα CSS Grid Layout - χωρίς εξωτερικές βιβλιοθήκες ή άλλα χνούδια, απλώς καθαρό CSS.

Μπορείτε να αναφέρετε αυτό το σεμινάριο για να κατανοήσετε πώς να χρησιμοποιήσετε το σύστημα διάταξης για την εφαρμογή κανόνων CSS.

Το γράφημα θα δείξει μια τυπική διαδικασία κύκλου ζωής ανάπτυξης λογισμικού, από τον Ιανουάριο έως τον Δεκέμβριο.

Ακολουθεί ένα στιγμιότυπο οθόνης για το πώς θα φαίνεται το γράφημα Gantt στο τέλος αυτού του σεμιναρίου:

Ας αρχίσουμε!

Βήμα 1: Δημιουργήστε ένα κοντέινερ div

Ας ξεκινήσουμε δημιουργώντας ένα στοιχείο div container για το γράφημα Gantt:

Ας προσθέσουμε λίγο στυλ CSS σε αυτό:

.container { max-width: 1200px; min-width: 650px; margin: 0 auto; padding: 50px; }

Βήμα 2: Δημιουργήστε ένα διάγραμμα div

Ας δημιουργήσουμε ένα div μέσα στο γενικό κοντέινερκαι ονομάστε το γράφημα. Εδώ θα πραγματοποιηθούν όλες οι υπόλοιπες ενέργειες.

Ας προσθέσουμε λίγο στυλ CSS σε αυτό:

.chart { display: grid; border: 2px solid #000; position: relative; overflow: hidden; } 

Παρατηρήστε ότι έχω ορίσει την ιδιότητα εμφάνισης της κλάσης σε πλέγμα. Κατά συνέπεια, όλα τα άμεσα παιδιά του θα γίνουν αυτόματα στοιχεία πλέγματος .

Βήμα 3: Δημιουργήστε τις σειρές του γραφήματος

Ας ξεκινήσουμε δημιουργώντας την πρώτη σειρά, η οποία θα είναι η επικεφαλίδα του γραφήματος Gantt.

 JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember 

Παρατηρήστε ότι έχω παράσχει 12 στοιχεία εύρους που θα διασχίζουν ολόκληρη τη σειρά, δείχνοντας τους μήνες της διάρκειας του έργου - από τον Ιανουάριο έως τον Δεκέμβριο.

Εδώ είναι το CSS του:

.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; }

Παρατηρήστε ότι χρησιμοποίησα την   ιδιότητα πλέγματος-προτύπων-στηλών για να καθορίσω το πλάτος και τον αριθμό των στηλών στη διάταξη πλέγματος.

Ας δούμε πώς φαίνεται σε ένα πρόγραμμα περιήγησης:

Στη συνέχεια, ας προσθέσουμε γραμμές που θα τρέχουν σε όλο το γράφημα σε στυλ κουτιού, το οποίο βοηθά στην προβολή της διάρκειας κάθε έργου.

Χρησιμοποίησα επίσης 12 στοιχεία span για τη δημιουργία των γραμμών.

Εδώ είναι το CSS του:

.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); }

Ας δούμε την έξοδο σε ένα πρόγραμμα περιήγησης:

Βήμα 4: Προσθήκη στοιχείων εισαγωγής

Τέλος, ας προσθέσουμε τα στοιχεία που απεικονίζουν μια διαδικασία δημιουργίας κάποιου λογισμικού για όλο το χρόνο.

Για παράδειγμα, εδώ είναι πώς πρόσθεσα το πρώτο στοιχείο εισαγωγής:

 1 
    
  • Planning

Επιτρέψτε μου να περιγράψω τι συμβαίνει στον παραπάνω κώδικα:

  • Κατ 'αρχάς, το στοιχείο div που περιλαμβάνει μια κλάση γραμμής γραφήματος , την οποία είπα προηγουμένως.
  • Το div με μια κατηγορία chart-item-item χρησιμοποιείται για την αρίθμηση των στοιχείων εισόδου στο γράφημα Gantt. Εδώ είναι το CSS του:
.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; }
  • Για να δείξω εργασίες στο γράφημα Gantt, δημιούργησα μια μη ταξινομημένη λίστα και το χαρακτήρισα για να εμφανίσει μια οριζόντια γραμμή, με το μήκος της να δείχνει τη διάρκεια της εργασίας.

Εδώ είναι το στυλ CSS για την κλάση γραμμών γραμμών-γραμμών :

.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; }
  • Το στοιχείο εισαγωγής ορίζεται στην ετικέτα li . Εδώ είναι το στυλ του CSS:
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; }

Παρατηρήστε ότι έχω χρησιμοποιήσει την ιδιότητα πλέγματος-στήλης για να καθορίσω τη διάρκεια του έργου.

For example, a property of  grid-column: 3/9; like the “Development” entry, spans a task across the grid from March to August.

Here is how the first entry item looks in a browser:

I added the other entries on the chart following the same process as the first entry. Ultimately, it resulted into a nice-looking Gantt chart, just like the image I showed earlier.

Wrapping up

That’s it! You can view the entire code for this tutorial on CodePen:

As you’ve seen, creating a Gantt chart using CSS Grid is not complicated. With this type of chart, you can manage your web development projects effectively and ensure that everyone is on track toward accomplishing the stipulated objectives.

Επιπλέον, τα γραφήματα Gantt μπορούν επίσης να χρησιμοποιηθούν σε άλλους κλάδους για τη διαχείριση έργων. Για παράδειγμα, εάν πουλάτε τουαλέδες κομποστοποίησης, μπορείτε να χρησιμοποιήσετε γραφήματα Gantt για να δείξετε τον αριθμό των πωλήσεων που πραγματοποιήθηκαν για μια χρονική περίοδο.

Φυσικά, μόλις έγραψα την επιφάνεια για τα πράγματα που μπορείτε να επιτύχετε με τα γραφήματα Gantt.

Υπάρχουν πολλές άλλες τροποποιήσεις που μπορείτε να κάνετε στα γραφήματα Gantt για να ταιριάζει στις συγκεκριμένες απαιτήσεις και τους στόχους του έργου σας. Για παράδειγμα, μπορείτε να τα χρησιμοποιήσετε για να δείξετε τη σχέση μεταξύ διαφόρων εργασιών και πώς βασίζεται η ολοκλήρωση ενός, να δείξετε πώς μπορούν να διατεθούν πόροι για την επιτυχία των έργων και να δείξετε σαφείς απαιτήσεις έργου που διασφαλίζουν ότι όλοι βρίσκονται στην ίδια σελίδα.

Έχετε απορίες ή σχόλια;

Παρακαλώ επικοινωνήστε μέσω Twitter παρακάτω και θα κάνω ό, τι καλύτερο μπορώ να απαντήσω.