Oceny edytorów: Oceny użytkowników: [Łącznie: 0 Średnia: 0].ilfs_responsive_below_title_1 { szerokość: 300px; } @media(min-szerokość: 500px) {.ilfs_responsive_below_title_1 { szerokość: 300px; } } @media(min-szerokość: 800px) {.ilfs_responsible_below_title_1 { szerokość: 336px; } }
Chartist to bezpłatna biblioteka do generowania wykresów SVG o otwartym kodzie źródłowym, z której można korzystać. Jest bardzo zaawansowany i obsługuje generowanie wielu wykresów z dużą ilością parametrów. Dzięki temu możesz wygenerować kolorowe wykresy o dowolnym rozmiarze i umieścić je na swojej stronie internetowej. Obsługuje nawet animację za pomocą CSS, dzięki czemu za pomocą tej biblioteki będziesz mógł generować animowane wykresy i wykresy.
Przy tworzeniu pulpitów nawigacyjnych i stron internetowych, aby pokazać pewnego rodzaju dane związane z raportami, potrzebujesz wykresów. Wiele razy musiały być dynamiczne lub statyczne. Istnieją narzędzia do tego, ale nie takie jak Chartist. To chyba jedyny w swoim rodzaju. Zawiera bardzo szczegółową dokumentację i bardzo dobre przykłady, dzięki czemu można szybko nauczyć się generować wykresy.
Lista obsługiwanych typów wykresów przez Chartist:
Wykres słupkowy (w tym piętrowy i poziomy) Wykres liniowy Wykres kołowy Wykres warstwowy Wykres pierścieniowy Wykres wskaźnikowy Wykres rozproszenia liniowego Animowana ścieżka SVG Dwubiegunowy wykres liniowy Szeregi czasowe
Cechy wykresów wygenerowanych przez Chartist:
Ekstremalnie responsywna konfiguracja. Umieszczanie etykiet Etykiety wielowierszowe Zachodzące na siebie paski dla urządzeń mobilnych Otwory w danych Animacja CSS Animacja SVG Zaawansowane animacje SMIL Obsługa wtyczek
Jak używać Chartsit do generowania wykresów SVG?
Istnieje wiele sposobów korzystania z tej biblioteki. W zależności od tego, jakim jesteś programistą frontendowym, możesz z niego korzystać. Jest dostępny jako moduł Node, a także jako plik skryptu do osadzenia, który można obsługiwać bezpośrednio w HTML przez CDN.
Dla uproszczenia, można go dość łatwo użyć w dokumentach HTML. Wystarczy zaimportować te pliki w sekcji
swojej witryny. https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.jsPo połączeniu bibliotek wystarczy napisać element
Teraz dodaj tag skryptu, który faktycznie wygeneruje wykres w określonym kontenerze. W rzeczywistości jest to bardzo proste. Jeśli bardzo dobrze znasz JavaScript, możesz przejrzeć dokumentację, aby zobaczyć, jak wygenerować niestandardowy wykres. Do celów demonstracyjnych możesz po prostu użyć poniższego kodu. Dodaj go tuż poniżej elementu
Prawie skończyłeś. Wystarczy otworzyć plik HTML w przeglądarce. Wykres zostanie teraz wygenerowany dla Ciebie. Możesz bawić się kodem JS, aby wygenerować niestandardowy wykres na podstawie różnych danych. W ten sposób możesz również wygenerować inny rodzaj wykresu.
Dokumentacja na głównej stronie Chartist jest bardzo szczegółowa. Zawiera wiele przykładów nawet na tworzenie animowanych wykresów. Jako programista front-end będziesz musiał przejrzeć tę dokumentację, aby wygenerować wykres. A przy odrobinie kodu można je nawet wyeksportować.
Zamykające myśli:
Muszę powiedzieć, że Chartist to perełka narzędzia dla programistów i projektantów do integracji niestandardowych wykresów w inscenizacja oraz strona internetowa w produkcji. Jest to bardzo proste i tak naprawdę nie musisz pisać bardzo długiego kodu, chyba że nie tworzysz naprawdę złożonego. Repozytorium GitHub ma już ponad 10 000 gwiazdek, co samo w sobie jest ogromnym osiągnięciem.
