10 fragmentów CSS do tworzenia prostych wykresów słupkowych

Szukasz sposobu na tworzenie prostych wykresów słupkowych CSS w Internecie? Ta kolekcja z pewnością pomoże, ponieważ jest pełna bezpłatnych wykresów słupkowych o otwartym kodzie źródłowym, zaprojektowanych w CSS.

Większość z tych wykresów ma mocne uderzenie dzięki dodatkowym animacjom CSS i efektom gradientu. Ale znajdziesz kilka, które nawet zmieniają położenie, rozmiar, kształt i projekt danych. Idealna kolekcja dla każdego programisty frontendowego, który szuka eleganckiego interfejsu użytkownika z wykresami słupkowymi.

1. Wykresy danych

W tym zestawie znajdziesz kilka pięknie zaprojektowanych i bardzo dobrze wykonanych wykresów. Deweloper Kris Olszewski skupił się głównie na UX dla tych wykresów słupkowych wraz z górną częścią każdego słupka udostępniającą surowe dane (w tym przypadku liczby zastępcze).

Oczywiście całość działa na CSS, co z pewnością robi wrażenie. Zawiera szablony dla pionowych i poziomych pasków oraz warstwowych, w których można zmienić kolor tła w oparciu o określone wartości.

Z pewnością jeden z moich ulubionych zestawów jest tam, ponieważ oferuje programistom tak dużą różnorodność do wyboru i dostosowania.

2. Wykres paska pokemonów

Nie mogę powiedzieć, że ten projekt byłby szczególnie przydatny w rzeczywistym układzie, ale na pewno robi wrażenie.

Te paski w stylu Pokemonów oferują kreatywne projektowanie wykresów w Internecie. Każdy pasek opiera się na określonej kolorystyce wraz z elementami wektorowymi dla oczu poszczególnych Pokemonów.

Każdy z nich zawiera efekt animacji po najechaniu kursorem, dzięki czemu możesz nawet zmienić styl, aby dopasować go do dowolnych przejść. A jeśli chcesz zmienić te stworzenia w inne zwierzęta, możesz skorzystać z tego samego szablonu ze zmienionymi kolorami.

3. Animowany wykres

Wykresy słupkowe służą do wyświetlania danych wizualnych w celu łatwego zużycia. Oznacza to, że należy uwzględnić zarówno elementy wizualne, jak i surowe dane.

To jedna rzecz, którą naprawdę lubię na tym wykresie, używając etykiet procentowych u góry każdego słupka. Nie zawiera legendy ani żadnych etykiet X/Y, ale nie byłoby trudno je dodać.

Myślę, że najbardziej imponującą częścią jest to, jak całość przebiega przez CSS. Zarówno animacje, jak i tekst w procentach pojawiają się ze względu na właściwości CSS. Zwariowane rzeczy!

4. Minimalistyczny wykres

Prosty i łatwy w użyciu najlepiej opisuje minimalistyczne szaleństwo ogarniające sieć. Minimalizm jest często najlepszym wyborem w przypadku responsywnych stron internetowych lub prostszych układów, które nie wymagają intensywnych schematów kolorystycznych.

Za pomocą tego wykresu słupkowego możesz zmienić styl danych, aby dopasować je do dowolnego jasnego koloru.

Wykorzystuje arbitralne wiersze tła do wskazywania pomiarów, a nawet możesz dodać etykiety na osi Y, aby wyjaśnić dane.

5. Czyste paski kolorów CSS

Gradienty CSS wnoszą wiele do sieci, a ten wykres słupkowy to tylko kolejny przykład działania gradientów.

Każdy pasek wykorzystuje klasyczne gradienty Web 2.0, które mogą wydawać się nieco staroświeckie, ale wyglądają fantastycznie. Cały projekt działa na kodzie Sass i wykorzystuje zmienne do ustawienia opóźnienia animacji, rozmiarów słupków i całkowitej wysokości wykresu.

Aby edytować kolory, musisz przejść przez Sass/SCSS lub użyć CodePen do kompilacji do surowego CSS. Ale nie jest to zbyt skomplikowany wykres, więc nie powinno to stanowić większego problemu.

6. Naprzemienne poziome paski

Animacje liniowe to jedne z moich ulubionych, ponieważ szybko przykuwają uwagę. W tym pisaku zobaczysz przykład animacji liniowej, w której każdy pasek wczytuje się jeden po drugim.

Został zaprojektowany poziomo, więc paski ładują się na ekranie i zawierają etykiety wewnątrz grafiki paska. W ten sposób całkowity pomiar „poziomu umiejętności” podąża za osią X i pozostawia miejsce na dodanie większej liczby umiejętności w pionie.

Jeden z czystszych wykresów słupkowych, jakie widziałem i może działać znakomicie na dowolnej witrynie portfolio opartej na umiejętnościach.

7. Responsywny wykres słupkowy

Każda nowoczesna strona internetowa naprawdę powinna być responsywna, aby pomieścić wszystkie urządzenia. Ale niektóre elementy są trudniejsze do zareagowania niż inne.

Tabulatory, duże tabele i wykresy to złożone przykłady. Ten responsywny wykres doskonale radzi sobie z obsługą mniejszych ekranów. Nie zmienia się zbytnio poza całkowity rozmiar i przestrzeń między słupkami.

Na mniejszych ekranach elementy paska mogą wydawać się ciasne i prawie niemożliwe do odczytania. Ale w większości ten responsywny styl jest fantastyczny i stanowi doskonały substytut wykresów statycznych.

8. Dzienny wykres CSS

Programiści lubią sprawdzać swoje umiejętności za pomocą wyzwań, takich jak Daily CSS. To pobiera obrazy projektów interfejsu użytkownika każdego dnia i prosi programistów o odtworzenie ich w HTML/CSS.

Wiele z nich znajdziesz w CodePen, a ten wykres jest jednym z nieskazitelnych przykładów.

Został zaprojektowany z prostotą i czystymi efektami animacji dołączonymi do każdego paska. Nie wspominając o monochromatycznym schemacie kolorów, który można łatwo dostosować do dowolnej witryny.

9. V Wykres inwentarzowy

Innym fajnym przykładem Daily CSS jest wykres inwentaryzacji winnic utworzony przy użyciu CSS i pewnych sprytnych umiejętności HTML.

To dość wyjątkowy pomysł i jeszcze bardziej imponujący, że działa wyłącznie przez CSS. Jestem pod wrażeniem rzeczywistego projektu wykresu i tego, jak doskonale renderuje się w przeglądarce.

To prawda, to również nie działałoby na większości stron internetowych, ale jest to świadectwo tego, co jest możliwe w nowoczesnym CSS.

10. Umiejętności horyzontalne tylko w CSS

W Internecie znajdziesz mnóstwo wykresów słupkowych mierzących umiejętności, ale ten autorstwa Jeda Trowa to prawdziwa uczta.

Został zaprojektowany tak, aby był w pełni responsywny i działa bezbłędnie na każdym ekranie. Możesz zmienić rozmiar tego wykresu słupkowego do 320px dla smartfonów i nadal będzie on utrzymywał spójność.

Ponadto to pióro zawiera małą sekcję samouczka pod wersją demonstracyjną, w której można zobaczyć cały kod źródłowy i sposób jego działania. Oczywiście możesz również po prostu skopiować/wkleić z IDE CodePen, ale miło jest zobaczyć, jak programista rozkłada swój proces.

Wszystkie te wykresy oferują coś wyjątkowego, ale łączy je też jedno: niesamowite wykorzystanie czystego kodu CSS.

Może ci się spodobać także: 10 bibliotek wykresów danych JavaScript typu open source, które warto wziąć pod uwagę.